<template>
  <el-drawer title="设备批量巡检" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form ref="dialogForm" :rules="rules" label-width="100px" :model="form">
          <el-row>
            <el-col :md="12" :sm="24" prop="inspect_time">
              <el-form-item label="巡检时间" prop="inspect_time">
                <el-date-picker v-model="form.inspect_time" type="datetime" placeholder="巡检时间"
                  value-format="YYYY-MM-DD HH:mm:ss" style="width:100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="巡检人" prop="inspect_user">
                <span style="display:flex">
                  <el-input readonly v-model="form.inspect_user_name"></el-input>
                  <ehsUserSelect :multiple="false" @submit="getReceptionist" />
                </span>
              </el-form-item>
            </el-col>
            <el-table :data="eqms" border placeholder="设备名称">
              <el-table-column prop="testitem" label="设备名称" min-width="120" align="center">
                <template #default="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="result" label="巡检结果" min-width="100" align="center">
                <template #default="scope">
                  <el-select style="width: 100%" v-model="scope.row.result" placeholder="巡检结果">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="result" label="备注" min-width="100" align="center">
                <template #default="scope">
                  <el-input v-model="scope.row.note" placeholder="备注" />
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<script>
import { genTree } from "@/utils/verificate";
export default {
  emits: ["success", "closed"],
  props: {
    eqms: {
      type: Array, default: function () {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      form: {
        inspect_time: "",
        inspect_user: ''
      },
      rules: {
        inspect_time: [{ required: true, message: "请选择巡检时间", trigger: "blur" }],
        inspect_user: [{ required: true, message: "请选择巡检人", trigger: "blur" }]
      },
      options: [
        { id: 'pass', name: '合格' },
        { id: 'fail', name: '不合格' }
      ],
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {
    this.eqms.forEach(item => {
      item.result = 'pass';
      item.note = '';
    })
  },
  methods: {
    getReceptionist(data) {
      this.form.inspect_user = data.id;
      this.form.inspect_user_name = data.name;
    },
    //显示
    open() {
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            let objArr = [];
            this.eqms.forEach(item => {
              let obj = {};
              obj.equipment = item.id;
              obj.equipment_name = item.name;
              obj.result = item.result;
              obj.inspect_time = this.form.inspect_time;
              obj.inspect_user = this.form.inspect_user;
              obj.note = item.note ? item.note : '';
              objArr.push(obj);
            })
            console.log(objArr);
            this.$API.em.einspect.create.req(objArr).then(res => {
              this.visible = false;
              this.isSaveing = false;
              this.$message.success("操作成功");
              return res;
            }).catch(() => {
              this.isSaveing = false;
            })
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },

    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style></style>
