<template>
  <div>
    <a-space style="margin-bottom: 10px">
      <a-button
        type="primary"
        class="ele-btn-icon"
        v-if="data"
        @click="openEdit"
      >
        <span>添加</span>
      </a-button>
    </a-space>
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      row-key="appId"
      :columns="columns"
      class="sys-org-table"
      :toolbar="false"
      :datasource="datasource"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'menuType'">
          <a-tag v-if="record.menuType === '0'" color="blue">菜单</a-tag>
          <a-tag v-else-if="record.menuType === '1'">按钮</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="openEdit(record)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除此记录吗？"
              @confirm="remove(record)"
            >
              <a class="ele-text-danger">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </ele-pro-table>
  </div>
  <!-- 编辑弹窗 -->
  <MenuEdit
    v-model:visible="showEdit"
    :data="current"
    :parentId="parentId"
    @done="reload"
  />
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import type {
    ColumnItem,
    DatasourceFunction
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import type { EleProTable } from 'ele-admin-pro';
  import MenuEdit from './menu-edit.vue';
  import { App, AppParam } from '@/api/dashboard/appstore/model';
  import { listApp, removeApp } from '@/api/dashboard/appstore';

  const props = defineProps<{
    // 菜单类型
    menuType?: number;
    // 修改回显的数据
    data?: App | null;
    showView?: boolean;
  }>();

  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  // 表格列配置
  const columns = ref<ColumnItem[]>([
    {
      title: '组件名称',
      key: 'appName',
      dataIndex: 'appName',
      ellipsis: true
    },
    {
      title: '路由地址',
      dataIndex: 'path'
    },
    {
      title: '组件路径',
      dataIndex: 'component'
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      align: 'center',
      hideInSetting: true
    }
  ]);

  /* 表格数据源 */
  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
    where.parentId = props.data?.appId;
    where.menuType = props.menuType;
    return listApp({ ...where, ...orders, page, limit });
  };

  // 当前编辑数据
  const current = ref<App | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  // 上级菜单id
  const parentId = ref<number>();

  // 菜单数据
  // const menuData = ref<App[]>([]);

  // 表格展开的行
  // const expandedRowKeys = ref<number[]>([]);

  /* 表格渲染完成回调 */
  // const onDone: EleProTableDone<App> = ({ data }) => {
  //   menuData.value = data;
  // };

  /* 刷新表格 */
  const reload = (where?: AppParam) => {
    tableRef?.value?.reload({ where: where });
  };

  /* 打开编辑弹窗 */
  const openEdit = (row?: App | null, id?: number) => {
    parentId.value = props.data?.appId;
    current.value = row ?? null;
    showEdit.value = true;
  };

  /* 删除单个 */
  const remove = (row: App) => {
    if (row.children?.length) {
      message.error('请先删除子节点');
      return;
    }
    const hide = message.loading('请求中..', 0);
    removeApp(row.appId)
      .then((msg) => {
        hide();
        message.success(msg);
        reload();
      })
      .catch((e) => {
        hide();
        message.error(e.message);
      });
  };

  watch(
    () => props.data?.appId,
    (visible) => {
      if (visible) {
        reload();
      }
    }
  );
</script>

<script lang="ts">
  import * as MenuIcons from '@/layout/menu-icons';

  export default {
    name: 'Authority',
    components: MenuIcons
  };
</script>
