<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    class="routeDialogVisible"
  >
    <el-form
      :rules="rules"
      ref="formData"
      :model="formData"
      label-position="right"
      status-icon
    >
      <el-form-item
        label="路线名称:"
        :label-width="formLabelWidth"
        prop="routeName"
      >
        <el-input v-model="formData.routeName"></el-input>
      </el-form-item>




      <el-form-item
        label="上传图片:"
        :label-width="formLabelWidth"
        prop="routeUrl"      >
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :src="formData.routeUrl"
        >
          <el-button size="small">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注:" :label-width="formLabelWidth" prop="remarks">
        <el-input v-model="formData.remarks" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="点位id:" :label-width="formLabelWidth">
        <el-input v-model="formData.queryJson" autocomplete="off"></el-input>
      </el-form-item>

      <div class="table-tit">选择巡检点</div>

      <div class="filter-container">
        <div class="filter-left">
          <div class="filter-item">
            点位名称:
            <el-input placeholder="" style="width: 150px"></el-input>
          </div>
          <div class="filter-item">
            点位地址:
            <el-input placeholder="" style="width: 150px"></el-input>
          </div>
        </div>
      </div>

      <el-table
        :data="addTableData"
        stripe
        border
        :header-cell-style="{ background: '#eee', color: '#606266' }"
        style="width: 100%"
        id="out-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column prop="order" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="pointName" label="点位名称"> </el-table-column>
        <el-table-column prop="pointAddress" label="点位地址">
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="background: #f6f6f6"
        >关 闭</el-button
      >
      <el-button type="primary" @click="submitForm('formData')"
        >保 存</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import api from "@/api/patrolRoute";

//设备下拉数据
const deviceData = [
  {
    deviceCode: "4689975698772669995465611",
    deviceName: "设备1",
  },
  {
    deviceCode: "122",
    deviceName: "设备2",
  },
  {
    deviceCode: "123",
    deviceName: "设备3",
  },
];

export default {
  name: "edit",
  props: {
    title: {
      //弹框的标题
      type: String,
      default: "",
    },
    visible: {
      //弹框窗口，true弹出
      type: Boolean,
      default: false,
    },
    remoteClose: Function, //用于关闭窗口
    formData: {
      //提交表单数据
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      addTableData: [
        {
          order: "1",
          pointName: "点位121212121",
          pointAddress: "青浦区徐泾镇徐乐路208号1楼",
        },
      ],

      // 上传图片
      fileList: [],

      deviceData,
      multipleSelection: [],
      formLabelWidth: "120px",

      //校验
      rules: {
        routeName: [
          { required: true, message: "请输入路线名称", trigger: "blur" },
        ],
        routeUrl: [
          {required: true, message: '请上传图片', trigger: 'blur'}
        ],

        remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },

      // 时间插件
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.formData.endDate) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.formData.endDate).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.formData.startDate) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() < new Date(this.formData.startDate).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //关闭窗口
    handleClose() {
      //将表单清空
      this.$refs["formData"].resetFields();
      //注意不可以通过this.visiable=false来关闭，因为他是父组件的属性
      this.remoteClose();
    },

    //提交表单数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          deviceData.forEach((item, index) => {
            if (item.deviceCode == this.formData.deviceCode) {
              this.formData.deviceName = item.deviceName;
            }
          });
          // this.formData.patrolPlanCycle = JSON.stringify(
          //   this.formData.patrolPlanCycle
          // );

          this.submitData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async submitData() {
      let response = null;
      if (this.formData.id) {
        // 编辑
        response = await api.update(this.formData);
      } else {
        // 新增
        response = await api.add(this.formData);
      }

      if (response.success) {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        // 关闭窗口
        this.handleClose();
      } else {
        this.$message({
          message: response.Msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped>
.table-tit {
  background: rgb(235, 241, 255);
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  font-weight: bold;
  padding: 8px 10px;
}
</style>