<template>
  <div class="add-btn" @click="open">预览</div>
  <!-- 预览弹窗 -->
  <a-modal
    :visible="previewData.visible"
    :title="t('预览')"
    :width="800"
    :maskClosable="false"
    :okText="t('确定')"
    :cancelText="t('取消')"
    @ok="previewData.visible = false"
    @cancel="previewData.visible = false"
  >
    <div class="model-box" v-if="previewData.visible">
      <a-table
        v-if="previewData.visible"
        :columns="previewData.columns"
        :data-source="previewData.data"
        :row-selection="rowSelection"
        defaultExpandAllRows
        :pagination="false"
        :rowKey="previewData.rowKey"
        :scroll="{ x: 700, y: 700 }"
      />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { TreeStructureType } from '/@/enums/treeStructure';
  import { apiConfigFunc } from '/@/utils/event/design';
  import type { TreeProps } from 'ant-design-vue';
  import { StaticColumnItem, TreeStructureFormState } from '/@/model/generator/treeStructure';
  const { t } = useI18n();

  const props = defineProps({
    formState: Object as () => TreeStructureFormState,
  });
  const previewData = reactive({
    visible: false,
    type: TreeStructureType.STATIC as TreeStructureType,
    columns: [] as Array<StaticColumnItem>,
    data: [] as TreeProps['treeData'],
    rowKey: 'value',
  });
  async function open() {
    previewData.type = props?.formState?.type ? props.formState.type : TreeStructureType.STATIC;
    if (previewData.type == TreeStructureType.STATIC) {
      changeColumn(props?.formState?.columns);
      previewData.data = props.formState?.config?.staticData;
    } else {
      changeColumn(props.formState?.config.apiData.apiColumns);
      if (
        props.formState?.config.apiData.apiColumns &&
        Array.isArray(props.formState.config.apiData.apiColumns) &&
        props.formState.config.apiData.apiColumns.length > 1 &&
        props.formState.config.apiData.apiColumns[1].dataIndex
      ) {
        previewData.rowKey = props.formState.config.apiData.apiColumns[1].dataIndex;
      }
      let res = await apiConfigFunc(props.formState?.config.apiData.apiConfig, false, {});
      if (res.data) {
        previewData.data = res.data;
      }
    }
    previewData.visible = true;
  }

  function changeColumn(columns) {
    previewData.columns = [];
    for (let index = 1; index < columns.length; index++) {
      if (index % 2) {
        let labelIndex = index - 1;
        previewData.columns.push({
          dataIndex: columns[labelIndex].dataIndex,
          key: columns[labelIndex].dataIndex,
          title:
            previewData.type == TreeStructureType.STATIC
              ? getTitle(columns[labelIndex].title)
              : columns[labelIndex].title,
          width: columns[labelIndex].width,
          value: columns[index].dataIndex,
        });
      }
    }
  }
  function getTitle(title) {
    if (title.includes('(')) {
      let arr = title.split('(');
      if (arr.length > 0 && arr[1].includes(')')) {
        let arr2 = arr[1].split(')');
        return arr2[0];
      }
    }
    return '';
  }
  const rowSelection = ref({
    checkStrictly: true,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
      console.log(selected, selectedRows, changeRows);
    },
  });
</script>

<style lang="less" scoped>
  .button-item {
    display: inline-flex;
  }

  .model-box {
    min-height: 400px;
  }

  :deep(.ant-table-container table) {
    font-size: 14px;
  }

  :deep(.ant-table-container table > thead > tr:first-child th) {
    height: 50px;
    font-weight: bold;
    background: #f7fbff;
  }

  .add-btn {
    width: 82px;
    height: 32px;
    background: #1c8dff;
    border-radius: 4px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16px;
  }
</style>
