<template>
  <div>
    <vxe-modal
      :z-index="zIndex"
      :value="isShow"
      show-footer
      title="特殊日期"
      show-confirm-button
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      esc-closable
      transfer
      :fullscreen="$store.getters.device === 'mobile'"
      @input="e => $emit('update:isShow',e)"
    >
      <div>
        <h4>当前导出流程： {{ config.name }}</h4>

        <h4 style="display: inline-block;">导出文件名：</h4>
        <el-input style="max-width: 220px;" size="small" v-model="fileName"></el-input>
        <el-button style="margin-left: 10px;" type="primary" size="small" icon="el-icon-download" @click="confirm">导出</el-button>
        <h4>需要导出字段：</h4>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="selectedFields" @change="handleCheckedFieldsChange">
          <el-checkbox v-for="field in mainFields" :label="field.name" :key="field.id">{{ field.label }}</el-checkbox>
        </el-checkbox-group>

        <h4>存在子表单</h4>
        <div v-for="field in relationsFields" :key="field.id" style="padding-left: 10px;">
          <h5>{{ field.label }}</h5>

        </div>
      </div>
    </vxe-modal>
  </div>
</template>

<script>
import {fieldConfig} from "@/api/flow"
import {defaultModalSize} from "@/settings";
import {PopupManager} from "element-ui/lib/utils/popup";
import {download} from "@/utils/downloadRequest"

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    },
    select: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      defaultModalSize,
      loading: false,
      config: {
        fields: []
      },
      fileName: `导出_${this.$moment().valueOf()}`,
      selectedFields: [],
      checkAll: false,
      isIndeterminate: false,
    }
  },
  computed: {
    mainFields() {
      return this.config?.fields?.filter(i => i.type !== 'relation')
    },
    relationsFields() {
      return this.config?.fields?.filter(i => i.type === 'relation')
    }
  },
  methods: {
    handleCheckedFieldsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.config?.fields?.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.config?.fields?.length;
    },
    handleCheckAllChange(val) {
      this.selectedFields = val ? this.config.fields?.map(i => i.name) : [];
      this.isIndeterminate = false;
    },
    async getFields(id) {
      try {
        const { customModel } = await fieldConfig(id)
        this.config = customModel
        this.config.fields.forEach(i => {
          i.name = 'data.' + i.name
        })
        this.fileName = `${customModel.name}_${this.$moment().valueOf()}`
      } catch (err) {
        console.error(id)
      }
    },

    async confirm() {
      // 自定义 paramsSerializer 函数
      const paramsSerializer = (params) => {
        const parts = [];

        // 递归处理嵌套对象
        const serialize = (obj, parentKey) => {
          for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
              const value = obj[key];
              const fullKey = parentKey ? `${parentKey}[${key}]` : key;

              if (value && typeof value === 'object' && !Array.isArray(value)) {
                // 如果是嵌套对象，递归处理
                serialize(value, fullKey);
              } else if (Array.isArray(value)) {
                // 如果是数组，遍历数组并处理每个元素
                value.forEach((item, index) => {
                  if (item && typeof item === 'object') {
                    // 如果数组元素是对象，递归处理
                    serialize(item, `${fullKey}[${index}]`);
                  } else {
                    // 如果数组元素是普通值，直接序列化
                    parts.push(`${encodeURIComponent(`${fullKey}[${index}]`)}=${encodeURIComponent(item)}`);
                  }
                });
              } else {
                // 如果是普通键值对，直接序列化
                parts.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`);
              }
            }
          }
        };

        // 开始序列化
        serialize(params, '');

        // 将部分拼接为查询字符串
        return parts.join('&');
      };
      try {
        let export_fields = {}
        this.selectedFields?.forEach(field => {
          let key = field
          export_fields[key] = this.config?.fields?.find(j => j.name === key)?.label
        })
        await download('/api/oa/flow/list-groups', 'get', {
          ...this.select,
          type: this.$route.params.type,
          is_export: 1,
          export_name: this.fileName,
          export_fields
        }, this.fileName+'.xlsx', paramsSerializer)
      } catch (err) {
        console.error(err)
      }
    }
  },
  watch: {
    isShow(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()
      }
    },
    "select.custom_model_id"(newVal) {
      this.getFields(newVal)
    }
  },
}
</script>

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