<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    width="60%"
     v-if="visible"
  >
    <el-form
      :rules="rules"
      ref="formData"
      :model="formData"
      label-position="right"
      status-icon
    >
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="设备名称:"
              :label-width="formLabelWidth"
              prop="deviceCode"
            >
              <el-select
                v-model="formData.deviceCode"
                style="width: 100%"
                placeholder=""
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.code"
                  :label="item.deviceName"
                  :value="item.deviceCode"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="巡更计划:"
              :label-width="formLabelWidth"
              prop="patrolPlanName"
            >
              <el-input v-model="formData.patrolPlanName"></el-input>
            </el-form-item>

            <el-form-item
              label="巡更开始时间:"
              :label-width="formLabelWidth"
              prop="startTime"
            >
              <el-time-select
                placeholder="开始时间"
                v-model="formData.startTime"
                style="width: 100%"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }"
              >
              </el-time-select>
            </el-form-item>
            <el-form-item
              label="巡更结束时间:"
              v-model="formData.endTime"
              :label-width="formLabelWidth"
              prop="endTime"
              key="endTime"
            >
              <el-time-select
                placeholder="结束时间"
                v-model="formData.endTime"
                style="width: 100%"
                :picker-options="{
                  minTime: formData.startTime,
                }"
              >
              </el-time-select>
            </el-form-item></div
        ></el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="巡更周期"
              prop="patrolPlanCycle"
              :label-width="formLabelWidth"
            >
              <el-checkbox-group
                v-model="formData.patrolPlanCycle"
                style="width: 100%"
              >
                <el-checkbox
                  name="patrolPlanCycle"
                  v-for="item in cycles"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <el-form-item
              label="执行开始日期:"
              :label-width="formLabelWidth"
              style="margin-top: 0px"
              prop="startDate"
            >
              <el-date-picker
                style="width: 100%"
                v-model="formData.startDate"
                type="date"
                placeholder="选择开始日期"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="执行结束日期:"
              :label-width="formLabelWidth"
              prop="endDate"
            >
              <el-date-picker
                style="width: 100%"
                v-model="formData.endDate"
                type="date"
                placeholder="选择结束日期"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions2"
              >
              </el-date-picker>
            </el-form-item></div
        ></el-col>
      </el-row>
    </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/partol";

//巡检周期数据
const cycleOptions = [
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
];

export default {
  name: "edit",
  props: {
    title: {
      //弹框的标题
      type: String,
      default: "",
    },
    visible: {
      //弹框窗口，true弹出
      type: Boolean,
      default: false,
    },
    remoteClose: Function, //用于关闭窗口
    formData: {
      //提交表单数据
      type: Object,
      default: {},
    },

    deviceList: {
      //设备下拉
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      //设备下拉数据
      deviceData: [
        {
          deviceCode: "4689975698772669995465611",
          deviceName: "设备1",
        },
        {
          deviceCode: "122",
          deviceName: "设备2",
        },
        {
          deviceCode: "123",
          deviceName: "设备3",
        },
      ],

      multipleSelection: [],
      formLabelWidth: "120px",
      cycles: cycleOptions,

      //校验
      rules: {
        deviceCode: [
          { required: true, message: "请选择设备名称", trigger: "change" },
        ],
        patrolPlanName: [
          { required: true, message: "请输入巡更计划名称", trigger: "blur" },
        ],
        patrolPlanCycle: [
          { required: true, message: "请选择巡更周期", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请输入结束时间", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "请输入结束日期", trigger: "change" },
        ],
      },

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

    //提交表单数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.deviceList.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: "保存失败",
          type: "error",
        });
      }
    },
  },
};
</script>