<script setup lang="ts">
// 菜单详情
import {computed, ref} from "vue";
import {FormatterUtils} from "@/utils/FormatterUtils.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import MenuApi from "@/api/menu.ts";
import type {AppServeResponse} from "@/interface/api/AppServeResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import StringUtils from "@/utils/StringUtils.ts";
import type {IBaseMenuPermissionVo} from "@/model/table/IBaseMenuPermissionVo.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import AppPermission from "@/components/manage/AppPermission.vue";
import {menuStore} from "@/stores/menu.ts";

const menuStoreInstance = menuStore();
const modelValue = defineModel('modelValue', {required: true, default: false});
const props = defineProps(['formData']);
const emit = defineEmits(['reLoadingTableData']);
const close = () => {
  modelValue.value = false;
}
const formData = computed(() => props.formData);
const permissionList = ref<IBaseMenuPermissionVo[]>([]); // 子权限列表
const addPermissionData = ref<IBaseMenuPermissionVo>({}); // 新增子权限数据
// 检查是不是一级菜单
const isFirstMenu = computed(() => {
  return formData.value.menuLevel == 1;
})

// 打开时
const open = () => {
  resetPermission();
  queryMenuPermission();
}
// 重置子权限输入
const resetPermission = () => {
  addPermissionData.value.permissionId = formData.value.routerName + ":";
  addPermissionData.value.permissionName = "";
}

// 删除菜单
const deleteMenu = () => {
  MessageUtils.confirmMessageBox('你确定要删除这个菜单？删除后不可恢复！', '删除二次确认').then(() => {
    const loading = MessageUtils.loading("正在删除");
    MenuApi.deleteWithMenuId(formData.value.menuId).then(res => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("删除成功");
        emit('reLoadingTableData');
        close();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loading.close();
    })
  }).catch(() => {});
}
// 保存修改
const save = () => {
  MessageUtils.confirmMessageBox('确定更新为新数据？', '更新二次确认').then(() => {
    const loading = MessageUtils.loading("正在请求服务器");
    MenuApi.updateMenu(formData.value).then(res => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("更新成功");
        emit('reLoadingTableData');
        close();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loading.close();
    })
  }).catch(() => {});
}
// 查询子权限
const queryMenuPermission = () => {
  if(!menuStoreInstance.checkOperationPermission('menuManage:permission')) {
    return;
  }
  if(isFirstMenu.value) {
    return; // 一级菜单不查询
  }
  const loading = MessageUtils.loading("正在请求服务器");
  MenuApi.queryMenuPermission(formData.value.menuId).then(res => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBaseMenuPermissionVo[]>;
    if(response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      permissionList.value = response.data;
      MessageUtils.successMessage('查询成功');
      return;
    }
    MessageUtils.warningMessageBox(response.msg, '警告');
  }).catch(() => {}).finally(() => {
    loading.close();
  })
}
// 新增子权限
const addMenuPermission = () => {
  MessageUtils.confirmMessageBox('确定添加上述数据？','添加确认').then(()=>{
    const loading = MessageUtils.loading();
    addPermissionData.value.menuId = formData.value.menuId;
    MenuApi.addMenuPermission(addPermissionData.value).then(res => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("添加成功");
        queryMenuPermission();
        resetPermission();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loading.close();
    })
  }).catch(()=>{});
}
// 删除子权限
const deleteMenuPermission = (row: any) => {
  MessageUtils.confirmMessageBox('确定要删除这个子权限吗？','删除二次确认').then(()=>{
    const loading = MessageUtils.loading();
    MenuApi.deleteMenuPermission(row.permissionId).then(res => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("删除成功");
        queryMenuPermission();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loading.close();
    })

  }).catch(()=>{});
}

</script>

<template>
  <div>
    <el-drawer direction="btt" size="70%" :model-value="modelValue" title="菜单详细信息" @close="close" :close-on-click-modal="false" @open="open">
      <el-scrollbar style="height:50vh">
        <el-row>
          <el-col :span="10">
            <el-form :model="formData" label-position="right" label-width="100px" require-asterisk-position="right">
              <el-form-item label="菜单ID:" required>
                <el-text>{{formData.menuId}}</el-text>
              </el-form-item>
              <el-form-item label="菜单名称:" required>
                <el-input v-model="formData.menuName" placeholder="请填写菜单名称"></el-input>
              </el-form-item>
              <el-form-item label="菜单级别:" required>
                <el-select v-model="formData.menuLevel" placeholder="请选择菜单级别" disabled clearable>
                  <el-option :key="1" label="一级菜单" :value="1"/>
                  <el-option :key="2" label="二级菜单" :value="2"/>
                </el-select>
              </el-form-item>
              <el-form-item label="上级菜单ID:">
                <el-input v-model="formData.fatherMenuId" placeholder="请填写上级菜单ID"></el-input>
              </el-form-item>
              <el-form-item label="菜单状态:" required>
                <el-switch v-model="formData.menuStatus" inline-prompt active-text="启用" :active-value="1" inactive-text="停用" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="菜单图标:">
                <el-input v-model="formData.menuIco" placeholder="请填写图标名称，仅限element-plus自带图标"></el-input>
              </el-form-item>
              <el-form-item label="菜单路由名称:">
                <el-input v-model="formData.routerName" placeholder="请填写菜单路由名称" :disabled="isFirstMenu"></el-input>
              </el-form-item>
              <el-form-item label="菜单创建时间:">
                <el-text>{{FormatterUtils.formatTime(formData.createTime)}}</el-text>
              </el-form-item>
              <el-form-item label="上次修改时间:">
                <el-text>{{FormatterUtils.formatTime(formData.updateTime)}}</el-text>
              </el-form-item>
            </el-form>
          </el-col>
          <app-permission permission="menuManage:permission">
            <el-col :span="13" :offset="1" v-if="!isFirstMenu">
              <h3 style="margin-bottom: 10px; font-weight: bolder">子权限编辑新增</h3>
              <el-form label-position="left" label-width="100px" require-asterisk-position="right">
                <el-form-item label="权限ID:" required>
                  <el-input v-model="addPermissionData.permissionId" placeholder="请填写权限ID"></el-input>
                </el-form-item>
                <el-form-item label="权限名称:" required>
                  <el-input v-model="addPermissionData.permissionName" placeholder="请填写权限名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="queryMenuPermission">查询</el-button>
                  <el-button type="warning" @click="addMenuPermission" >添加</el-button>
                </el-form-item>
              </el-form>
              <el-table :data="permissionList" stripe border style="width: 100%" height="300px">
                <el-table-column type="index" width="80" label="序号" align="center" show-overflow-tooltip/>
                <el-table-column prop="permissionId" label="权限ID" align="center" show-overflow-tooltip />
                <el-table-column prop="permissionName" label="权限名称" align="center" show-overflow-tooltip/>
                <el-table-column label="操作" width="80" align="center">
                  <template #default="scope">
                    <el-button-group>
                      <el-button size="small" type="danger" @click="deleteMenuPermission(scope.row)">删除</el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </app-permission>
        </el-row>
      </el-scrollbar>
      <template #footer>
        <el-button-group>
          <app-permission permission="menuManage:delete"><el-button type="warning" @click="deleteMenu">删除菜单(!)</el-button></app-permission>
          <app-permission permission="menuManage:edit"><el-button type="primary" @click="save">保存修改</el-button></app-permission>
          <el-button type="danger" @click="close">关闭窗口</el-button>
        </el-button-group>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>

</style>