<script lang="ts" setup>
import type { BasicForm, ICRUD } from '@/types/form'
import MenuButton from './modules/menuButton.vue'
import MenuList from './modules/menuList.vue'
import MenuForm from './modules/menuForm.vue'
import MenuPermission from './modules/menuPermission.vue'
import api from '@/api/menu/menu'

const activeName = ref<any>('0')
const activeMenu = ref<any>('1')
const classPath=ref('')
const itemTableRef = ref<any>(null)
const orgTreeData = ref([])

const CRUD: ICRUD = {
  create(data: any) {
    data.category = activeMenu.value == '1' ? 'WEB' : 'APP'
    data.parentId = data.parentId ? data.parentId : '0'
    return api.addMenu(data)
  },
  update(data: any) {
    data.category = activeMenu.value == '1' ? 'WEB' : 'APP'
    data.parentId = data.parentId ? data.parentId : '0'
    return api.updateMenu(data)
  },
  getList(data: any) {
    data.category = activeMenu.value == '1' ? 'WEB' : 'APP'
    return api.getMenuTree(data).then((res: any) => {
      orgTreeData.value = res.data
      return {
        list: res.data
      }
    })
  },
  delete(data: any) {
    return api.delMenu({
      id:data.id
    })
  },
  getRecord(data: any) {
    return api.getMenu({ id: data.id }).then(async (res:any) => {
      res.data.parentId == '0'?res.data.parentId = '' : res.data.parentId = res.data.parentId
      return res
    })
  }
}

const logtFormConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '父级',
      value: '',
      name: 'parentId',
      type: 'tree-select',
      search: false,
      props: {
        'value-key': 'id',
        data: orgTreeData,
        'check-strictly':true,
        props: {
          children: 'children',
          label: 'name'
        }
      }
    },
    {
      label: '菜单名称',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
      search: false
    },
    {
      label: '菜单类型',
      value: '',
      name: 'type',
      type: 'select',
      rules: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
      options: [
        {
          label: '目录',
          value: '1'
        },
        {
          label: ' 页面',
          value: '2'
        },
        {
          label: ' 外链',
          value: '3'
        },
        
      ]
    },
    {
      label: '路径',
      value: '',
      name: 'path',
      type: 'input',
      rules: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
      search: false
    },
    {
      label: '页面地址',
      value: '',
      name: 'component',
      type: 'input',
      hidden:true,
      rules: [{ required: true, message: '页面地址不能为空', trigger: 'blur' }],
      search: false
    },
    {
      label: '目标',
      value: '',
      name: 'target',
      type: 'select',
      hidden:true,
      options: [
        {
          label: 'mainFrame',
          value: 'mainFrame'
        },
        {
          label: 'blank',
          value: 'blank'
        },
        {
          label: 'self',
          value: 'self'
        },
        {
          label: 'parent',
          value: 'parent'
        },
        {
          label: 'top',
          value: 'top'
        }
      ],
      search: false
    },
    {
      label: '图标',
      value: '',
      name: 'icon',
      type: 'icon-picker',
    },

    {
      label: '排序',
      value: 1,
      name: 'sort',
      type: 'input-number',
      props: {
        min:1,
        controlsPosition:"right"
      },
    },
    {
      label: '是否启用',
      value: '0',
      name: 'isShow',
      type: 'switch',
      props: {
        'active-value': '1',
        'inactive-value': '0'
      }
    },
    {
      label: '验证开关',
      value: '0',
      name: 'verification',
      type: 'switch',
      props: {
        'active-value': '1',
        'inactive-value': '0'
      }
    },
   
    {
      label: '权限标识',
      value: '',
      name: 'permission',
      type: 'input',
      // rules: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
      search: false
    },
    {
      label: '类路径',
      value: '',
      name: 'classPath',
      type: 'input',
      search: false
    },
    {
      label: '提示',
      value: '',
      name: 'tip',
      type: 'input',
      search: false
    }
  ]
})
watch(()=>itemTableRef.value?.formData.type,(newval)=>{
  console.log(newval)
if(newval==1){
  logtFormConfig.formItems.forEach(item=>{
      if(item.name=='target'){
        item.hidden=true
      }
      if(item.name=='component'){
        item.hidden=true
      }
    })
}else if(newval==2){
    logtFormConfig.formItems.forEach(item=>{
      if(item.name=='component'){
        item.hidden=false
      }
    })
  }else if(newval==3){
    logtFormConfig.formItems.forEach(item=>{
      if(item.name=='target'){
        item.hidden=false
      }
      if(item.name=='component'){
        item.hidden=true
      }
    })
  }
})
const dialogVisible = ref(false)

const menuId = ref<any>('')
const menuConfig = (row: any) => {
  menuId.value = row.id;
  classPath.value=row.classPath
  dialogVisible.value = true
}

const checkSwitch = (row: any) => {
  api.updateMenushow({ id: row.id, isShow: row.isShow == null ? '1' : row.isShow }).then(res => {
    itemTableRef.value.refresh()
  })
}

//切换验证开关
const checkVerification = (row:any) =>{
  api.updateMenuVerification({ id: row.id, verification: row.verification == null ? '1' : row.verification }).then(res => {
    itemTableRef.value.refresh()
  })
}

const addchild = (row:any) => {
  itemTableRef.value?.handleCreate()
  nextTick(()=>{
    itemTableRef.value.formData.parentId=row.id
    console.log(itemTableRef.value)
  })
}

const menuBack = () =>{
  dialogVisible.value = false
}
</script>

<template>
  <el-tabs v-model="activeMenu" class="demo-tabs">
    <el-tab-pane label="WEB菜单" name="1"></el-tab-pane>
    <!-- <el-tab-pane label="APP菜单" name="2"></el-tab-pane> -->
  </el-tabs>

  <pro-table
    :crud="CRUD"
    :tree-config="{rowField:'id',expandAll:true,reserve: true,}"
    :row-config="{ keyField: 'id', isHover: true }"
    ref="itemTableRef"
    :tableConfig="{ operateWidth: 230, }"
    :formConfig="logtFormConfig"
    :selection="false"
    height="630px"
  >
    <vxe-column field="name" title="菜单名称" tree-node></vxe-column>
    <vxe-column field="type" title="菜单类型">
      <template #default="{ row }">
        <el-tag v-if="row.type == 1" type="success">目录</el-tag>
        <el-tag v-if="row.type == 2" type="primary">页面</el-tag>
        <el-tag v-if="row.type==3" type="warning">外链</el-tag>
      </template>
    </vxe-column>
    <vxe-column field="sort" title="菜单排序"></vxe-column>
    <vxe-column field="icon" title="菜单图标"></vxe-column>
    <vxe-column field="path" title="菜单地址"></vxe-column>
    <vxe-column field="target" title="菜单目标"></vxe-column>
    <vxe-column field="permission" title="权限标识"></vxe-column>
    <vxe-column field="isShow" title="启用">
      <template #default="{ row }">
          <el-switch v-model="row.isShow" :active-text="row.isShow==1 ? '已启用' : '未启用'"  @change="checkSwitch(row)" active-value="1" inactive-value="0" />
      </template>
    </vxe-column>
    <vxe-column field="verification" title="验证开关">
      <template #default="{ row }">
        <div @click="checkVerification(row)">
          <el-switch v-model="row.verification" :active-text="row.verification==1 ? '开' : '关'"  active-value="1" inactive-value="0" />
        </div>
      </template>
    </vxe-column>
    <template #operateAfter="{ row }">
      <el-button type="primary" plain size="small" @click="menuConfig(row)" v-if="row.type==2">配置</el-button>
      <el-button type="primary" plain size="small" @click="addchild(row)" v-if="row.type==1">新建子级</el-button>
    </template>
  </pro-table>
 
  <el-drawer title="菜单配置" v-model="dialogVisible" size="50%" @close="menuBack">
    <el-tabs v-model="activeName" stretch v-if="dialogVisible">
      <el-tab-pane label="按键配置" name="0">
        <el-alert title="维护菜单页面内包含的按钮，按钮编号为: (模块：操作), 例如（menu：add） 代表菜单新增按钮" type="warning" :closable="false" />
        <MenuButton :id="menuId" v-if="activeName == 0"></MenuButton>
      </el-tab-pane>
      <el-tab-pane label="列表字段配置" name="1">
        <el-alert title="维护菜单对应列表页面要显示的列表字段，如不配置按菜单对应的列表默认字段全部展示" type="warning" :closable="false" />
        <MenuList :id="menuId" v-if="activeName == 1" :classPath="classPath"></MenuList>
      </el-tab-pane>
      <el-tab-pane label="表单字段配置" name="2">
        <el-alert title="维护菜单对应表单内显示的字段，如不配置按菜单对应的表单默认字段全部展示" type="warning" :closable="false" />
        <MenuForm :id="menuId" v-if="activeName == 2" :classPath="classPath"></MenuForm>
      </el-tab-pane>
      <el-tab-pane label="数据权限配置" name="3">
        <MenuPermission :id="menuId" v-if="activeName == 3" :classPath="classPath"></MenuPermission>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<style lang="scss" scoped>
.demo-tabs {
  background-color: white;
  padding: 10px 20px;
}
.title-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:10px 20px;
  background-color:white ;
}
.title-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}
.title-text {
  font-size: 16px;
}
</style>
