<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    :close="close"
    width="800px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="报警设备" prop="deviceName">
        <font>{{ form.deviceName }}</font>
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmType">
        <font>{{ form.alarmType }}</font>
      </el-form-item>
      <el-form-item label="报警值" prop="alarmValue">
        <font>{{ form.alarmValue }}</font>
      </el-form-item>
      <el-form-item label="工单名称" prop="orderName">
        <el-input v-model="form.orderName" placeholder="请输入工单名称" />
      </el-form-item>
      <el-form-item label="指定执行人员" prop="appointInspector">
        <el-select
          v-model="form.appointInspector"
          placeholder="请选择执行人员"
          clearable
          size="small"
          @change="setUserId"
        >
          <el-option
            v-for="item in inspector"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单描述" prop="remarks">
        <el-input
          type="textarea"
          v-model="form.remarks"
          placeholder="请输入工单描述"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="submitForm"
        >确 定</el-button
      >
      <!-- <el-button @click="cancel">取 消</el-button> -->
      <el-button @click.stop="close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { inspectorList } from "@/api/system/user";
import { addBasicsInfo } from "@/api/workOrder/basicsInfo";
import { getDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";

export default {
  props: {
    // 传进来一些内容
    content: {
      type: Object,
    },
  },

  data() {
    return {
      form: {
        deviceName: "",
        alarmType: "",
        alarmValue: "",
        orderName: "",
        appointInspector: "",
        remarks: "",
      },
      gaoMap: "",
      open: false,
      title: "",
      inspector: [],
      loading: false,
      alarmId: "",
      rules: {
        orderName: [
          { required: true, message: "工单名称不能为空", trigger: "blur" },
        ],
        appointInspector: [
          { required: true, message: "请选择巡检人员", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    // this.alarmId && this.handleIssue(this.alarmId);
  },
  watch: {
    open(value, oldValue) {
      if (value) {
        console.log(this.alarmId);
        this.handleIssue(this.alarmId);
      }
    },
  },
  methods: {
    handleIssue(alarmId) {
      this.getInspectorList();
      getDeviceAlarm(alarmId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "填写工单信息";
      });
    },

    getInspectorList() {
      this.loading = true;
      inspectorList().then((response) => {
        this.inspector = response.data;
        this.loading = false;
      });
    },
    setUserId(val) {
      this.form.appointInspector = val;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.resourceId = this.form.alarmId;
          this.form.orderType = "3";
          addBasicsInfo(this.form).then((response) => {
            if (response.code == 200) {
              this.msgSuccess("生成工单成功");
              this.open = false;
              console.log(response.msg);
              this.$emit("callback", response.msg);
            }
          });
        }
      });
    },
    close() {
      console.log("关闭");
      this.open = false;
    },
  },
};
</script>

<style>
</style>