<template>
  <view class="container">
    <view class="tips_text">
      严禁在本互联网非涉密平台处理、传输国家秘密和工作秘密，请确认扫描、传输的文件资料不涉及国家秘密和工作秘密
    </view>
    <u--form
      ref="formRef"
      label-position="left"
      :model="form"
      :rules="rules"
      label-width="auto"
    >
      <u-divider
        text="内容上报"
        text-position="left"
        text-color="rgb(42, 86, 247)"
        line-color="rgb(42, 86, 247)"
        dashed
      />

      <u-form-item
        label="上报时间"
        prop="INSPECTTIME"
        border-bottom
        required
        @click="fnInspectTimeShowChange"
      >
        <u--input
          :value="form.INSPECTTIME || '请选择'"
          readonly
          border="none"
          input-align="right"
        />
        <u-icon name="arrow-right" color="#999999"></u-icon>
      </u-form-item>

      <u-form-item
        label="上报照片"
        prop="onSiteInspectionPhotos"
        border-bottom
        label-position="top"
      >
        <u-upload
          class="mt-10"
          :file-list="form.onSiteInspectionPhotos"
          multiple
          :max-count="10"
          @afterRead="fnOnSiteInspectionPhotosAfterRead"
          @delete="fnOnSiteInspectionPhotosDelete"
        />
      </u-form-item>
      <u-form-item
        label="上报内容"
        prop="INSPECT_CONTENT"
        border-bottom
        required
        label-position="top"
      >
        <u--input v-model="form.INSPECT_CONTENT" border="none" />
      </u-form-item>
      <div style="display: flex; gap: 20rpx">
        <u-button type="primary" text="保存" @click="fnSubmit" />
      </div>
    </u--form>
    <u-datetime-picker
      v-model="inspectTimeCurrent"
      :show="inspectTimeShow"
      mode="datetime"
      @cancel="fnInspectTimeShowChange"
      @confirm="fnInspectTimeConfirm"
    />
  </view>
</template>

<script>
import {
  getRegDepartment,
  getInspectType,
  getUser,
  setDisasterPreventionInspectionAdd,
  setDisasterPreventionInspectionImgAdd,
} from "@/api";
import TkiTree from "@/components/tki-tree/tki-tree.vue";

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    TkiTree,
  },
  data() {
    return {
      form: {
        DISASTER_PREVENTION_INSPECT_ID: "",
        // 专项整治活动id
        DISASTER_PREVENTION_ACTIVITY_ID: "",
        // 专项整治活动任务id
        DISASTER_PREVENTION_ACTIVITY_TASK_ID: "",
        CORP_NAME: "",
        CORP_ADDRESS: "",
        LR_NAME: "",
        LR_PHONE: "",
        INSPECTNO: "",
        INSPECT_PLACE: "",
        CORPINFO_ID: "",
        INSPECTTYPE: "checkType0002",
        INSPECTTIME: "",
        HASEXPERTS: "",
        // 现场检查照片
        onSiteInspectionPhotos: [],
      },
      rules: {
        INSPECTTIME: {
          type: "string",
          required: true,
          message: "请选择检查时间",
          trigger: ["change"],
        },
        INSPECT_CONTENT: {
          type: "string",
          required: true,
          message: "请输入检查内容",
          trigger: ["blur", "change"],
        },
      },
      inspectionContent: {
        show: false,
        type: "",
        index: "",
        form: {
          CONTENT_ID: "",
          INSPECT_CONTENT: "",
        },
      },
      inspectTypeList: [],
      inspectTimeShow: false,
      inspectTimeCurrent: Number(new Date()),
      inspectionDepartment: [],
      inspectionUser: [],
      inspectUserList: [],
    };
  },
  onLoad(query) {
    this.form.DISASTER_PREVENTION_ACTIVITY_TASK_ID =
      query.DISASTER_PREVENTION_ACTIVITY_TASK_ID;
    this.form.CORPINFO_ID = query.CORPINFO_ID;
    this.form.CORP_NAME = query.CORP_NAME;
    this.form.CORP_ADDRESS = query.ADDRESS_BUSINESS || "";
    this.form.LR_NAME = query.LR_NAME || "";
    this.form.LR_PHONE = query.LR_PHONE || "";
    this.fnGetInspectType();
    this.fnAddInspectUserList();
    this.fnGetDepartment(query.DISASTER_PREVENTION_ACTIVITY_TASK_ID);
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
  },

  methods: {
    // getInspectionStandards,
    async fnGetDepartment(DISASTER_PREVENTION_ACTIVITY_TASK_ID) {
      const resData = await getRegDepartment(
        DISASTER_PREVENTION_ACTIVITY_TASK_ID,
      );
      this.inspectionDepartment = JSON.parse(resData.zTreeNodes);
    },
    async fnGetInspectType() {
      const resData = await getInspectType();
      this.inspectTypeList = resData.list;
    },
    fnInspectTimeShowChange() {
      this.inspectTimeShow = !this.inspectTimeShow;
    },
    fnInspectTimeConfirm(event) {
      this.form.INSPECTTIME = uni.$u.timeFormat(
        event.value,
        "yyyy-mm-dd hh:MM",
      );
      this.fnInspectTimeShowChange();
    },
    fnOnSiteInspectionPhotosAfterRead(event) {
      this.form.onSiteInspectionPhotos.push(...event.file);
    },
    fnOnSiteInspectionPhotosDelete(event) {
      this.form.onSiteInspectionPhotos.splice(event.index, 1);
    },
    async fnInspectionContentAdd() {
      this.inspectionContent.show = true;
      await this.$nextTick();
      this.inspectionContent.type = "add";
    },
    fnInspectionContentClose() {
      this.inspectionContent.show = false;
      this.$refs.inspectionContentFormRef.resetFields();
    },

    fnAddInspectUserList() {
      this.inspectUserList.push({
        id: uni.$u.guid(),
        DEPARTMENT_NAME: "",
        DEPARTMENT_ID: "",
        USER_NAME: "",
        USER_ID: "",
        userList: [],
        userPickerShow: false,
      });
    },
    fnDeleteInspectUserList(index) {
      uni.showModal({
        title: "提示",
        content: "确认删除吗？",
        success: (res) => {
          if (res.confirm) {
            this.inspectUserList.splice(index, 1);
          }
        },
      });
    },
    fnInspectionDepartmentTreeShow(index) {
      this.$refs.inspectionDepartmentTreeRef[index]._show();
    },
    fnInspectionDepartmentTreeConfirm(event, index) {
      this.inspectUserList[index].DEPARTMENT_NAME = event[0].name;
      this.inspectUserList[index].DEPARTMENT_ID = event[0].id;
      this.inspectUserList[index].USER_NAME = "";
      this.inspectUserList[index].USER_ID = "";
      this.fnGetUser(event[0].id, index);
    },
    async fnGetUser(DEPARTMENT_ID, index) {
      this.inspectUserList[index].userList = [];
      const resData = await getUser({ DEPARTMENT_ID });
      this.inspectUserList[index].userList.push(resData.userList);
    },
    fnInspectionUserPickerShow(index) {
      if (this.inspectUserList[index].userList.length === 0) {
        uni.$u.toast("请选择部门");
        return;
      }
      if (this.inspectUserList[index].userList[0].length === 0) {
        uni.$u.toast("当前部门下没有人员");
        return;
      }
      this.inspectUserList[index].userPickerShow =
        !this.inspectUserList[index].userPickerShow;
    },
    fnInspectionUserPickerConfirm(event, index) {
      this.inspectUserList[index].USER_NAME = event.value[0].NAME;
      this.inspectUserList[index].USER_ID = event.value[0].USER_ID;
      this.fnInspectionUserPickerShow(index);
    },

    async fnSubmit() {
      this.$refs.formRef
        .validate()
        .then(async () => {
          uni.showLoading({
            title: "数据提交中",
          });
          const DISASTER_PREVENTION_INSPECT_ID = await this.fnSubmitForm();
          await this.fnUploadOnSiteInspectionPhotos(
            DISASTER_PREVENTION_INSPECT_ID,
          );
          uni.hideLoading();
          uni.$u.toast("保存成功");
          uni.navigateBack();
        })
        .catch((e) => {
          uni.$u.toast("请填写完整信息");
        });
    },

    async fnSubmitForm() {
      const {
        pd: { DISASTER_PREVENTION_INSPECT_ID },
      } = await setDisasterPreventionInspectionAdd({
        loading: false,
        USER_NAME: this.userInfo.NAME,
        DEPARTMENT_ID: this.userInfo.DEPARTMENT_ID,
        USER_ID: this.userInfo.USER_ID,
        ...this.form,
      });
      return DISASTER_PREVENTION_INSPECT_ID;
    },
    async fnUploadOnSiteInspectionPhotos(DISASTER_PREVENTION_INSPECT_ID) {
      for (let i = 0; i < this.form.onSiteInspectionPhotos.length; i++) {
        const files = [];
        files.push({
          uri: this.form.onSiteInspectionPhotos[i].url,
          name: "imgsList",
        });
        await setDisasterPreventionInspectionImgAdd({
          loading: false,
          files,
          formData: {
            DISASTER_PREVENTION_INSPECT_ID,
            USER_NAME: this.userInfo.USERNAME,
            CORPINFO_ID: this.form.CORPINFO_ID,
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20upx;

  .user_item {
    border: 1px dashed #ccc;
    margin: 30upx 0;
    padding: 0 30upx 30upx 30upx;
    position: relative;

    .delete {
      position: absolute;
      right: -20upx;
      top: -20upx;
    }
  }
}

.u-icon {
  justify-content: center;
}
// 隐藏
.hide {
  display: none;
}
</style>
