<template>
  <div class="content">
    <div class="left">
      <NodeHead :nodeName="t('模板类型')" class="margin-bottom" />
      <BasicTree
        title=""
        :clickRowToExpand="true"
        :treeData="data.treeData"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
      />
    </div>
    <div class="right">
      <div class="title-box-box margin-bottom">
        <NodeHead :nodeName="t('模板列表')" />
        <div class="search-box">
          <a-input v-model:value="data.searchText" :placeholder="t('输入关键字')" allowClear />
          <div class="btn-box">
            <a-button @click="handleReset" class="ml-2"> {{ t('重置') }} </a-button>
            <a-button type="primary" @click="handleSearch" class="ml-2">
              {{ t('搜索') }}
            </a-button>
          </div>
        </div>
      </div>
      <div
        :class="[prefixCls, prefixCls + '-form-has-pagenation']"
        style="height: calc(100% - 60px)"
      >
        <a-table
          size="middle"
          :dataSource="data.dataSource"
          :columns="data.configColumns"
          rowKey="id"
          :pagination="data.paginationProps"
          :row-selection="rowSelection"
          :customRow="customRow"
          :scroll="{ y: '455px !important' }"
          ><template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template></a-table
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, reactive } from 'vue';
  import { ColumnProps } from 'ant-design-vue/lib/table/Column';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { getDicDetailList } from '/@/api/system/dic';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { getRuleProcessPage } from '/@/api/ruleProcess';
  import { RuleProcessCategory } from '/@/views/ruleProcess/components/design/config';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const emit = defineEmits(['update:id']);
  const props = defineProps(['id']);
  const data = reactive({
    dataSource: [] as any[],
    treeData: [] as unknown as TreeItem[],
    selectedRowKeys: [] as string[],
    templateType: '',
    searchText: '' as string,
    configColumns: [
      {
        key: 'name',
        title: t('流程名称'),
        dataIndex: 'name',
        width: 300,
      },
      {
        key: 'itemName',
        title: t('流程分类'),
        dataIndex: 'itemName',
      },
    ] as ColumnProps[],
    paginationProps: {
      current: 1,
      total: 0,
      pageSize: 10,
      size: 'none',
      showQuickJumper: true,
      showSizeChanger: true,
      showLessItems: true,
      showTotal: (total) => t(`共 ${total} 条数据`),
      onChange: (page: number) => getInterfacePage(page),
      onShowSizeChange: (current: number, pageSize: number) => {
        data.paginationProps.pageSize = pageSize;
        getInterfacePage(current);
      },
    },
  });
  onMounted(() => {
    data.selectedRowKeys = [props.id];
    getTreeData();
    getInterfacePage(1);
  });
  const rowSelection = computed(() => {
    return {
      checkStrictly: true,
      type: 'radio',
      selectedRowKeys: data.selectedRowKeys,
      onChange: (selectedRowKeys: string[]) => {
        data.selectedRowKeys = selectedRowKeys;
        emit('update:id', selectedRowKeys[0]);
      },
    };
  });
  const customRow = (record) => {
    return {
      onClick: () => {
        let selectedRowKeys = [...data.selectedRowKeys];
        if (selectedRowKeys.indexOf(record.id) >= 0) {
          let index = selectedRowKeys.indexOf(record.id);
          selectedRowKeys.splice(index, 1);
        } else {
          selectedRowKeys = [record.id];
        }
        emit('update:id', selectedRowKeys[0]);
        data.selectedRowKeys = selectedRowKeys;
      },
    };
  };
  const getInterfacePage = async (page) => {
    data.paginationProps.current = page;
    const res = await getRuleProcessPage({
      keyword: data.searchText,
      size: data.paginationProps.pageSize,
      limit: data.paginationProps.current,
      itemId: data.templateType,
      enabledMark: 1,
    });
    data.paginationProps.total = res.total;
    data.dataSource = res.list;
  };
  const handleSearch = () => {
    getInterfacePage(1);
  };
  const handleReset = () => {
    data.searchText = '';
    getInterfacePage(1);
  };
  //获取左边树结构
  const getTreeData = async () => {
    let res = (await getDicDetailList({
      itemId: RuleProcessCategory.ID,
    })) as unknown as TreeItem[];
    data.treeData = res.map((ele) => {
      ele.icon = 'ant-design:tags-outlined';
      return ele;
    });
  };
  function handleSelect(selectIds: Array<string>) {
    data.templateType = selectIds[0];
    getInterfacePage(1);
  }
</script>

<style lang="less" scoped>
  .content {
    display: flex;
    height: 616px;

    .left {
      width: 400px;
      flex-basis: 400px;
      border-right: 1px solid #ddd;
      height: 100%;
    }

    .right {
      flex: 1;
      width: calc(100% - 400px);
      height: 100%;
    }
  }

  .margin-bottom {
    height: 52px;
    padding: 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
  }

  .title-box-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-box {
    display: flex;
  }

  .btn-box {
    display: flex;
  }
</style>
