<template>
  <a-tabs>
    <a-tab-pane :key="item.key" :tab="item.title" v-for="item in props.apiParams">
      <a-table
        :dataSource="item.tableInfo"
        :columns="apiConfigColumns"
        :pagination="false"
        :scroll="{ y: '400px' }"
      >
        <template #emptyText>
          <div class="table-empty">
            <img :src="emptyPng" />
            <div>暂无数据</div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'bindType'">
            <a-select
              v-model:value="record.bindType"
              style="width: 100%"
              :placeholder="t('请选择赋值类型')"
              :options="bindType"
              allowClear
              @change="record.value = null"
            />
          </template>
          <template v-else-if="column.key === 'value'">
            <a-tree-select
              v-if="record.bindType == dataFromType.table"
              v-model:value="record.value"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              allow-clear
              tree-default-expand-all
              :tree-data="tableComp"
            />
            <a-tree-select
              v-else-if="record.bindType == dataFromType.search"
              v-model:value="record.value"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              allow-clear
              tree-default-expand-all
              :tree-data="searchComp"
            />
            <a-tree-select
              v-else-if="record.bindType == dataFromType.tree"
              v-model:value="record.value"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              allow-clear
              tree-default-expand-all
              :tree-data="treeComp"
            />
            <a-tree-select
              v-else-if="record.bindType == dataFromType.form"
              v-model:value="record.value"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              allow-clear
              tree-default-expand-all
              :tree-data="formsComp"
            />
            <a-tree-select
              v-else-if="record.bindType == dataFromType.info"
              v-model:value="record.value"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              allow-clear
              tree-default-expand-all
              :tree-data="options1"
            />
            <a-input
              v-model:value="record.value"
              :placeholder="record.bindType ? t('请填写值') : t('请先选择赋值类型后再配置值')"
              v-else
            />
          </template>
        </template>
      </a-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
  import emptyPng from '/@/assets/images/empty.png';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ApiParams } from '/@/components/ApiConfig/src/interface';

  import type { TreeSelectProps } from 'ant-design-vue';

  import { inject, onMounted, ref } from 'vue';
  import { dataFromType } from '../../types';
  import { getCurPageComponents, getTableComponents } from '../../types/tool';

  const widgetForm = inject('widgetForm') as any;
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      apiParams: Array<ApiParams>;
      filterTable?: boolean;
      refreshComponent?: Array<string>;
      needPageData: boolean;
    }>(),
    {
      apiParams: () => {
        return [];
      },
      needPageData: true,
    },
  );

  const tableComp = ref<TreeSelectProps['treeData']>([]);
  const searchComp = ref<TreeSelectProps['treeData']>([]);
  const formsComp = ref<TreeSelectProps['treeData']>([]);
  const treeComp = ref<TreeSelectProps['treeData']>([]);
  let bindType = ref([
    {
      label: t('值'),
      value: 'value',
    },
    {
      value: dataFromType.table,
      label: '表格组件',
    },
    {
      value: dataFromType.search,
      label: '查询组件',
    },
    {
      value: dataFromType.tree,
      label: '树形组件',
    },
    {
      value: dataFromType.form,
      label: '表单组件',
    },
    {
      value: dataFromType.info,
      label: '当前信息',
    },
  ]);
  let apiConfigColumns = [
    {
      title: t('API入参名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('API入参类型'),
      dataIndex: 'dataType',
      key: 'dataType',
      align: 'center',
    },
    {
      title: t('赋值类型'),
      dataIndex: 'bindType',
      key: 'bindType',
      align: 'center',
    },
    {
      title: t('赋值配置'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
  ];
  const options1 = [
    {
      title: t('当前人员名称'),
      value: 'name',
    },
    {
      title: t('当前人员ID'),
      value: 'id',
    },
    {
      title: t('当前人员编码'),
      value: 'code',
    },
    {
      title: t('当前人员手机号'),
      value: 'mobile',
    },
    {
      title: t('当前人员所属组织架构名称'),
      value: 'departmentName',
    },
    {
      title: t('当前人员所属组织架构ID'),
      value: 'departmentId',
    },
    {
      title: t('当前人员岗位ID'),
      value: 'postId',
    },
    {
      title: t('当前人员角色ID'),
      value: 'roles.id',
    },
  ];
  const formList = ref([]);
  onMounted(() => {
    if (!props.needPageData) {
      bindType.value.splice(4, 1);
      bindType.value.splice(3, 1);
      bindType.value.splice(2, 1);
      bindType.value.splice(1, 1);
    }
    if (props.filterTable) {
      bindType.value.splice(1, 1);
    }
    if (widgetForm?.value?.length) {
      formList.value = [];
      tableComp.value = [];
      searchComp.value = [];
      formsComp.value = [];
      treeComp.value = [];
      getTableComponents(widgetForm.value, formList.value);
      getCurPageComponents(
        formList.value,
        tableComp.value,
        searchComp.value,
        formsComp.value,
        treeComp.value,
        props.refreshComponent,
      );
      props.apiParams.forEach((params) => {
        params.tableInfo.forEach((o: any) => {
          if (o.bindType == dataFromType.search) {
            let value = JSON.parse(o.value);
            let isHas = false;
            if (searchComp.value?.length) {
              for (let i = 0; i < searchComp.value.length; i++) {
                let j = searchComp.value[i];
                let obj = j.children?.find((k) => {
                  let field = JSON.parse(k.value).bindField;
                  return field == value?.bindField;
                });
                if (obj) {
                  isHas = true;
                  break;
                }
              }
            }
            if (!isHas) {
              o.value = null;
            }
          }
        });
      });
    }
  });
</script>

<style scoped></style>
