<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="m-2 mr-0 w-1/4 xl:w-1/5 overflow-hidden bg-white">
      <BasicTree
        ref="btnsTreeRef"
        title="常用按钮"
        checkable
        :treeData="props.btnsTree"
        :checkedKeys="props.btnsCheckedKeys"
        :defaultExpandAll="true"
        :fieldNames="{ key: 'id', title: 'label' }"
        @check="handleCheck"
      />
    </div>
    <BasicTable @register="btnsTable" class="m-2 mr-0 w-3/4 xl:w-4/5">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'isRowBtn'">
          <a-switch
            v-model:checked="record.isRowBtn"
            :disabled="['Add', 'Import', 'Export'].includes(record.prop)"
          />
        </template>
        <template v-if="column.key === 'isWFlow'">
          <div v-if="record.prop == 'Add' || record.prop == 'Edit'">
            <a-switch v-model:checked="record.isWFlow" />
          </div>
        </template>
        <template v-if="column.key === 'wFlowCode'">
          <div v-if="record.prop == 'Add' || record.prop == 'Edit'">
            <a-select
              placeholder="请选择"
              size="small"
              v-model:value="record.wFlowCode"
              :options="wflist"
              style="width: 100%"
            />
          </div>
        </template>
        <template v-if="column.key === 'class'">
          <a-select
            ref="select"
            placeholder="请选择"
            size="small"
            v-model:value="record.class"
            :options="classList"
            style="width: 100%"
          />
        </template>
        <template v-if="column.key === 'sort'">
          <a-input-number v-model:value="record.sort" :min="0" />
        </template>
        <!-- <template v-if="column.key === 'icon'">
          <div v-if="record.prop in ['Add', 'Import', 'Export']">
            <IconPicker v-model:value="record.icon" />
          </div>
        </template> -->
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, inject, defineProps, PropType, watch, onMounted, unref, nextTick } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { BasicTree, TreeActionType } from '@/components/Tree';
  // import { IconPicker } from '/@/components/Icon';
  import { btns } from './config.data';
  import { getInfoList } from '@/api/sys/WFSchemeInfo';

  // 定义props,树目录
  const props = defineProps({
    btnsTree: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
    btnsCheckedKeys: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  });

  // config
  const config: any = inject('formConfig');
  const btnsData = ref(config.table.btns);
  // 展开全部
  const btnsTreeRef = ref<Nullable<TreeActionType>>(null);

  const classList = [
    { label: 'primary', value: 'primary' },
    { label: 'success', value: 'success' },
    { label: 'error', value: 'error' },
    { label: 'warning', value: 'warning' },
  ];

  const wflist: any = ref([]);

  const [btnsTable, { reload }] = useTable({
    rowKey: 'id',
    dataSource: btnsData,
    columns: btns,
    bordered: true,
    pagination: false,
  });

  // 树的选择变动
  function handleCheck(keys) {
    btnsData.value = props.btnsTree.filter((item) => {
      return keys.includes(item.id);
    });
    config.table.btns = btnsData.value;
    reload();
  }

  watch(
    () => config.table.btns,
    () => {
      btnsData.value = config.table.btns;
    },
  );

  async function fetch() {
    // 展开全部
    nextTick(() => {
      unref(btnsTreeRef)?.expandAll(true);
      unref(btnsTreeRef)?.setCheckedKeys(props.btnsCheckedKeys);
    });
    let res = await getInfoList({});
    let categoryList: any = [];
    res.forEach((item: any) => {
      if (!categoryList.includes(item.category)) {
        categoryList.push(item.category);
      }
    });
    categoryList.forEach((item1) => {
      res.forEach((item2) => {
        if (item1 == item2.category) {
          wflist.value.push({ label: item2.category + '-' + item2.name, value: item2.code });
        }
      });
    });
  }

  onMounted(() => {
    fetch();
  });
</script>
