<template>
  <div class="table-form">
    <Form :model="detail"  :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
         <Form-item label="菜单代码" prop="code" >
            <Input v-model="detail.code"  :disabled="disabled"></Input>
          </Form-item>
          <Form-item label="菜单名称" prop="name" >
            <Input v-model="detail.name" :disabled="disabled"></Input>
          </Form-item>
           <Form-item label="菜单序号" prop="sort" >
            <Input v-model="detail.sort" :disabled="disabled"></Input>
          </Form-item>
           <Form-item label="菜单图标" prop="description" >
           <Input v-model="detail.icon"  :disabled="disabled"></Input>
           </Form-item>
           <Form-item label="菜单链接" prop="description" >
           <Input v-model="detail.url"  :disabled="disabled"></Input>
           </Form-item>
           <Form-item label="菜单描述" prop="roleMenus" >
           <Input v-model="detail.description" type="textarea" :autosize="true" :disabled="disabled"></Input>
           </Form-item>
            <Form-item label="父级菜单" prop="parentId" >
            <Input v-model="detail.parentId" type="textarea" :autosize="true" :disabled="disabled"></Input>
           </Form-item>
        </Col>
      </Row>
     
      <Row class="buttonDiv">
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class MenuDetailForm extends Vue {
   @Prop() private detail!:any;
   rules:any={};
   labelWidth:number =120;

   @Emit('closeModal') close(){}
   cancel(){
       this.close();
   }

    get disabled(){
        return true;
    }
}
</script>