<template>
  <a-modal
    v-model:visible="visible"
    title="导出"
    width="400px"
    @ok="handleSubmit"
    @cancel="close"
    :maskClosable="false"
    :okText="t('确认')"
    :cancelText="t('取消')"
    :bodyStyle="{ padding: '20px', height: '400px', overflow: 'auto' }"
  >
    <div>字段列表</div>
    <a-divider />
    <a-checkbox-group v-model:value="exportCols">
      <a-checkbox
        :style="radioStyle"
        v-for="item in columns"
        :key="item.dataIndex"
        :value="item.dataIndex"
      >
        {{ item.title }}
      </a-checkbox>
    </a-checkbox-group>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { BasicColumn } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = defineProps({
    columns: {
      type: Array<BasicColumn>,
      default: () => [],
    },
  });
  const { t } = useI18n();
  const emits = defineEmits(['close', 'success']);
  const visible = ref(true);
  const exportCols = ref<any[]>([]);
  const radioStyle = reactive({
    display: 'flex',
    height: '40px',
  });

  onMounted(() => {
    exportCols.value = props.columns.map((x) => x.dataIndex!);
  });

  const handleSubmit = async () => {
    emits('success', exportCols.value);
  };
  const close = () => {
    emits('close');
  };
</script>
<style lang="less" scoped>
  :deep(.ant-checkbox-wrapper):first-child {
    margin-left: 8px;
  }
</style>
