<template>
  <!--添加弹窗-->
  <a-modal :title="add?'添加菜单':'修改菜单'" v-model="visible" @ok="handleOk" :maskClosable="false">
    <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.componentName"></a-input>
    </a-form-item>
    <a-form-item label="组件" >
      <a-input placeholder="请输入请求组件地址" v-model="modelData.component"></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-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>
    <a-form-item label="上级菜单" >
      <treecheck ref="tree1" @select="contentSelect1" :createFun="selectMenuTreeList"></treecheck>
    </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: 'meunModal2',
  components:{
      Icons,
      treecheck
  },
  props: {},
  data() {
    return {
      selectMenuTreeList,
      modelData: {
        name: '',
        component:'/layouts/PageView',
        componentName:'',
        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() {
        let that = this
          that.add = true
          that.visible = true
          that.clearModal()
          this.$nextTick(()=>{
            that.$refs.tree1.setValue("0")
          })

      },
      handleOk() {
        let that = this

          menuAdd(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.component = '/layouts/PageView';
        this.modelData.componentName = '';
        this.modelData.meunType = '';
      },
      selectIcons(){
        this.iconChooseVisible = true
      },
  }
}
</script>

