<template>
  <div class="edu-training-edit">
    <el-dialog :title="'培训登记'" :visible.sync="isShow" width="960px">
      <div class="page-body">
        <el-form
          :model="formData"
          :rules="formDataRules"
          size="small"
          ref="form"
          label-position="right"
          label-width="120px"
          label-prefix=":"
        >
          <el-row>
            <!-- 培训主题 -->
            <el-col :span="12">
              <el-form-item prop="title" label="演练主题">
                {{ formData.title }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="orgName" label="演练机构">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="dateTime" label="演练时间">
                <el-date-picker
                  v-model="formData.drillTime"
                  :picker-options="startDatepickerOptions"
                  type="datetime"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="content" label="演练地点">
                <el-input
                  v-model="formData.drillSite"
                  placeholder="请输入演练地点"
                  :length="2000"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="演练类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择演练类型">
                  <el-option
                    v-for="dict in dict.type.core_drill_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item prop="presetCase" label="预设案由">
                <k-textarea
                  v-model="formData.presetCase"
                  placeholder="请输入预设案由"
                  :length="2000"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item
                v-if="formData.id"
                prop="drillSituation"
                label="演练情况"
              >
                <k-textarea
                  v-model="formData.drillSituation"
                  placeholder="请输入演练情况"
                  :length="1000"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item v-if="formData.id" label="参与人员">
                <k-select
                  :multiple="true"
                  v-model="formData.taskUserList"
                  url="/user/find/all"
                  :params="{ orgId: formData.orgId }"
                  placeholder="请选择缺席人员"
                  @select="absenceUserSelectChanged"
                ></k-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="formData.id" label="缺席人员">
                <k-select
                  :multiple="true"
                  v-model="formData.taskUserList"
                  url="/user/find/all"
                  :params="{ orgId: formData.orgId }"
                  @select="absentUserSelectChanged"
                  placeholder="请选择缺席人员"
                >
                </k-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="imageList" label="上传图片">
                <imgUpload
                  type="more"
                  :value="formData.imageList"
                  @input="imageListChanged"
                ></imgUpload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <el-button type="primary" @click="onSave">暂存</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getEduTask, recordEduTask } from "@/api/core/edu/eduTask";
import dayjs from "dayjs";
import KTextarea from "@/components/common/textarea.vue";
import KSelect from "@/components/common/userselect.vue";
import imgUpload from "@/components/ImageUpload/index.vue";
import { initList } from "@/api/core/drill/drillDictionary";
import { getDrillTask } from "@/api/core/drill/drillTask";

export default {
  components: { KTextarea, KSelect, imgUpload },
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      formData: this.reset(),
      formDataRules: {
        drillTime: [{ required: true, message: "请选择演练时间" }],
        drillSite: [{ required: true, message: "请输入演练地点" }],
        type: [{ required: true, message: "请选择演练类型" }],
        presetCase: [{ required: true, message: "请输入预设案由" }],
        drillSituation: [{ required: true, message: "请输入预设案由" }],
      },
      startDatepickerOptions: {
        disabledDate(time) {
          return false;
        },
      },
      endDatepickerOptions: {
        disabledDate: this.endDisabledDate,
      },
      drillTypeOptions: [],
    };
  },
  dicts: ["core_drill_type", "edu_task_status"],
  props: {},
  watch: {},
  computed: {
    ...mapState(["loginUser", "org"]),
  },
  methods: {
    ...mapMutations([]),
    reset(other = {}) {
      return {
        drillTime: null,
        content: null,
        title: null,
        eduJobId: null,
        imageList: "",
        absenceList: [],
        absentList: [],
        orgList: [],
        fileList: [],

        ...other,
      };
    },
    async refresh(id, other) {
      if (!id) {
        this.reset(other);
        return;
      }
      getDrillTask(id).then((response) => {
        this.formData = response.data;
        this.loading = false;
        if (this.formData.imageList == null) {
          this.formData.imageList = "";
        }
        if (this.formData.fileList == null) {
          this.formData.fileList = [];
        }
        if (this.formData.taskUserList) {
          let list1 = this.formData.taskUserList.filter(
            (element) => element.type === 1
          );
          console.log("list1", list1);
          this.formData.absenceList = list1
            ? list1.map((a) => {
                return a.userId;
              })
            : [];

          let list2 = this.formData.taskUserList.filter(
            (element) => element.type === 2
          );
          console.log("list2", list2);
          this.formData.absentList = list2
            ? list2.map((a) => {
                return a.userId;
              })
            : [];
        } else {
          this.formData.absenceList = [];
          this.formData.absentList = [];
        }
      });
      console.log("getEduTask", this.formData);
    },
    async show(id, other = {}) {
      this.id = id;
      await this.refresh(id, other);
      this.isShow = true;
    },
    imageListChanged(list) {
      this.formData.imageList = list;
      console.log("imageListChanged", this.formData.imageList);
    },
    absentUserSelectChanged(list) {
      // 将类型为2的数据删除
      if (this.formData.taskUserList) {
        this.formData.taskUserList = this.formData.taskUserList.filter(
          (x) => x.type == 1
        );
      } else {
        this.formData.taskUserList = [];
      }
      let tempList = list.map((x) => {
        return {
          userId: x.id,
          userName: x.name,
          type: 2,
        };
      });
      if (!tempList) return;
      this.formData.taskUserList = this.formData.taskUserList.concat(tempList);
      console.log("absentUserSelectChanged", list, this.formData.taskUserList);
    },
    absenceUserSelectChanged(list) {
      // 将类型为1的数据删除
      if (this.formData.taskUserList) {
        this.formData.taskUserList = this.formData.taskUserList.filter(
          (x) => x.type == 2
        );
      } else {
        this.formData.taskUserList = [];
      }
      let tempList = list.map((x) => {
        return {
          userId: x.id,
          userName: x.name,
          type: 1,
        };
      });
      if (!tempList) return;
      this.formData.taskUserList = this.formData.taskUserList.concat(tempList);
      console.log("absenceUserSelectChanged", list, this.formData.taskUserList);
    },
    // 事件
    onHide() {
      this.isShow = false;
      this.formData = this.reset();
    },
    async onSave() {
      if (!this.validatePerson()) {
        this.$message.error("参与人员与缺席人员重复，请重新选择!");
        return;
      }
      let request = { submitType: 1, ...this.formData };
      if (request.trainingStartDateTime)
        request.trainingStartDateTime = dayjs(
          request.trainingStartDateTime
        ).format("YYYY-MM-DD HH:mm:ss");

      if (request.trainingEndDateTime)
        request.trainingEndDateTime = dayjs(request.trainingEndDateTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      // if(request.imageList)
      //   request.imageList=request.imageList.split(',').map(x=>{return x;});

      recordEduTask(request).then((v) => {
        this.$emit("success", this.formData);
        this.onHide();
        this.$modal.msgSuccess("培训登记暂存成功");
      });
    },
    async onSubmit() {
      await this.$refs.form.validate();
      console.log("onSubmit this.formData", this.formData);
      let due = this.formData.dueCount;
      let actual = this.formData.actualCount;
      if (actual > due) {
        this.$message.error("实到人数不能大于应到人数!");
      } else if (!this.validatePerson()) {
        this.$message.error("参与人员与缺席人员重复，请重新选择!");
      } else {
        let request = { submitType: 2, ...this.formData };
        if (request.trainingStartDateTime)
          request.trainingStartDateTime = dayjs(
            request.trainingStartDateTime
          ).format("YYYY-MM-DD HH:mm:ss");

        if (request.trainingEndDateTime)
          request.trainingEndDateTime = dayjs(
            request.trainingEndDateTime
          ).format("YYYY-MM-DD HH:mm:ss");

        recordEduTask(request).then((v) => {
          this.$emit("success", this.formData);
          this.onHide();
          this.$modal.msgSuccess("培训登记提交成功");
        });
        // this.$emit("success");
        // this.onHide();
      }
    },
    validatePerson() {
      for (let i = 0; i < this.formData.absenceList.length; i++) {
        let absence = this.formData.absenceList[i];
        if (this.formData.absentList.indexOf(absence) >= 0) {
          return false;
        }
      }
      return true;
    },
    uploadTriggerEvent(value) {},

    endDisabledDate(time) {
      //小于开始日期禁止选择
      let startDate = new Date();
      startDate.setTime(startDate.getTime() - 3600 * 1000 * 24);
      if (this.formData.trainingStartDateTime) {
        startDate = new Date(
          dayjs(this.formData.trainingStartDateTime).format("YYYY-MM-DD")
        );
        startDate.setTime(startDate.getTime() - 3600 * 1000 * 24);
      }
      return time.getTime() < new Date(startDate).getTime();
    },
    startDateChanged(time) {
      console.log(
        "startDateChanged",
        time,
        this.formData.trainingStartDateTime,
        this.formData.trainingEndDateTime
      );
      if (
        dayjs(this.formData.trainingStartDateTime).isAfter(
          dayjs(this.formData.trainingEndDateTime)
        )
      ) {
        this.formData.trainingEndDateTime = this.formData.trainingStartDateTime;
        console.log("trainingEndDateTime", this.formData.trainingEndDateTime);
      }
    },
  },
  mounted() {},
};
</script>

<!-- <style lang="less">
.edu-training-edit {
}
</style> -->
