<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" :pagination="false" :loading="loading">
      <template #tableTitle>
        <div></div>
      </template>
      <template #tableTop>
        <div></div>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { defineExpose, toRaw, watch, ref } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getTableHeaderColumns, setWebColumnsKey } from '/@/hooks/web/useWebColumns';

  const $message = useMessage();
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    searchFormSchema: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Function,
      // required: true,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },

  });
  const dataTableSource = ref([]);
  const loading = ref(true)


  watch(
    () => {
      // loading.value = true
      return props.dataSource
    },
    (newVal) => {
      const list = [];
      newVal.forEach((item) => {
        list.push(toRaw(item));
      });
      if (newVal) {
        // setLoading(false);
      }

      dataTableSource.value = list;
      loading.value = false
    }
  );
  setWebColumnsKey(props.columnsType);
  const columns = getTableHeaderColumns;
  // 列表页面公共参数、方法
  const { prefixCls, tableContext, doRequest } = useListPage({
    designScope: props.designScope,
    tableProps: {
      title: props.title,
      // api: props.list,
      dataSource: dataTableSource,
      columns: columns.value,
      size: 'small',
      useSearchForm: false,
      showTableSetting: false,
      maxHeight: 150,
      bordered: false,
      actionColumn: {
        width: 180,
      },
      beforeFetch: (params) => {
        return Object.assign({ column: 'createTime', order: 'desc' }, params);
      },
    },
  });

  //注册table数据
  const [registerTable, { reload, setLoading }, { rowSelection, selectedRowKeys }] = tableContext;

  rowSelection.type = 'radio'

  function openDetail(record) {
    record;
  }

  /**
   * 查看
   */
  // function handleDetail(record) {
  //   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
  //   openDetail(true);
  // }
  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
    {
        label: '开启',
        onClick: openDetail.bind(null, record),
      },
      {
        label: '关闭',
        onClick: openDetail.bind(null, record),
      },
    ];
  }
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      // {
      //   label: '删除',
      //   popConfirm: {
      //     title: '是否确认删除',
      //     confirm: handleDelete.bind(null, record),
      //   },
      // },
      // {
      //   label: '查看',
      //   onClick: handleDetail.bind(null, record),
      // },
    ];
  }
  defineExpose({
    doRequest,
  });
</script>

<style scoped lang="less">
  :deep(.ant-table-body) {
    height: auto !important;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
    min-height: 0;
  }
</style>
