<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="15">
          
        <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
          <div style="margin-bottom: 15px;padding-bottom: 10px;font-size: 18px;color: #16599d;border-bottom: 1px solid #ccc;">菜单列表</div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="showpop(1)">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
            </el-col>
          </el-row>
        
            <el-table
              v-if="showtab"
              style="width:100%;margin-top: 10px;"
              :data="menuOptions[0]?.subMenuList"
              :default-expand-all="toggsta" 
              row-key="pkId"
              border
              @row-click="rowclick"
              highlight-current-row
              :tree-props="{ children: 'subMenuList',hasChildren: 'hasChildren' }"
              max-height="680px"
            >
                <el-table-column label="菜单名称" min-width="140" align="left" prop="name" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <div style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.name}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="类型" min-width="80" align="center" prop="type" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <div v-if="scope.row.type == 1">系统</div>
                    <div v-else-if="scope.row.type == 2">目录</div>
                    <div v-else>页面</div>
                  </template>
                </el-table-column>
                <el-table-column label="图标" min-width="80" align="center" prop="icon" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <el-icon v-if="scope.row.icon" :key="scope.row.pkId + 'icon1'">
                      <component :is="scope.row.icon" />
                    </el-icon>
                    <span v-else :key="scope.row.pkId + 'icon2'">#</span>
                  </template>
                </el-table-column>
                
                <!-- <el-table-column label="排序" align="center" prop="sort" :show-overflow-tooltip="true" />
                <el-table-column label="路由地址" width="150" align="center" prop="path" :show-overflow-tooltip="true" /> -->
                <el-table-column min-width="80" label="状态" align="center" prop="status">
                  <template #default="scope">
                    <div v-if="scope.row.status == 1" style="color: #48d1cc;">显示</div>
                    <div v-else style="color: #ccc;">隐藏</div>
                  </template>
                </el-table-column>
                <!-- <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
                  <template #default="scope">
                    <span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
                </el-table-column> -->
                <el-table-column label="操作" align="center" width="160" fixed="right">
                  <template #default="scope">
                    <el-button type="primary" link icon="Plus" @click="showpop(1,scope.row)">新增</el-button>
                    <!-- <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button> -->
                    <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>    
        </el-col>
        <el-col :span="9">
        <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
          <div style="margin-bottom: 15px;padding-bottom: 10px;font-size: 18px;color: #16599d;border-bottom: 1px solid #ccc;">{{daxtit}}接口权限</div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="showInter(1)">新增</el-button>
            </el-col>
          </el-row>
            <el-table
              v-if="showtab"
              style="width:100%;margin-top: 10px;"
              :data="interlist"
              border
              max-height="600px"
            >
                <el-table-column label="接口名称" min-width="100" align="center" prop="name" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <div  @click="showInter(2,scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.name}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="请求方式" min-width="80" align="center" prop="requestType" :show-overflow-tooltip="true" />
                <el-table-column label="URL" min-width="260" align="center" prop="uri" :show-overflow-tooltip="true" />
                <el-table-column label="操作" align="center" width="80" fixed="right">
                  <template #default="scope">
                    <!-- <el-button link type="primary" icon="Edit" @click="showInter(2,scope.row)">修改</el-button> -->
                    <el-button link type="danger" icon="Delete" @click="delinter(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>    
        </el-col>
      </el-row>  
    
      <!-- 添加或修改菜单配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="600px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form 
          ref="menuRef" 
          :model="addata" 
          :rules="rules" 
          label-width="90px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="父级菜单" prop="parentId">
                <el-tree-select
                  v-model="addata.parentId"
                  :data="menuOptions"
                  :props="{
                    value: 'pkId',
                    label: 'name',
                    children: 'subMenuList',
                  }"
                  value-key="parentId"
                  placeholder="选择父级菜单"
                  check-strictly
                />
                <!-- <el-input v-model="addata.division" placeholder="请选择区划" maxlength="20" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="addata.type">
                  <el-radio value="1">系统</el-radio>
                  <el-radio value="2">目录</el-radio>
                  <el-radio value="3">页面</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="addata.name" placeholder="请输入菜单名称" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="路由地址" prop="path">
                <el-input 
                  v-model="addata.path" 
                  placeholder="请输入路由地址" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组件路径" prop="component">
                <el-input 
                  v-model="addata.component" 
                  placeholder="请输入组件路径" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述" prop="mark">
                <el-input 
                  v-model="addata.mark" 
                  placeholder="请输入描述" 
                  maxlength="200" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="addata.sort" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="显示状态" prop="status">
                <el-radio-group v-model="addata.status">
                  <el-radio :value="1">显示</el-radio>
                  <el-radio :value="0">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-icon-picker v-model="addata.icon"></el-icon-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 添加或修改权限配置对话框 -->
      <el-dialog 
          v-model="interpop" 
          :title="intertit" 
          width="600px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form 
          ref="intetRef" 
          :model="interObj" 
          :rules="interrules" 
          label-width="100px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="权限标识符" prop="code">
                <el-input v-model="interObj.code" placeholder="请输入权限标识符" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="接口名称" prop="name">
                <el-input v-model="interObj.name" placeholder="请输入接口名称" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="请求方式" prop="requestType">
                <el-radio-group v-model="interObj.requestType">
                  <el-radio value="GET">GET</el-radio>
                  <el-radio value="POST">POST</el-radio>
                  <el-radio value="DEL">DEL</el-radio>
                  <el-radio value="PUSH">PUSH</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="URL路径" prop="uri">
                <el-input v-model="interObj.uri" placeholder="请输入URL路径" maxlength="200" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述" prop="mark">
                <el-input v-model="interObj.mark" placeholder="请输入描述" maxlength="200" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="interhandle">确 定</el-button>
            <el-button @click="intercancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
      import { 
        addmenu,
        update,
        delmenu,
        getInter, 
        addInter,
        updateInter,
        delInter
      } from '@/api/systemSet/menu'
      import { 
        getRouters
      } from '@/api/menu'
      import { ref,reactive, nextTick } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      import ElIconPicker from '@/components/ElIconPicker/index.vue'
      
      //获取菜单
      let menuOptions = ref<any>([])

      function getMenu() {
        getRouters().then(rps => {
          menuOptions.value = rps.data
        }) 
      }
      
      //展开折叠
      let toggsta = ref(true)
      let showtab = ref(true)
      function toggleExpandAll(){
        showtab.value = false
        toggsta.value = !toggsta.value
        nextTick(() => {
          showtab.value = true
        })
      }

      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加菜单')
      let menuRef = ref()
      let addata = reactive({
        type:'',	            //菜单类型: 系统-1，目录-2，页面-3
        parentId:'',	        //父级菜单id
        name:'',	            //菜单名称
        mark:'',	            //功能描述
        component:'',         //对应路由组件   一级目录:Layout  二级以后目录 ParentView
        path:'',	            //对应路由path
        status:1,	            //状态
        sort:1,	              //排序
        icon:'',	              //菜单图标 
        pkId:''
       // creater:''	        //创建人
      })
      const rules = ref({
        parentId:[
          { required: true, message: "请选择父级菜单", trigger: "blur" },
        ],
        type:[
          { required: true, message: "请选择菜单类型", trigger: "blur" },
        ],
        name:[
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        path:[
          { required: true, message: "请输入路由地址", trigger: "blur" },
        ],
        component:[
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        pocode:[
          { required: true, message: "请输入运营商组织机构代码", trigger: "blur" },
        ]
      })
      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加菜单':'修改菜单'
        menuRef.value?.resetFields()
        if(num == 2){
         addata.pkId = row.pkId
         addata.type = row.type	                //菜单类型: 系统-1，目录-2，页面-3
         addata.parentId = row.parentId	        //父级菜单id
         addata.name = row.name	                //菜单名称
         addata.mark = row.mark	                //功能描述
         addata.component = row.component       //对应路由组件component
         addata.path = row.path	                //对应路由path
         addata.status = row.status	            //状态
         addata.sort = row.sort	                //排序
         addata.icon = row.icon	                //菜单图标 
        }else{
          if(num == 1 && row){
            addata.parentId = row.pkId
          }else{
            addata.parentId = ''
          }
          addata.pkId = ''
          addata.type = ''
          addata.name = ''
          addata.mark = ''
          addata.component = ''
          addata.path = ''
          addata.status = 1
          addata.sort = 1
          addata.icon = ''	    
        }
        
      }
      function savehand() {
        if(type.value == 1){
            return addmenu(addata)
        }
        return update(addata)
        
      }
      //保存
      function handleAdd() {
        menuRef.value?.validate((valid:Boolean) => {
            if (valid) {
                savehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                setTimeout(()=> {
                    openpop.value = false
                    getRouters().then(rps => {
                      menuOptions.value = rps.data
                    })
                },600)
            })
            }
        })
      }

    //取消
    function cancel() {
      openpop.value = false
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除菜单：${row.name}`,
        '温馨提示',
        {
            type: 'warning',
        }
      ).then(() => {
        delmenu(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getMenu()
          })
      })
    }
    
    //新增，修改页面接口权限
    let daxtit = ref('')
    let interpop = ref(false)
    let intertype = ref(1)
    let intertit = ref('新增接口权限')
    let intetRef = ref()
    let interObj =  reactive({
      code:'',	                //资源编码：页面:操作   权限标识符
      name:'',	                //接口名称
      menuId:'',	              //菜单ID
      allow:'gateway',	        //允许访问路径，gateway-允许网关访问，private-不允许网关访问
      uri:'',	                  //uri路径
      requestType:'',	          //请求方式：GET/POST/DEL/PUSH
      mark:'',	                  //接口描述
      pkId:''
    }) 

    const interrules = ref({
      code:[
        { required: true, message: "请输入权限标识符", trigger: "blur" },
      ],
      name:[
        { required: true, message: "请输入接口名称", trigger: "blur" },
      ],
      uri:[
        { required: true, message: "请输入URL路径", trigger: "blur" },
      ],
      requestType:[
        { required: true, message: "请选择请求方式", trigger: "blur" },
      ]
    })
    //点击菜单tabel 查询页面权限
    let interlist = ref<any>([])
    function rowclick(row:any,column:any) {
      if(row.type == 3 && column.label != '操作'){
        interObj.menuId = row.pkId
        daxtit.value = row.name
        getjkqx(row.pkId)
      }
      if(column.label == '菜单名称'){
        showpop(2,row)
      }
    }

    function getjkqx(id:string) {
      interlist.value.splice(0)
      getInter(id).then(rps => {
        if(rps.data){
          interlist.value = rps.data
        }
      })
    }

    function showInter(type:number,row?:any){
      if(interObj.menuId == ''){
        ElMessage({
            type: 'warning',
            message: '请先点击菜单'
        })
        return
      }
      interpop.value = true
      intertype.value = type
      intertit.value = type == 1?'新增接口权限':'修改接口权限'
      intetRef.value?.resetFields()
      if(row){
        interObj.code = row.code	                
        interObj.name = row.name	                
        interObj.uri = row.uri	                  
        interObj.requestType = row.requestType	  
        interObj.mark = row.mark	   
        interObj.pkId = row.pkId               
      }else{
        interObj.code = ''	                
        interObj.name = ''	                
        interObj.uri = ''	                  
        interObj.requestType = ''	  
        interObj.mark = ''	
        interObj.pkId = ''
      }
    }


      function intersavehand() {
        if(intertype.value == 1){
          return addInter(interObj) 
        }
        return updateInter(interObj)
      }
      //保存
      function interhandle() {
        intetRef.value?.validate((valid:Boolean) => {
            if (valid) {
              intersavehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                setTimeout(()=> {
                  getjkqx(interObj.menuId)
                  interpop.value = false
                },600)
            })
            }
        })
      }

    //取消
    function intercancel() {
      interpop.value = false
    }

    function delinter(row:any) {
      ElMessageBox.confirm(
        `确定删除权限：${row.name}`,
        '温馨提示',
        {
            type: 'warning',
        }
      ).then(() => {
        delInter(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getMenu()
          })
      })
    }

    getMenu()
  </script>
  <style scoped>
    .el-divider--horizontal{
      border-color:#5b98cd;
    }
  </style>