<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"/>
          </Form-item>
          <Form-item label="角色名称" prop="name" >
            <Input v-model="detail.name"  :disabled="disabled"/>
          </Form-item>
          <Form-item label="角色描述" prop="description" >
             <Input v-model="detail.description"  type="textarea" :autosize="true" :disabled="disabled"/>
          </Form-item>
          <Form-item label="角色菜单" prop="roleMenus" >
            <Input v-model="detail.roleMenus"  type="textarea" :autosize="true"  :disabled="disabled"/>
          </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 RoleDetailForm extends Vue {
   @Prop() private detail!:any;
   rules:any={};
   labelWidth:number =120;

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

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