<template>
    <div>
        <div class="custom-table-header">
            <div style="flex: 1; font-weight: 700">接口权限列表</div>
            <el-input
                v-model="tableStore.table.params.searchValue"
                style="width: 240px"
                placeholder="请输入菜单名称"
                class="ml10"
                clearable
                @input="search"
            />
            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
        </div>
        <Table ref="tableRef" />
        <popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
    </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, Ref, inject, provide, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import popupApi from './popupApi.vue'
import { deleteMenu } from '@/api/user-boot/function'

defineOptions({
    name: 'auth/menu/api'
})
const emits = defineEmits<{
    (e: 'init'): void
}>()
const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})
const tableRef = ref()
const popupRef = ref()
const apiList = ref([])
const tableStore = new TableStore({
    showPage: false,
    url: '/user-boot/function/getButtonById',
    column: [
        { title: '普通接口/接口名称', field: 'name' },
        { title: '接口类型', field: 'type' },
        { title: 'URL接口路径', field: 'path' },
        {
            title: '操作',
            align: 'center',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        popupRef.value.open('编辑接口权限', row)
                    }
                },
                {
                    name: 'del',
                    title: '删除接口',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除该菜单吗？'
                    },
                    click: row => {
                        deleteMenu(row.id).then(() => {
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => {
        apiList.value = tableStore.table.data
        search()
    }
})
tableStore.table.loading = false
watch(
    () => props.id,
    () => {
        tableStore.table.params.id = props.id
        tableStore.index()
    }
)
provide('tableStore', tableStore)

const addMenu = () => {
    console.log(popupRef)
    popupRef.value.open('新增接口权限', {
        pid: props.id
    })
}
const search = () => {
    tableStore.table.data = apiList.value.filter(
        (item: any) =>
            !tableStore.table.params.searchValue ||
            item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
            item.path.indexOf(tableStore.table.params.searchValue) !== -1
    )
}
</script>