<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/system/menu">菜单管理接口</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 数据表格 -->
  <DataTable
    ref="tableRef"
    style="width: 100%"
    row-key="menu_guid"
    :onSelectionChange="data => (selectionData = data)"
    :column="column"
    :params="params"
    :pagination="false"
    :request="params => getMenuApiTree(params)"
  >
    <template #menu_api_url="scope">
      <template v-for="(item, index) in scope.row.menu_api_url" :key="item">
        <el-tag v-if="index <= 2">
          {{ item }}
        </el-tag>
      </template>
    </template>
    <template #chaoz="scope">
      <el-button
        size="small"
        @click="(currentData = scope.row), (viewApiDialogVisible = true)"
      >
        绑定接口
      </el-button>
    </template>
  </DataTable>
  <!-- 查看接口 -->
  <ViewApiDialog
    v-model="viewApiDialogVisible"
    :data="currentData"
    :done="() => tableRef.reload()"
  ></ViewApiDialog>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { getMenuApiTree } from '~/service/menu';
import ViewApiDialog from './components/ViewApiDialog.vue';

const tableRef = ref();
const viewApiDialogVisible = ref(false);
const currentData = ref({});
const params = reactive({});
const column = [
  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: 'menu_name',
    label: '名称',
    width: '250'
  },
  {
    prop: 'menu_url',
    label: '路由',
    width: '250'
  },
  {
    prop: 'menu_api_url',
    label: '接口',
    width: '300'
  },
  {
    label: '操作',
    prop: 'chaoz',
    width: '150'
  }
];
</script>
