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

      <el-form-item
        label="责任人:"
        :label-width="formLabelWidth"
        prop="name"
      >
        <el-input v-model="formData.name"></el-input>
      </el-form-item>

      <el-form-item
        label="联系方式:"
        :label-width="formLabelWidth"
        prop="phone"
      >
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>

      <el-form-item
        label="团队人员:"
        :label-width="formLabelWidth"
        prop="queryJson"
      >
        <el-select
          v-model="formData.queryJson"
          style="width: 100%"
          placeholder=""
        >
          <el-option
            v-for="item in deviceData"
            :key="item.code"
            :label="item.deviceName"
            :value="item.deviceCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="table-tit">组织人员</div>
      <el-table
        :data="tableData2"
        stripe
        style="width: 100%;margin-top:10px"
        id="out-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>

        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="contact" 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/team";


//设备下拉数据
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 {

      tableData2: [
        {
          name: "admin",
          contact: "13245678902",
        },
         {
          name: "张三三",
          contact: "13245678902",
        },
         {
          name: "李思思",
          contact: "13245678902",
        },
         {
          name: "王呜呜",
          contact: "13245678902",
        },
         {
          name: "admin",
          contact: "13245678902",
        },
         
      ],


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

      //校验
      rules: {
        teamName: [
          { required: true, message: "请输入团队名称", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入责任人", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        queryJson: [
          { 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: {


     handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    
    //关闭窗口
    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 {
          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>

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