<template>
  <div style="overflow: auto" :style="{ height }">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
  <RoleDataModal @register="registerDataModal" @get-select-result="setValue" />
</template>
<script lang="ts" setup>
  import { ref, provide, reactive } from 'vue';
  import { BasicTable, TableAction, useModal, useListPage } from '@jdlinker/ui';
  import RoleDataModal from '../RoleDataModal.vue';
  import { queryRules, relationRuledData, queryBySourceId } from '../role.api';

  const [registerDataModal, { openModal: openDataModal }] = useModal();
  const customParam = ref({
    roleId: '',
    expandData: []
  });
  const props = defineProps({
    height: {
      type: String,
      default: '190px'
    }
  });
  //定义表格列
  const columns = [
    {
      title: '名称',
      align: 'center',
      dataIndex: 'name',
      ellipsis: true,
      width: 120
    },
    {
      title: '数据',
      align: 'center',
      dataIndex: 'dataScope'
    }
  ];
  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    tableProps: {
      api: queryRules,
      useSearchForm: false,
      showTableSetting: false,
      pagination: false,
      columns,
      actionColumn: {
        width: 80
      },
      // 请求之前对参数做处理
      beforeFetch(params) {
        params.ruleType = 1;
      }
    }
  });
  const [registerTable, { reload }] = tableContext;

  const selectValues = reactive<any>({
    value: [],
    change: false
  });
  function setValue(options, values) {
    customParam.value.expandData = values.join(',');
    relationRuledData(customParam.value).then((res) => {
      if (res) {
        reload();
      }
    });
  }

  const relationData = (record) => {
    customParam.value.roleId = record.id;
    queryBySourceId({ roleId: record.id }).then((res) => {
      if (res) {
        selectValues.value = res;
        openDataModal(true, {
          record,
          isUpdate: true,
          showFooter: true
        });
      }
    });
  };

  provide('selectValues', selectValues);
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '配置',
        onClick: relationData.bind(null, record)
      }
    ];
  }
</script>
