<template>
  <!--添加弹窗-->
  <a-modal :title="add?'添加菜单':'修改菜单'" v-model="visible" @ok="handleOk" :maskClosable="false" destroyOnClose>
    <a-form-item label="上级菜单" >
      <treecheck ref="tree1" @select="contentSelect1" :createFun="selectMenuTreeList"></treecheck>
    </a-form-item>
    <a-form-item label="名称" >
      <a-input placeholder="请输入名称" v-model="modelData.name"></a-input>
    </a-form-item>
    <a-form-item label="请求地址" >
      <a-input placeholder="请输入请求地址" v-model="modelData.url"></a-input>
    </a-form-item>
    <a-form-item label="菜单编号" >
      <a-input placeholder="请输入菜单编号" v-model="modelData.code"></a-input>
    </a-form-item>
    <a-form-item label="接口标识" >
      <a-input placeholder="请输入接口标识" v-model="modelData.api"></a-input>
    </a-form-item>
    <a-form-item label="是否是菜单" >
      <a-radio-group v-model="modelData.ismenu">
        <a-radio value="1">是</a-radio>
        <a-radio value="0">不是</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="图标" >
      <a-input placeholder="请输入图标" v-model="modelData.icon">
          <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
      </a-input>
    </a-form-item>
    <a-form-item label="排序" >
      <a-input-number placeholder="请输入排序" v-model="modelData.num"></a-input-number>
    </a-form-item>
    <!-- 选择图标 -->
    <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
  </a-modal>

</template>
<script>
import Icons from '@/components/sysmanage/icon/Icons'
import { menuAdd, selectMenuTreeList, menuEdit,menuEdit2} from '@/api/system'
import treecheck from '@/components/sysmanage/treeCheck'
export default {
  name: 'meunReportModal',
  components:{
      Icons,
      treecheck
  },
  props: {},
  data() {
    return {
      selectMenuTreeList,
      modelData: {
        name: '',
        code: '',
        pcode: '',
        ismenu: '1',
        url: '',
        num: 0,
        icon: '',
        api: '',
        id: '',
        meunType:'' //这个参数后台不接收
      },
      add: true, //弹窗标题
      visible: false,
      iconChooseVisible:false
    }
  },
  methods: {
      //tree1下拉框选中事件
        contentSelect1(data) {

        this.modelData.pcode = data.id
        },
      handleIconChoose (value) {
        this.modelData.icon = value
        this.iconChooseVisible = false
      },
      handleIconCancel () {
        this.iconChooseVisible = false
      },
      showModal(type) {
        let that = this
        if (type === 'add') {
          that.add = true
          that.visible = true
          that.clearModal()
        } else {
          that.add = false
          that.visible = true
          menuEdit2({ 'menuId': type }).then(res => {
            let data = res.menu;
            that.modelData.name = data.name;
            that.modelData.code = data.code;
            that.modelData.pcode = data.pcode;
            that.modelData.ismenu = data.ismenu+"";
            that.modelData.url = data.url;
            that.modelData.num = data.num;
            that.modelData.icon = data.icon;
            that.modelData.api = data.api;
            that.modelData.id = data.id;
            that.$refs.tree1.setValue(data.pcode);
          })
        }
      },
      handleOk() {
        let that = this

        if (that.modelData.id == '') {
          menuAdd(that.modelData).then(() => {
            this.visible = false
            that.clearModal()
            that.$emit('ok')
          })
        } else {
          menuEdit(that.modelData).then(() => {
            this.visible = false
            that.clearModal()
            that.$emit('ok')

          })
        }

      },
      clearModal() {
        this.modelData.name = '';
        this.modelData.code = '';
        this.modelData.pcode = '';
        this.modelData.ismenu = '1';
        this.modelData.url = '';
        this.modelData.num = 0;
        this.modelData.icon = '';
        this.modelData.api = '';
        this.modelData.id = '';
        this.modelData.meunType = '';
      },
      selectIcons(){
        this.iconChooseVisible = true
      },
  }
}
</script>

