<template>
  <div class="table-form">
    <Form :model="detail"  :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
          <Form-item label="用户名" prop="username">
            <Input v-model="detail.username"  :disabled="disabled"></Input>
          </Form-item>
          <Form-item label="姓名" prop="name">
            <Input v-model="detail.name"  :disabled="disabled"></Input>
          </Form-item>
           <Form-item label="联系电话" prop="phone" >
           <Input v-model="detail.phone" :disabled="disabled"></Input>
           </Form-item>
            <Form-item label="角色" prop="phone" >
           <Input v-model="detail.roles"  type="textarea" :autosize="true" :disabled="disabled"></Input>
           </Form-item>
              <Form-item label="电子邮箱" prop="phone" >
           <Input v-model="detail.email" placeholder="请输入您的电子邮箱" :disabled="disabled"></Input>
           </Form-item>
              <Form-item label="备注" prop="phone" >
           <Input v-model="detail.remark"  type="textarea" :autosize="true" placeholder="" :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 UserDetailForm extends Vue {
   @Prop() private detail!:any;
   rules:any={};
   labelWidth:number =120;

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

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