<template>
  <div>
    <h-tree-table-transfer
      ref="transferRef"
      v-model:target-keys="targetKeys"
      v-model:selected-keys="selectedKeys"
      v-bind="transferOptions"
      :isLoading="isLoading"
      @selectChange="onSelectChange"
    ></h-tree-table-transfer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue';
import type { ITreeTableTransferProps } from '@crami/ui-types';
// import request from '@/utils/request';
import { useHttp } from '@crami/http';
import { useMethods } from './useMethods';
import { useI18n } from '@crami/locale';
export default defineComponent({
  name: 'MemberTransfer',
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  setup: props => {
    const { t } = useI18n();
    const transferRef = ref();
    const targetKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>([]);
    const treeData: any[] = [];
    const defaultColumns: ITreeTableTransferProps[] = [
      {
        title: '用户姓名',
        dataIndex: 'USER_ALL_NAME',
        // width: 100,
        ellipsis: true,
        resizable: true,
        //sorter: true,
        sorter: (a, b) => a.USER_ALL_NAME.localeCompare(b.USER_ALL_NAME),
      },
      {
        title: '登录账号',
        dataIndex: 'USER_NAME',
        // width: 100,
        ellipsis: true,
        resizable: true,
        sorter: (a, b) => a.USER_NAME.localeCompare(b.USER_NAME),
      },
      {
        title: '所属组织',
        dataIndex: 'ORG_IDS',
        //width: 100,
        ellipsis: true,
        resizable: true,
        sorter: (a, b) => a.ORG_IDS.localeCompare(b.ORG_IDS),
      },
      {
        title: '所属行政组',
        dataIndex: 'DEPT_IDS',
        // width: 100,
        ellipsis: true,
        resizable: true,
        sorter: (a, b) => (a.DEPT_IDS || '').localeCompare(b.DEPT_IDS || ''),
      },
      // {
      //   title: '标识符',
      //   dataIndex: 'EID',
      //   width: 100,
      //   ellipsis: true,
      //   resizable: true,
      // },
    ];

    const transferOptions = reactive<ITreeTableTransferProps>({
      locale: {
        itemUnit: t('transfer.unit'),
        itemsUnit: t('transfer.unit'),
        notFoundContent: t('transfer.notFoundContent'),
        searchPlaceholder: t('transfer.searchPlaceholder'),
      } as any,
      titles: [t('transfer.noUserSelectedTitle'), t('transfer.userSelectedTitle')],
      operations: [t('transfer.addOperations'), t('transfer.removeOperations')],
      showSelectAll: false,
      showSearch: true,
      //type: 'treeTable',
      listStyle: {
        width: '300px',
        height: '400px',
      },
      isLeafNode(node) {
        return node.value3 === 'P_SYS_USER';
      },
      searchKey: 'USER_ALL_NAME',
      render: item => item.key,
      tableOptions: {
        rowKey: 'EID',
        pagination: false,
        height: '360px',
      },
      treeData: treeData.concat([]),
      tableColumns: defaultColumns,
      //props.options.queryParam.columns ||
      tableData: [],
      treeOptions: {
        height: '360px',
      },
    });

    const data = reactive<ITreeTableTransferProps>({
      treeData: treeData.concat([]),
      tableColumns: props.options.queryParam.columns || defaultColumns,
      tableData: [],
    });

    // 加载右侧列表
    async function getDeptUserList() {
      const result = await useHttp<any, any>({
        url: props.options.queryParam.api || '/system/dept/getUserList',
        data: {
          ...props.options.queryParam.params,
        },
        method: 'post',
      });
      if (result.code == '200') {
        const list = result.data.data;
        targetKeys.value = list.map(item => item.EID);
        // 等待组件渲染完（不知道为啥组件会把tasbleList覆盖）
        setTimeout(() => {
          transferOptions!.tableData = list;
        }, 200);
      }
    }

    function refreshData() {
      // 加载右侧列表数据
      getDeptUserList();
    }

    const { getTreeData } = useMethods(transferOptions as any);
    getTreeData(props.options.queryParam.listView || 'P_PUBLIC_USER_TREEVIEW');

    const onSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
      console.log(sourceSelectedKeys);
      console.log(targetSelectedKeys);
    };
    // 初始化基本数据
    refreshData();

    const getTableKeys = () => {
      return transferRef.value?.getTableKeys();
    };

    const isLoading = ref(true);
    watch(
      () => transferOptions.treeData,
      () => {
        isLoading.value = false;
      },
    );

    return {
      t,
      transferRef,
      targetKeys,
      selectedKeys,
      //treeData,
      transferOptions,
      onSelectChange,
      data,
      getTableKeys,
      isLoading,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.h-transfer .ant-btn .anticon) {
  display: inline-block;
}

:deep(.ant-transfer-customize-list .ant-transfer-list:first-child) {
  flex: none !important;
  width: 300px !important;
}
:deep(.h-tree-table-transfer-title-container) {
  display: none !important;
}
</style>
