<template>
  <div class="app-container">
    <div class="info">
      <div class="title">用户信息</div>
      <el-form ref="form" :model="form" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="姓名">
              <el-input v-model="form.userRealName" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="form.userPhone" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="所属组织">
              <el-input v-model="form.orgName" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.userAddress" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="账号">
              <el-input v-model="form.userName" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <!-- <el-input v-model="form.userSex"></el-input> -->
              <el-select v-model="form.userSex" style="width:100%" :disabled="true">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="parseInt(item.value)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="form.userRoleName" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
      form: {
        userRealName: '',
        userSex: '',
        userPhone: '',
        orgName: '',
        userRoleName: '',
        userName: '',
        userAddress: ''
      },
      options:[
        { label: '男', value: '1' },
        { label: '女', value: '0' },
      ]
    }
  },
  created () {
    console.log(this.$route.params, 'query')
  },
  mounted () {
    this.form = this.$route.params.data
  },
  methods: {
    tableDataAdd () {
      // this.tableData.
    }
  }
}
</script>
<style lang='scss' scoped>
.info {
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  height: calc(100vh - 110px);
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
  }
  .el-form {
    margin-top: 15px;
    padding: 15px;
  }
}
.table {
  border-radius: 0.185185rem;
}
.th {
  height: 1.074074rem;
  line-height: 1.074074rem;
  background-color: #1d9eef;
  text-align: center;
  // border: 1px solid #000;
}
.list-tr {
  height: 1.074074rem;
  line-height: 1.074074rem;
  border: 1px solid #000;
}
td {
  text-align: center;
}
::v-deep .el-input__inner {
  text-align: center;
}
</style>
