<script lang="ts" setup>
import type { BasicForm, ICRUD } from '@/types/form'

import api from '@/api/menu/menuButton'

const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})

const itemTableRef = ref<any>(null)

const CRUD: ICRUD = {
    create(data: any) {
        data.menuId = props.id
        return api.addMenuButton(data)
    },
    update(data: any) {
        return api.updateMenuButton(data)
    },
    getList(data: any) {
        data.menuId = props.id
        return api.listMenuButton(data).then((res: any) => {
            return {
                list: res.data.records,
                total: res.data.total
            }
        })
    },
    delete(data: any) {
        return api.delMenuButton({
            ids: data.id
        })
    },
    getRecord(data: any) {
        return api.getMenuButton(data.id)
    }
}


const logtFormConfig = reactive<BasicForm>({
    span: 12,
    formItems: [
        {
            span: 24,
            label: '',
            value: '',
            name: '',
            type: 'custom',
            slots: [
                {
                    name: 'default',
                    alias: 'infos'
                }
            ]
        },
        {
            label: '按键名称',
            value: '',
            name: 'name',
            type: 'input',
            rules: [{ required: true, message: '请输入按键名称', trigger: 'blur', },],
            search: true,

            props: {
                'label-width': '150px'
            }
        },
        {
            label: '权限标识',
            value: '',
            name: 'code',
            type: 'input',
            rules: [{ required: true, message: '请输入权限标识', trigger: 'blur', },],
            search: true,

        },
        {
            label: '是否显示',
            value: '0',
            name: 'enabled',
            type: 'switch',
            props: {
                'active-value': '0',
                'inactive-value': '1'
            }
        },
        {
            label: '菜单排序',
            value: 1,
            name: 'sort',
            type: 'input-number',
            props: {
        min:1,
        controlsPosition:"right"
      },
        },
        {
            label: '描述',
            value: '',
            name: 'remarks',
            type: 'input',
        },

    ]
})

const checkSwitch = (row: any) => {
    api.updateMenuButton({ id: row.id, enabled: row.enabled == '0' ? '1' : '0' }).then(res => {
        itemTableRef.value.refresh()
    })
}

const programmeList = ref<any>([])
const queryList = () => {
  api.findCommonSolutionsList({
    sysData: 1
  }).then((res:any) => {
    programmeList.value = res.data
  })
}

const setProgramme = (e: any) => {
  api.saveByCommonSolutions({
    menuId: props.id,
    commonSolutionsId: e.id
  }).then((res: any) => {
    if (res.code == 200) {
      itemTableRef.value.refresh()
    }
  })
}

const handleEdit = (row: any) => {
  itemTableRef.value.handleUpdate(row)
}

</script>

<template>
    <div>
        <pro-table :crud="CRUD" :tree-config="{}" ref="itemTableRef" height="70vh" :tableConfig="{ operateWidth: 230,showEdit: false, }"
        :formConfig="logtFormConfig" :selection="false">
        <template #infos>
            <el-alert title="权限标识 前端页面中为按钮定义的权限标识，如：'sys:menu:del'" type="warning" :closable="false" />
        </template>
        <template #toolbar="toolbar">
            <el-dropdown trigger="click">
            <el-button type="primary" class="ml-3" @click="queryList">
                快捷按钮权限<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu v-for="(item, index) in programmeList">
                <el-dropdown-item @click="setProgramme(item)">
                    {{ item.name }}
                </el-dropdown-item>
                </el-dropdown-menu>
            </template>
            </el-dropdown>
        </template>
        <vxe-column field="name" title="按键名称" tree-node></vxe-column>
        <vxe-column field="code" title="按键编号"></vxe-column>
        <vxe-column field="enabled" title="是否启用">
            <template #default="{ row }">
                <div @click="checkSwitch(row)">
                    <el-switch :model-value="row.enabled" :active-text="row.enabled=='0' ? '已启用' : '未启用'" active-value="0" inactive-value="1" />
                </div>
            </template>
        </vxe-column>
        <vxe-column field="sort" title="排序"></vxe-column>
        <vxe-column field="remarks" title="描述"></vxe-column>
        <template #operateAfter="{ row }">
            <el-button type="primary" plain size="small" v-if="row.source == 0" @click="handleEdit(row)"> 编辑 </el-button>
        </template>
    </pro-table>
    </div>
    
</template>

<style lang="scss" scoped>
@media only screen and (min-width: 1200px) {
    :deep(.el-col-lg-6) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
       
    }}
</style>
