<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 { 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, FREIGHTTRAILER_IDs: ids.join(","),
      };
    } else {
      const searchForm = props.searchForm;
      data = {
        ...data,
        PLATE_NUMBER: searchForm.PLATE_NUMBER,
        VIN: searchForm.VIN,
      };
    }
    useDownloadBlob("/freightTrailer/excel" + "?" + QS.stringify(data));
  },
  { atBegin: true }
);
</script>

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