<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="left"
    >
      <el-form-item :label="$t('task.rwnr')" prop="taskContent">
        <el-input
          v-model="form.taskContent"
          type="textarea"
          :rows="2"
          placeholder="任务内容"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('task.clr')" prop="handler">
        <el-select
          v-model="form.handler"
          style="width: 100%"
          filterable
          placeholder="处理人"
        >
          <el-option
            v-for="item in handlerData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('task.wcsj')" prop="completeTime">
        <el-date-picker
          v-model="form.completeTime"
          type="datetime"
          placeholder="选择完成时间"
          align="right"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="指派车辆" prop="tqImei">
        <el-select
          v-model="form.tqImei"
          style="width: 100%"
          filterable
          placeholder="指派车辆"
        >
          <el-option
            v-for="item in tqImeiData"
            :key="item.imei"
            :label="item.num"
            :value="item.imei"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="taskLevel" label="紧急程度">
        <el-select
          v-model="form.taskLevel"
          style="width: 100%"
          filterable
          placeholder="紧急程度"
        >
          <el-option
            v-for="item in levelData"
            :key="item.dataCode"
            style="width: 100%"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toTask, handlers, tqDevices, alarmLevelDict } from '@/api/alarm';
import { formatDateTime } from '@/common/times';
export default {
  data() {
    return {
      form: {
        deviceCode: '',
        alarmRecordId: '',
        taskContent: '',
        handler: '',
        completeTime: '',
        tqImei: '',
        taskLevel: '',
      },
      rules: {
        taskContent: [
          { required: true, trigger: 'blur', message: '请输入任务内容' },
        ],
        handler: [
          { required: true, trigger: 'change', message: '请选择处理人' },
        ],
        completeTime: [
          { required: true, trigger: 'change', message: '请选择完成时间' },
        ],
        tqImei: [
          { required: true, trigger: 'change', message: '请选择指派车辆' },
        ],
        taskLevel: [
          { required: true, trigger: 'change', message: '请选择紧急程度' },
        ],
      },
      projectId: '',
      title: '',
      tqImeiData: [],
      handlerData: [],
      levelData: [],
      dialogFormVisible: false,
    };
  },
  created() {},
  methods: {
    async getHandlersData() {
      const { data } = await handlers({
        deviceCode: this.form.deviceCode,
      });
      this.handlerData = data;
    },
    async getTqDevices() {
      const { data } = await tqDevices({ projectId: this.projectId });
      this.tqImeiData = data;
    },
    async getAlarmLevelDict() {
      const { data } = await alarmLevelDict();
      this.levelData = data;
    },
    dateChange() {
      var time = this.form.completeTime;
      this.form.completeTime = formatDateTime(time);
    },
    showEdit(row) {
      this.title = '转工单';
      this.form.deviceCode = row.deviceCode;
      this.form.alarmRecordId = row.id;
      this.dialogFormVisible = true;
      this.projectId = sessionStorage.getItem('projectId');
      this.getHandlersData();
      this.getTqDevices();
      this.getAlarmLevelDict();
    },
    close() {
      this.$refs['form'].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.form.name = this.form.title;
          const { msg } = await toTask(this.form);
          this.$notify({
            title: msg,
            type: 'success',
          });
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false;
          this.$parent.fetchData();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.select {
  width: 100%;
}
</style>
