<!-- 系统菜单的新增、编辑 duyf-->
 <template>
     <a-drawer
      :width="500"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      destroyOnClose
      :title="drawerTitele"
      @close="onClose">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="菜单类型：" name="menuType">
          <a-radio-group v-model:value="menuRadioType">
            <a-radio-button :value="1" @click="chanageMenuType">一级菜单</a-radio-button>
            <a-radio-button :value="2" @click="chanageMenuType">子菜单</a-radio-button>
            <a-radio-button :value="3" @click="chanageMenuType">按钮/权限</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="菜单名称：" name="menuName" v-if="menuNameIsshow">
          <a-input allowClear v-model:value="formState.menuName" maxlength="255" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item label="菜单编码：" name="menuCode" v-if="menuCodeIsshow">
          <a-input allowClear v-model:value="formState.menuCode" maxlength="64" placeholder="请输入菜单编码" />
        </a-form-item>
        <a-form-item label="按钮/权限：" name="perissionBtn" v-if="btnPermissIsshow">
          <a-input v-model:value="formState.perissionBtn" maxlength="255" placeholder="请输入按钮/权限" />
        </a-form-item>
        <a-form-item label="上级菜单：" name="previousMenu" v-if="preMenuIsshow">
          <a-tree-select
            v-model:value="formState.previousMenu"
            :tree-line="true"
            :tree-data="treeData"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="菜单路由：" name="routePath" v-if="menuRouteIsshow">
          <a-input v-model:value="formState.routePath" placeholder="请输入路由地址"/>
        </a-form-item>
        <!-- 前端组件 component-->
        <a-form-item label="前端组件：" name="menuJumpUrl" v-if="componentIsshow">
          <a-input v-model:value="formState.menuJumpUrl" placeholder="请输入前端组件"/>
        </a-form-item>
        <!-- 重定向路由 Redirect -->
        <a-form-item label="重定向路由：" name="menuRedirect" v-if="redirectIsshow">
          <a-input v-model:value="formState.menuRedirect" placeholder="请输入重定向路由"/>
        </a-form-item>

        <a-form-item label="菜单图标：" name="menuIcon" class="iconMenu">
          <a-input v-model:value="formState.menuIcon" placeholder="点击选择菜单图标" />
          <SlackOutlined @click="showIconMenu"/>
        </a-form-item>
        <a-form-item label="授权标识：" name="authorizationMark" v-if="authorMarkIsshow">
          <a-input v-model:value="formState.authorizationMark" placeholder="请输入授权标识" />
        </a-form-item>
        <a-form-item label="排序：" name="menuSort" v-if="sortIsshow">
          <a-input type="number" v-model:value="formState.menuSort" min="0" maxlength="7" placeholder="请输入排序号" />
        </a-form-item> 
        <a-form-item label="是否缓存" v-if="keepAliveIsshow">
          <a-switch v-model:checked="formState.keepAlive" />
        </a-form-item> 
        <a-form-item label="是否隐藏子级" v-if="hideChildrenIsshow">
          <a-switch v-model:checked="formState.hideChildren"/>
             
        </a-form-item>           
      </a-form>
      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </template>
    </a-drawer>

    <icon-picker :iconHandleOk="getSonData" ref="refIconPicker"></icon-picker>
</template>
<script lang="ts" setup>
  import { ref,toRaw,defineExpose,reactive,onBeforeUnmount} from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import type { TreeSelectProps } from 'ant-design-vue';
  import { SlackOutlined } from '@ant-design/icons-vue';
  import iconPicker from '../../../components/icon/IconPicker.vue';
  import { http } from '/nerv-lib/util';
  import { menuS } from '/@/api/menuSystem';
  import { NsMessage } from '/nerv-lib/component';
  const accountNo = sessionStorage.getItem('accountNo')?sessionStorage.getItem('accountNo'):'';
  const menuRadioType = ref(1);//菜单类型默认值
  const treeData = ref<TreeSelectProps['treeData']>([]);//存储菜单数据
  const addOrEditType = ref();//新增、编辑类型,区分调不同接口

  const drawerTitele = ref('');
  const formRef = ref();
  const visible = ref(false);
  const btnPermissIsshow = ref(false);//按钮权限是否显示
  const menuCodeIsshow = ref(true);//菜单编码是否显示
  const preMenuIsshow = ref(false);//上级菜单是否显示
  const authorMarkIsshow = ref(false);//授权标识是否显示
  const menuNameIsshow = ref(true);//菜单名称是否显示
  const sortIsshow = ref(true);//排序是否显示
  const menuRouteIsshow = ref(true);//菜单路由是否显示
  const refIconPicker = ref();
  const currentLineData = ref();//存储当前行的数据
  const componentIsshow = ref(false);//前端组件是否显示
  const redirectIsshow = ref(true);//重定向路由是否显示
  const keepAliveIsshow = ref(false);//缓存是否显示
  const hideChildrenIsshow = ref(false);//是否隐藏子级是否显示
  interface FormState {
    menuName: string;
    previousMenu:string;
    routePath:string;
    menuSort:string;
    perissionBtn:string;
    authorizationMark:string;
    menuIcon:string;
    menuCode:string;
    type:string;//菜单类型
    menuJumpUrl:string;
    menuRedirect:string;
    keepAlive:boolean;
    hideChildren:boolean
  }
  const formState = ref<FormState>({
    menuName:'',
    previousMenu:'',
    routePath:'',
    menuSort:'',
    perissionBtn:'',
    authorizationMark:'',
    menuIcon:'',
    menuCode:'',
    type:'',
    menuJumpUrl:'',
    menuRedirect:'',
    keepAlive:false,
    hideChildren:false
  })
  const labelCol = { span: 5 };
  const wrapperCol = { span: 19 };

  // 定义form表单的必填
  var rules: Record<string, Rule[]> = reactive({
    menuName: [{ required: true, message: '请输入菜单名称', trigger: 'change' }],
    menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'change' }],
    perissionBtn: [{ required: true, message: '请输入按钮/权限', trigger: 'change' }],
    previousMenu: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
    routePath:[{ required: true, message: '请输入菜单路由', trigger: 'change' }],
  });
  const emit = defineEmits(['editObject']);
  //是否缓存-开关
  // const clickSwitchKeepAlive = () => {
  //   if (formState.value.keepAlive === 1) {
  //     infoObject.value.enableRules = 0;
  //   } else {
  //     infoObject.value.enableRules = 1;
  //   }
  // };
  // 关闭新增抽屉
  const onClose = () => {
    visible.value = false;
    formRef.value.resetFields();
  };
  //菜单类型按钮切换
  const chanageMenuType = (e:any,typeMenu:any)=>{
    let currentType = null;
    if(e && e.target){
      currentType = e.target.value;
    }
    if(typeMenu){
      currentType = typeMenu;
    }
    menuRadioType.value = currentType;
    if(currentType==1){//一级菜单
      menuNameIsshow.value = true;
      btnPermissIsshow.value = false;
      preMenuIsshow.value = false;
      authorMarkIsshow.value = false;
      sortIsshow.value = true;
      menuCodeIsshow.value = true;
      menuRouteIsshow.value = true;
      componentIsshow.value = false;
      redirectIsshow.value = true;
      keepAliveIsshow.value = false;
      hideChildrenIsshow.value = false;
    }else if(currentType==2){//二级菜单
      menuNameIsshow.value = true;
      preMenuIsshow.value = true;
      btnPermissIsshow.value = false;
      authorMarkIsshow.value = false;
      sortIsshow.value = true;
      menuCodeIsshow.value = true;
      menuRouteIsshow.value = true;
      componentIsshow.value = true;
      redirectIsshow.value = true;
      keepAliveIsshow.value = true;
      hideChildrenIsshow.value = true;
    }else{//按钮
      menuNameIsshow.value = false;
      preMenuIsshow.value = true;
      btnPermissIsshow.value = true;
      authorMarkIsshow.value = true;
      sortIsshow.value = true;
      menuCodeIsshow.value = false;
      menuRouteIsshow.value = false;
      componentIsshow.value = false;
      redirectIsshow.value = false;
      keepAliveIsshow.value = false;
      hideChildrenIsshow.value = false;
    }
  }

    // 点击确定提交
    const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        
        //请求添加接口提交数据
        let params:any={
          pid:'root',
          code:formState.value.menuCode,
          label:formState.value.menuName,
          icon:formState.value.menuIcon,
          type:menuRadioType.value,
          sort:formState.value.menuSort,
          backApi:formState.value.routePath,
          projectId:null,
          updateUser:accountNo,
          redirect:formState.value.menuRedirect,
        }
        if(menuRadioType.value==3){
          params.code = formState.value.authorizationMark;
          params.pid = formState.value.previousMenu;//父级id
          params.label = formState.value.perissionBtn;
        }
        if(menuRadioType.value==2){
          // params.pid = currentLineData.value.code; //父级id 
          params.component = formState.value.menuJumpUrl;
          params.pid = formState.value.previousMenu;
          params.keepAlive = formState.value.keepAlive;
          params.hideChildren = formState.value.hideChildren;//是否隐藏子级
        }
        if(menuRadioType.value==1){
          params.pid = currentLineData.value?currentLineData.value.pid:"root";//一级菜单pid,传'root'
        }
        if(addOrEditType.value==1){//新增
          http.post(menuS.queryMenuPageAdd, params).then(() => {
            NsMessage.success('操作成功');
            visible.value = !visible.value;
            emit("editObject",formState)
          });
        }else{
          params.permissionId = currentLineData.value.permissionId;
          params.createTime = currentLineData.value.createTime;
          params.updateTime = currentLineData.value.updateTime;
          params.isDelete = currentLineData.value.isDelete;
          http.post(menuS.queryMenuPageEdit, params).then(() => {
            NsMessage.success('操作成功');
            visible.value = !visible.value;
            emit("editObject",formState)
          });
        }
      })
    }
    //获取菜单列表
    const getMenuList= ()=>{
        http.post(menuS.queryMenuPage, { label: '',projectId: null}).then((res) => {
        // treeData.value = res.data.records;
        treeData.value = res.data.records.map((item:any) => ({
          value: item.code,
          label: item.label,
          children: item.children ? item.children.map((child:any) => ({
              value: child.code,
              label:child.label,
              children: child.children ? child.children.map((childchild:any) => ({
                value: childchild.code,
                label:childchild.label,
                
            })) : []
          })) : []
        }));
      });
    }
    //展示icon图标集
    const showIconMenu = (data:any)=>{
      refIconPicker.value.isIconOpenToggle(formState.value.menuIcon);
      
    }
    const getSonData = (data:any) => {
      if(data){
        formState.value.menuIcon = data;
      }else{
        refIconPicker.value.isIconData();
      }
    }
    const toggle = (type:any,record:any)=>{
      currentLineData.value = record;
      visible.value = !visible.value;
      addOrEditType.value = type;
      if(type==1){//新增
        drawerTitele.value = '新增菜单';
        formState.value = {
        menuName:'',
        previousMenu:'',
        routePath:'',
        menuSort:'',
        perissionBtn:'',
        authorizationMark:'',
        menuIcon:'',
        menuCode:'',
        type:'',
        menuJumpUrl:'',
        menuRedirect:''
      };
      }else if(type==2){//编辑
        drawerTitele.value = '编辑菜单';
        if(record){
          formState.value.menuName = record.label;
          if(record.type==1||record.type==2){
            formState.value.menuCode = record.code;
          }
          if(record.type==3){
            formState.value.authorizationMark = record.code;
          }
          formState.value.menuSort = record.sort;
          formState.value.menuIcon = record.icon;
          formState.value.routePath = record.backApi;
          formState.value.type = record.type;
          formState.value.menuCode = record.code;
          formState.value.perissionBtn = record.label;
          formState.value.menuJumpUrl = record.component;
          formState.value.menuRedirect = record.redirect.name;

        }
        
      }
      //如果record有值，说明是编辑或者从有数据条目中点击新增编辑过来的
      if(record){
        if(type==1){
          formState.value.previousMenu = record.code;
        }else{
          if(record.type==1){
            formState.value.previousMenu = "";
          }
          if(record.type==2||record.type==3){
            formState.value.previousMenu = record.pid;
          }
        }
        if(record.type==1){//一级菜单
          if(type==1){//新增
            menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
            chanageMenuType(null,2);
          }else{//编辑
            menuRadioType.value = 1;
            chanageMenuType(null,1);
          }
        }else if(record.type==2){//子菜单
          if(type==1){
            menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
          }else{
            menuRadioType.value = 2;
          }
          chanageMenuType(null,2);
        }else if(record.type==3){//按钮
          if(type==1){
            menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
            chanageMenuType(null,2);
          }else{
            menuRadioType.value = 3;
            chanageMenuType(null,3);
          }
        }
      }else{
        menuRadioType.value = 1;
        chanageMenuType(null,1);
      }
    }
    defineExpose({
      toggle,
      getMenuList
    });

   

</script>
<style lang="less" scoped>
  .iconMenu :deep(.ant-form-item-control-input-content){
    display: flex;
    .ant-input{
      border-top-right-radius:0;
      border-bottom-right-radius:0;
    }
    .anticon{
      padding:7px 10px 0;
      border: 1px solid #d9d9d9;
      border-radius:4px;
      border-top-left-radius: 0;
      border-bottom-left-radius:0;
      cursor: pointer;
      border-left:0;
    }
  }
</style>