<template>
  <el-dialog :before-close="onBeforeClose"
             :visible.sync="dialogVisible"
             append-to-body
             center
             class="dialog"
             title="添加"
             width="600px"
             @close="onClose">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRules" label-width="120px">
      <el-form-item label="任务名称" placeholder="请输入任务名称" prop="title">
        <el-input v-model="dataForm.title" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="任务分类" prop="type">
        <el-select v-model="dataForm.type" class="input-width" placeholder="请选择任务分类">
          <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间" prop="roomId">
        <el-cascader
            ref="roomId"
            :props="props"
            v-model="dataForm.roomId"
            class="input-width"
            clearable
            :options="buildingTree"
            filterable
            placeholder="请选择房间">
        </el-cascader>
      </el-form-item>
      <el-form-item label="所属系统" prop="belongSystem">
        <el-select v-model="dataForm.belongSystem" class="input-width" placeholder="请选择所属系统">
          <el-option v-for="item in belongSystemList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务内容" prop="content">
        <el-input v-model="dataForm.content"
                  :autosize="{ minRows: 4}"
                  class="input-width"
                  maxlength="200"
                  show-word-limit
                  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="执行人" prop="executors">
        <el-select
            v-model="dataForm.executors"
            class="input-width"
            filterable
            multiple
            placeholder="请选择执行人"
            remote>
          <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="完成时间" prop="finishTime">
        <el-date-picker v-model="dataForm.finishTime" class="input-width" placeholder="请选择完成时间" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="onConfirm">确 认</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";


export default {
  name: "dialogEdit",
  components: {},
  props: {
    visible: {
      type: Boolean
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      username: undefined, // 用户名

      dataForm: {
        title: undefined, // 任务名称
        type: undefined, // 任务类型 1:一般任务 2:较急任务 3:紧急任务
        roomId: undefined, // 房间id
        belongSystem: undefined, // 所属系统
        content: undefined, // 任务内容
        executors: [], // 执行人
        finishTime: undefined, // 完成时间
      },
      buildingTree: undefined, // 楼栋列表
      props: {
        label: 'name',
        value: 'id',
        emitPath: false,
        lazy: true,
        lazyLoad: (node, resolve) => {
          if (node.level === 1) {
            if (node.children.length) {
              resolve(undefined);
            } else {
              // 加载楼层
              this.$axios.get(`/v1/device/floor/list/option/${node.data.id.replace('building', '')}`).then((data) => {
                resolve(data.map(item => {
                  item.id = 'floor' + item.id;
                  item.leaf = false;
                  return item;
                }));
              });
            }
          } else if (node.level === 2) {
            if (node.children.length) {
              resolve(undefined);
            } else {
              // 加载房间
              this.$axios.get(`/v1/device/room/list/option/${node.data.id.replace('floor', '')}`).then((data) => {
                resolve(data.map(item => {
                  item.leaf = true;
                  return item;
                }));
              });
            }
          }
        }
      },
      dataRules: {
        title: [{validator: validateNotEmpty, errorMessage: "任务名称不能为空", required: true, trigger: 'blur'}],
        type: [{validator: validateNotEmpty, errorMessage: "任务类型不能为空", required: true, trigger: 'blur'}],
        roomId: [{validator: validateNotEmpty, errorMessage: "房间不能为空", required: true, trigger: 'blur'}],
        belongSystem: [{validator: validateNotEmpty, errorMessage: "所属系统不能为空", required: true, trigger: 'blur'}],
        content: [{validator: validateNotEmpty, errorMessage: "任务内容不能为空", required: true, trigger: 'blur'}],
        executors: [{validator: validateNotEmpty, errorMessage: "执行人不能为空", required: true, trigger: 'blur'}],
        finishTime: [{validator: validateNotEmpty, errorMessage: "完成时间不能为空", required: true, trigger: 'blur'}],
      },

      typeList: [{id: 1, label: "一般任务"}, {id: 2, label: "较急任务"}, {id: 3, label: "紧急任务"}], // 任务分类列表
      belongSystemList: ['配电','照明','监控','电梯','BA','门禁','给排水','消防','空调','综合土建','动环','工器具','机柜'], // 所属系统
      userList: [] // 用户列表
    }
  },

  watch: {},
  mounted() {
    this.initData();
  },

  methods: {
    validateNotEmpty,

    // 初始化数据
    initData() {
      this.$axios.get('/v1/device/building/list/option').then(data => {
        this.buildingTree = data.map(item => {
          item.id = 'building' + item.id;
          item.leaf = false;
          return item;
        });
      });
      this.initUser();
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$axios.post("/v1/temporary/task/add", this.dataForm).then(() => {
            this.$message.success("保存成功！");
            this.$emit("add");
            this.onCancel();
          });
        }
      });
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },

    // 关闭
    onClose() {
      this.$emit("close");
    },

    // 初始化用户
    initUser() {
        this.$axios.get("/v1/system/user/list/option", {params: {keyword: ''}}).then((data) => {
          this.userList = data;
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.input-width {
  width: 400px;
}

.image {
  height: 80px;
  margin-right: 14px;

  ::v-deep.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 40px;
  }
}
</style>
