<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
         <Form-item label="菜单代码" prop="code" v-validate:code.required.maxInputLength="rules">
            <Input v-model="model.code" maxlength="10" show-word-limit placeholder="请输入菜单代码" :disabled="disabled"></Input>
          </Form-item>
          <Form-item label="菜单名称" prop="name" v-validate:name.required.maxInputLength="rules">
            <Input v-model="model.name" maxlength="20" show-word-limit  placeholder="请输入菜单名称" :disabled="disabled"></Input>
          </Form-item>
           <Form-item label="菜单序号" prop="sort" >
           <Input v-model="model.sort" maxlength="10" placeholder="请输入菜单序号" :disabled="disabled"></Input>
           </Form-item>
           <Form-item label="菜单图标" prop="icon" v-validate:icon.required.maxInputLength="rules">
           <Input v-model="model.icon" maxlength="20" show-word-limit placeholder="请输菜单图标" :disabled="disabled"></Input>
           </Form-item>
           <Form-item label="菜单链接" prop="url" v-validate:url.required.maxInputLength="rules">
           <Input v-model="model.url" maxlength="20" show-word-limit placeholder="请输入菜单链接" :disabled="disabled"></Input>
           </Form-item>
           <Form-item label="菜单描述" prop="description" >
           <Input v-model="model.description" type="textarea"  maxlength="200" show-word-limit :autosize="true" placeholder="请输入菜单描述" :disabled="disabled"></Input>
           </Form-item>
            <Form-item label="父级菜单" prop="roleMenus" >
           <div id="app">
               <treeselect v-model="model.parentId" :multiple="false" :options="options"  placeholder="请编辑父菜单..." disabled="false"/>
            </div>
           </Form-item>
        </Col>
      </Row>
     
      <Row class="buttonDiv">
        <Button :loading="loading"
          @click="submitForm(action)"
          type="primary"
          v-if="!(action == 'detail')"
        >确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
@Component({
  components: {
    Treeselect
  }
})
//  @Component
export default class MenuForm extends Vue {
  
    @Prop() private model!:any;
    @Prop(String) private action!:string;
    @Prop() private tableInfo!:any;
    @Prop() private tableVm!:any;
    
    loading : boolean = false;
    labelWidth:number =120;
    rules:any={};
    options: Array<any> = [];
    

    created(){
    }

    getOptions(){
       this.getApiData('post',this.$msPrefix.base+'/api/v1/data/list/menu?size=1000&page=0',{},res=>{
            if (res.rtnCode == 0) {
                 console.log('*****',res.data.content);
                 res.data.content.forEach(element => {
                      var pool: any = {
                           id:'',
                           label:''
                      };
                      pool.id = element.id;
                      pool.label = element.name;
                      this.options.push(pool); 
                 });
                  // console.log('****',this.options);
            }
        },err=>{
        });
    
    }

   isEmpty(obj){
     	return (typeof obj === 'undefined' || obj === null || obj === "");
  }

    data() {
      return {
        // define the default value
        value: null,
        // define options
      }
    }
    
    mounted(){
        this.getOptions();
    }
    save(){
      console.log("&&&&&&",this.model);
        this.getApiData('post',this.$msPrefix.base+'/api/v1/data/save/menu',this.model,res=>{
           this.loading=!1;
            if (res.rtnCode == 0) {
                this.tableVm.getData();
                this.cancel();
                this.$tools.message('success',(this.action == 'update'?'修改':'新增')+'成功！');
            }
        },err=>{
           this.loading=!1;
        })
    }
    /*提交*/
      submitForm (action) {
      	
        (this.$refs[action] as any).validate((valid) => {
          if (valid) {
          	if(!this.loading){
                this.loading=!0;
                this.save()
            }
          } else {
            this.$tools.message('info',"请完善必填项!")
           
          }
        });
      }

    @Emit('close-modal') close(){}
    cancel () {
        this.close();
        (this.$refs[this.action] as any).resetFields();
    }
    resetFields(){
        this.getOptions();
        (this.$refs[this.action] as any).resetFields();
    }
    get disabled(){
        return this.action=='detail'
    }
}
</script>

