<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
      <el-form-item width="100" prop="shelfLife" :label="$t('defalult.sj')">
        <el-date-picker
          v-model="form.completeTime"
          type="datetime"
          :placeholder="$t('defalult.xzrq')"
          @change="standardToTime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('task.rwnr')" prop="taskContent">
        <el-input
          v-model.trim="form.taskContent"
          type="textarea"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="handler" :label="$t('task.clr')">
        <el-select
          v-model="form.handler"
          style="width: 100%"
          filterable
          placeholder="处理人"
        >
          <el-option
            v-for="item in handlerData"
            :key="item.id"
            style="width: 100%"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="handler" 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-item prop="handler" label="指派车辆">
        <el-select
          v-model="form.tqImei"
          style="width: 100%"
          filterable
          placeholder="指派车辆"
        >
          <el-option
            v-for="item in tpData"
            :key="item.imei"
            :label="item.num"
            :value="item.imei"
          ></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 } from '@/api/repair';
import { formatDateTime } from '@/common/times';
import { getHandlers, getTaskLevel } from '@/api/task';
import { tqDevices } from '@/api/alarm';
export default {
  data() {
    return {
      form: {
        repairId: '',
        taskContent: '',
        handler: '',
        completeTime: '',
        deviceCode: '',
        tqImei: '',
        taskLevel: '',
      },
      title: '',
      handlerData: [],
      levelData: [],
      tpData: [],
      dialogFormVisible: false,
    };
  },
  created() {},
  methods: {
    //标准时间转yyyy-mm-dd
    standardToTime() {
      this.form.completeTime = formatDateTime(this.form.completeTime);
    },
    showTask(row) {
      const data = Object.assign({}, row);
      this.form.repairId = data.id;
      this.form.deviceCode = data.device.code;
      this.dialogFormVisible = true;
      this.getHandlersData();
      this.getTaskLevelData();
      this.getTqDevicesData();
    },
    close() {
      this.$refs['form'].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    //处理人
    async getHandlersData() {
      const { data } = await getHandlers({
        deviceCode: this.form.deviceCode,
      });
      this.handlerData = data;
    },
    //任务级别
    async getTaskLevelData() {
      const { data } = await getTaskLevel();
      this.levelData = data;
    },
    //指派车辆
    async getTqDevicesData() {
      const { data } = await tqDevices({
        projectId: sessionStorage.getItem('projectId'),
      });
      this.tpData = data;
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const { msg } = await toTask(this.form);
          this.$notify({
            title: msg,
            type: 'success',
          });
          this.$refs['form'].resetFields();
          this.$parent.fetchData();
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.select {
  width: 100%;
}
</style>
