<template>
  <div class="structure p-4">
    <div class="structure-table">
      <BasicTable @register="registerTable" class="basic-table">
        <template #toolbar>
          <Button type="primary" @click="handleCreate">
            新增
          </Button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="[
            {
              label: '编辑',
              tooltip: '编辑',
              // icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              tooltip: '删除',
              // icon: 'ant-design:delete-outlined',
              color: 'error',
              onClick: handleDelete.bind(null, record),
            },
          ]" />
        </template>
      </BasicTable>
    </div>

    <!-- 弹出框 -->
    <StructureModal v-if="ifShowModal" :title="modalTitle" :formData="formData" @closeModal="ifShowModal = false"
      @onSubmit="onSubmit" />
  </div>
</template>
<script>
//导入所需插件
import { defineComponent, nextTick, ref, createVNode, watch } from 'vue';

// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// 加载表格数据
import { structureList, DeleteStructure } from '/@/api/sys/menu';

// 导入子页面【新增、修改】
import StructureModal from './StructureModal.vue';

// 导入列 属性，和搜索栏内容
import { columns } from './structure.data';
import { Button, Modal, message } from 'ant-design-vue';
import { isArray } from '/@/utils/is';
// 自定义表格组件和属性
export default defineComponent({
  name: 'MenuManagement',
  components: { BasicTable, StructureModal, TableAction, Button, ExclamationCircleOutlined },
  setup() {
    const ifShowModal = ref(false)
    const modalTitle = ref('新增机构')
    const formData = ref(null)
    
    const onFetchSuccess= () => {
      // 演示默认展开所有表项
      // nextTick(()=>{
      //   expandAll()
      // })
      // setTimeout(()=>{
      //   let tableData = getRawDataSource();
      //   if(tableData?.length){
      //     expandAll()
      //   }
      // },100)
    }

    const [
      registerTable,
      { reload, expandAll, collapseAll, getRawDataSource },
    ] = useTable({
      title: '机构列表', //'菜单列表'
      api: structureList, //加载数据
      columns, //加载列
      isTreeTable: true,
      pagination: false,
      striped: false,
      showTableSetting: true,
      bordered: false,
      showIndexColumn: false,
      canResize: true,
      // rowKey: (record) => record.id,
      autoCreateKey:true,
      afterFetch:onFetchSuccess,
      actionColumn: {
        width: 100,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      tableSetting: {
        redo: true,
        size: true,
        setting: false,
        fullScreen: false
      }
    });

    /**
     * 打开新增菜单
     */
    function handleCreate() {
      formData.value = {
        departid: "",
        departName: "",
        orderId: "",
        parentId: ""
      }
      modalTitle.value = '新增机构'
      ifShowModal.value = true
    }

    /**
     * 打开 编辑菜单
     * @param record
     */
    function handleEdit(record) {
      formData.value = {
        departid: record.departid,
        departName: record.departName,
        orderId: record.orderId,
        parentId: record.level===0 ? '' : record.parentId
      }
      modalTitle.value = '编辑机构'
      ifShowModal.value = true
    }

    /**
     * 执行 删除操作
     * @param record
     */
    async function handleDelete(record) {
      Modal.confirm({
        title: '删除提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定删除该机构？',
        centered: true,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: (() => {
          let ids = isArray(record.departid) ? record.departid : [record.departid];
          DeleteStructure({ departid: ids }).then(res=>{
            if(res.resp_code===0){
              message.success('操作成功');
              onSubmit(true)
            }else if(res.resp_code===1){
              message.info(res.resp_msg);
            }else{
              message.error('操作失败');
            }
          })
        })
      });
    }

    const onSubmit = (e) => {
      e && reload();
    }

    return {
      ifShowModal,
      modalTitle,
      formData,
      onSubmit,
      registerTable,
      handleCreate,
      handleEdit,
      handleDelete,
      onFetchSuccess,
    };
  },
});
</script>
<style lang="less" scoped>
.structure {
  .structure-table {
    height: 100%;
    padding: 0 20px;
    background-color: #fff;

    .basic-table {
      height: 100%;

      ::v-deep .ant-table-title {
        padding: 0 !important;

        .vben-basic-title {
          font-family: '阿里巴巴普惠体 2.0';
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }

      }
    }
  }
}
</style>
