<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    width="60%"
  >
    <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="计划名称:"
              prop="planName"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="formData.planName"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="计划路线:"
              prop="planRoute"
              :label-width="formLabelWidth"
            >
              <el-select
                v-model="formData.planRoute"
                placeholder=""
                style="width: 100%"
              >
                <el-option label="路线一" value="1"></el-option>
                <el-option label="路线二" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="执行团队:"
              prop="planTeam"
              :label-width="formLabelWidth"
            >
              <el-select
                v-model="formData.planTeam"
                placeholder=""
                style="width: 100%"
              >
                <el-option label="团队一" value="3"></el-option>
                <el-option label="团队二" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="巡检开始时间:"
              :label-width="formLabelWidth"
              prop="planStartTime"
            >
              <el-time-select
                placeholder="开始时间"
                v-model="formData.planStartTime"
                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.planEndTime"
              :label-width="formLabelWidth"
              prop="planEndTime"
              key="planEndTime"
            >
              <el-time-select
                placeholder="结束时间"
                v-model="formData.planEndTime"
                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="planCycle"
              :label-width="formLabelWidth"
            >
              <el-checkbox-group
                v-model="formData.planCycle"
                style="width: 100%"
              >
                <el-checkbox
                  name="planCycle"
                  v-for="item in cycles"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <el-form-item
              label="执行开始日期:"
              prop="planStartDate"
              :label-width="formLabelWidth"
              style="margin-top: 0px"
            >
              <el-date-picker
                style="width: 100%"
                v-model="formData.planStartDate"
                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="执行结束日期:"
              prop="planEndDate"
              :label-width="formLabelWidth"
            >
              <el-date-picker
                style="width: 100%"
                v-model="formData.planEndDate"
                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-table
        :data="tableData2"
        stripe
        border
        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
        style="width: 100%"
        id="out-table"
      >
        <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="cameraName" label="点位名称"> </el-table-column>
        <el-table-column prop="company" label="点位地址"> </el-table-column>
        <el-table-column label="点位详情">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrl" style="width: 25px" />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="background: #f6f6f6">关 闭</el-button>
      <el-button type="primary" @click="submitForm('formData')"
        >保 存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import api from "@/api/partolplan";

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

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

      tableData2: [
        {
          order: "1",
          cameraName: "维保测试点位",
          company: "上海青浦区徐泾镇徐乐路208号",
          imageUrl: require("@/assets/img.png"),
        },
        {
          order: "2",
          cameraName: "维保测试点位",
          company: "测试地址",
          imageUrl: require("@/assets/img.png"),
        },
      ],

      //校验
      rules: {
        planName: [
          { required: true, message: "请输入巡检计划名称", trigger: "change" },
        ],
        planRoute: [
          { required: true, message: "请输入巡检计划路线", trigger: "blur" },
        ],
        planTeam: [
          { required: true, message: "请输入执行团队", trigger: "blur" },
        ],
        planCycle: [
          { required: true, message: "请选择巡更周期", trigger: "change" },
        ],
        planStartTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        planEndTime: [
          { required: true, message: "请输入结束时间", trigger: "change" },
        ],
        planStartDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        planEndDate: [
          { required: true, message: "请输入结束日期", trigger: "change" },
        ],
      },

      // 时间插件
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.formData.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.formData.endTime).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.formData.startTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() < new Date(this.formData.startTime).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.formData.planCycle = JSON.stringify(this.formData.planCycle);

          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>
