<template>
  <el-dialog v-model="visible" title="导出" :on-close="fnClose">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="fnCheckAllChange"
    >
      全选
    </el-checkbox>
    <el-checkbox v-model="havePicture">
      导出带图片的excel(最多10条)
    </el-checkbox>
    <el-divider />
    <el-checkbox-group v-model="checkOptions" @change="fnCheckedChange">
      <el-row>
        <el-col v-for="(item, index) in options" :span="4" :key="index">
          <el-checkbox :label="item" :value="item" />
        </el-col>
      </el-row>
    </el-checkbox-group>
    <template #footer>
      <el-button @click="fnClose">取 消</el-button>
      <el-button type="primary" @click="fnSubmit">导 出</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { ref } from "vue";
import { debounce } from "throttle-debounce";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import useDownloadBlob from "@/assets/js/useDownloadBlob.js";
import QS from "qs";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  searchForm: {
    type: Object,
    required: true,
    default: () => {},
  },
  ids: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const options = [
  "隐患来源",
  "风险点（单元）",
  "辨识部位",
  "存在风险",
  "风险分级",
  "检查内容",
  "隐患级别",
  "隐患状态",
  "隐患描述",
  "隐患部位",
  "隐患发现部门",
  "发现人",
  "发现时间",
  "整改类型",
  "整改期限",
  "隐患图片",
  "整改描述",
  "整改部门",
  "整改人",
  "整改时间",
  "整改后图片",
  "整改方案",
  "排查日期",
  "隐患清单",
  "治理标准要求",
  "治理方法",
  "经费和物资的落实",
  "负责治理人员",
  "工时安排",
  "时限要求",
  "工作要求",
  "其他事项",
  "方案图片",
  "验收描述",
  "是否合格",
  "验收部门",
  "验收人",
  "验收时间",
  "验收图片",
];
const checkAll = ref(true);
const isIndeterminate = ref(false);
const checkOptions = ref(options);
const havePicture = ref(false);
const fnCheckAllChange = (val) => {
  checkOptions.value = val ? options : [];
  isIndeterminate.value = false;
};
const fnCheckedChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === options.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;
};
const fnClose = () => {
  visible.value = false;
  checkOptions.value = options;
  isIndeterminate.value = false;
  checkAll.value = true;
  havePicture.value = false;
};
const fnSubmit = debounce(
  1000,
  () => {
    let data = {
      havePicture: havePicture.value ? "1" : "0",
      options: JSON.stringify(checkOptions.value),
    };
    if (havePicture.value) {
      const ids = props.ids;
      if (ids.length === 0) {
        ElMessage.warning("请选择要导出的数据");
        return;
      }
      if (ids.length > 10) {
        ElMessage.warning("选择的数据超过10条");
        return;
      }
      data = {
        ...data,
        hiddenIds: ids.join(","),
      };
    } else {
      const searchForm = props.searchForm;
      if (!searchForm.dates || searchForm.dates.length < 2) {
        ElMessage.warning("请选择发现日期");
        return;
      }
      if (
        dayjs(searchForm.dates[1]).diff(dayjs(searchForm.dates[0]), "days") > 30
      ) {
        ElMessage.warning("开始日期与结束日期间最多间隔30天");
        return;
      }
      data = {
        ...data,
        KEYWORDS: searchForm.KEYWORDS,
        DISPOSESTATE: "-1",
        STATE: searchForm.STATE,
        STARTTIME: searchForm.dates[0],
        ENDTIME: searchForm.dates[1],
        DEPTIDS: searchForm.DEPTIDS,
        ISQUALIFIED: searchForm.ISQUALIFIED,
        HIDDENLEVEL: "hiddenLevel0001",
        IS_SELF: "0",
      };
    }
    useDownloadBlob("/hidden/excel" + "?" + QS.stringify(data));
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>
