<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10" style="max-height: 800px;overflow-y: hidden;">
    <a-col :xl="8" :lg="24" :md="24" style="margin-bottom: 10px">
      <DepartLeftTree ref="leftTree" @select="onTreeSelect" @successTree="handleSuccessTre" />
    </a-col>
    <a-col :xl="16" :lg="24" :md="24" style="margin-bottom: 10px">
      <div style="height: 100%;" class="address-book">
        <!--引用表格-->
        <BasicTable @register="registerTable">
          <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" />
          </template>
        </BasicTable>
      </div>
    </a-col>
  </a-row>
  <Modal @register="register" @success="handleSuccess" />
</template>

<script lang="ts" setup>
import { provide, ref, unref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import DepartLeftTree from './components/DepartLeftTree.vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, searchFormSchema } from './address.data';
import { list, delXzbm, treeXzbm, treePidXzbm } from './address.api';
import Modal from './components/modal.vue';
import { useModal } from '/@/components/Modal';
const [register, { openModal }] = useModal();
const { prefixCls } = useDesign('address-list');
provide('prefixCls', prefixCls);
// 给子组件定义一个ref变量
const leftTree = ref();

// 当前选中的部门code
const orgCode = ref('');
// 列表页面公共参数、方法
const { tableContext } = useListPage({
  tableProps: {
    api: treePidXzbm,
    columns,
    rowKey: 'id',
    showIndexColumn: true,
    useSearchForm: false,
    canResize: false,
    showTableSetting: false,
    // 请求之前对参数做处理
    beforeFetch(params) {
      if (orgCode.value) {
        params.pid = orgCode.value;
      } else {
        params.pid = '000000';
      }
    },
  },
});
//注册table数据
const [registerTable, { reload }] = tableContext;

// 左侧树选择后触发
function onTreeSelect(data) {
  orgCode.value = data.id;
  reload();
}
/**
* 编辑事件
*/
async function handleEdit(record) {
  openModal(true, {
    record: record,
    isUpdate: true,
  });
}
// 删除事件
async function handleDel(record) {
  await delXzbm({ id: record.id });
  // await treeXzbm(record.id);
  reload()
}
/**
 * 操作栏
 */
function getTableAction(record) {
  return [
  {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDel.bind(null, record),
      },
      auth: 'system:xzCode:delete',
    },
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
      auth: 'system:xzCode:edit',
    },
  ];
}
function handleSuccess(values) {
  reload()
  console.log();
  leftTree.value.loadRootTreeData()
}
function handleSuccessTre(val) {
  reload()
}
</script>

<style lang="less">
@import './index.less';
</style>
