<template>
  <el-dialog
    title="新增"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <el-row>
      <el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
        <el-col>
          <el-form-item v-show="false" label="管道id" prop="pipeId">
            <el-input
              disabled
              class="el-input"
              v-model="editForm.pipeId"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item v-show="false" label="企业id" prop="enterpriseId">
            <el-input disabled v-model="editForm.enterpriseId"></el-input>
          </el-form-item>
        </el-col>

        <el-col
          ><el-form-item label="管道名称" prop="pipeName">
            <el-input v-model="editForm.pipeName"></el-input> </el-form-item
        ></el-col>

        <el-col :span="11">
          <el-form-item label="管道编号" prop="pipeCode">
            <el-input v-model="editForm.pipeCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="管道长度" prop="pipeLength">
            <el-input v-model="editForm.pipeLength">
              <i
                slot="suffix"
                style="color: #000; font-style: normal; margin-right: 10px"
                >米</i
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道所在地址" prop="iconUrl">
            <el-input v-model="editForm.iconUrl"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="经纬度坐标" prop="coordinates">
            <el-card class="box-card">
              <div v-text="lnglatsArr"></div>
              <!-- [<span
              v-for="(item, index) in lnglatsArr"
              :key="index"
              class="text item"
            >

              {{`[${item[0]},${item[1]}],`}}
            </span>] -->
            </el-card>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道类型" prop="pipeType">
            <!-- 下拉 -->

            <el-radio-group v-model="editForm.pipeType">
              <el-radio label="1">地埋管线</el-radio>
              <el-radio label="2">地表管线</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道压力" prop="pipePressure">
            <!-- select -->
            <el-radio-group v-model="editForm.pipePressure">
              <!-- 1低压，2中压，3次高压，4高压 -->
              <el-radio label="1">低押</el-radio>
              <el-radio label="2">中压</el-radio>
              <el-radio label="3">次高压</el-radio>
              <el-radio label="4">高压</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上传图片" prop="">
            <MyFileUpload
              listType="picture-card"
              @resFun="fileFinshed"
              @remove="listRemove"
              :fileArr="fileArr"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-show="false" label="设备图片路径" prop="url">
            <el-input disabled v-model="editForm.url"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="安装日期" prop="installationTime">
            <el-col :span="11">
              <el-date-picker
                type="datetime"
                placeholder="选择日期"
                style="width: 100%"
                v-model="editForm.installationTime"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <!-- <el-col>
        <el-form-item label="最后巡检日期" prop="inspectionTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              v-model="editForm.inspectionTime"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-col> -->
        <el-col>
          <el-form-item label="备注信息" prop="remarks">
            <el-input v-model="editForm.remarks" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import MyFileUpload from "@/components/MyFileUpload";
import { addPipe, updatePipe } from "@/api/device/pipe.js";
export default {
  props: {
    lineData: {
      type: Object,
      // default:{}
    },
    // 经纬度路径
    lnglatsArr: {
      type: Array,
    },
    // 管道长度
    pipeLength: { type: Number },
    title: { type: String },
    //回调函数
    lineOkCallBack: { type: Function },
    gaodeMap: { type: Object },
    target: { type: Object },
    //message: { type: String },
    //duration: { type: Number, default: 2000 }
  },
  components: {
    MyFileUpload,
  },

  data() {
    return {
      // isShow: false,
      fileArr: [],
      editForm: {
        pipeType: "1",
        pipePressure: "1",
        url: "",
      },
      dialogVisible: false,
    };
  },
  created() {
    console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
    if (this.lineData?.pipeId) {
      this.editForm = { ...this.lineData };
    }
    this.editForm.coordinates = this.lnglatsArr;
    // 如果有图片路径就赋显，如果没有就啥也没有
    this.fileArr = this.editForm.url != "" ? [{ url: this.editForm.url }] : [];
  },
  methods: {
    ok() {
      // console.log(this.editForm.pipeId);
      // if(this.editForm.pipeId){
      //   console.log("更改")
      // }else{
      //   console.log("新增")
      // }
      const data = { ...this.editForm };
      console.log("data", data);
      console.log(this.editForm.pipeId);
      this.requeset(this.editForm.pipeId).then((res) => {
        this.dialogVisible = false;
        this.lineOkCallBack.call(this.gaodeMap, this.target);
      });
      // console.log(this.gaodeMap,this.target)
    },
    async requeset(id, data) {
      id ? console.log("修改") : console.log("新增");
      return id ? updatePipe(data) : addPipe(data);
    },
    show() {
      //this.isShow = true;
      this.dialogVisible = true;
      /*setTimeout(() => {
          this.hide()
        }, this.duration)*/
    },
    hide() {
      this.isShow = false;
      this.remove();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 图片上传成功
    fileFinshed(e) {
      this.editForm.url = e.url;
    },
    // 图片列表移除
    listRemove(e) {
      this.editForm.url = "";
      this.fileArr = [];
    },
  },
};
</script>

<style lang="scss">
.notice {
  background: white;
  position: fixed;
  top: 102px;
  right: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  border: solid 1px;
}
.el-input {
  // width: 200px;
}
</style>

