<template>
  <div class="content">
    <div class="user-info">
      <el-form
        ref="form"
        label-width="100px"
        :model="form"
        class="form-wrapper"
        :rules="rules"
      >
        <el-form-item label="用户名:" required>
          <el-input v-model="form.loginName" clearable disabled />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio-group v-model="form.sex">
            <el-radio
              v-for="(item, index) in sexList"
              :key="index"
              :label="item.value"
            >{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model="form.idCard" clearable />
        </el-form-item>
        <el-form-item label="手机号码:" prop="mobilePhone">
          <el-input v-model="form.mobilePhone" clearable type="number" />
        </el-form-item>
        <el-form-item label="办公电话:">
          <el-input v-model="form.telephone" clearable />
        </el-form-item>
        <el-form-item label="办公地址:">
          <el-input v-model="form.address" clearable />
        </el-form-item>
      </el-form>
      <div class="bottom-wrapper">
        <el-button type="primary" @click="updateInfo">更新信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { api, getAction, putAction, getDictItems } from '@api/manageApi'
export default {
  props: {
    // userInfo: {
    //   type: Object,
    //   default: null
    // }
  },
  data() {
    return {
      form: {
    "id": "3127e455-43ba-45ff-9326-0e02ef89485e",
    "name": "超级管理员",
    "sort": 1,
    "loginName": "admin",
    "email": null,
    "lastLoginTime": null,
    "mobilePhone": "18291003568",
    "isLocked": false,
    "status": "ACTIVE",
    "passwordChangeTime": "2021-12-10T08:01:01.569+0000",
    "idCard": "612725202111021521",
    "departmentId": "2eae5304-544f-4f5b-b354-8f5d47433c9b",
    "departmentName": null,
    "organizationId": "0bca67ae-1d9e-4b41-b057-f165586d24aa",
    "sex": "0",
    "isDuty": true,
    "code": "123324",
    "jobLevel": null,
    "telephone": "028-87720898",
    "address": "办公地点修改测试"
},
      sexList: [],
      rules: {
        mobilePhone: [
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号码格式有误',
            trigger: 'blur'
          }
        ],
        idCard: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '身份证号格式有误',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    // userInfo: {
    //   handler: function(val) {
    //     if (val) {
    //       this.getUserInfo(val.id)
    //     }
    //   }
    // }
  },
  mounted() {
    // getDictItems('XB').then((res) => {
    //   if (res.status === 1) {
        this.sexList = [
    {
        "id": "079c72b2-f3de-4a4f-b2a1-e5c8f085cc5f",
        "createdAt": "2021-06-11T02:42:02.000+0000",
        "updatedAt": "2021-09-03T09:21:46.000+0000",
        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "sort": 2,
        "name": "男",
        "description": "",
        "code": "N362",
        "value": "0",
        "parentId": null,
        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
        "version": 1,
        "valid": true,
        "standard": false,
        "standardName": null,
        "standardValue": null,
        "children": [],
        "commonName": "男(N362)"
    },
    {
        "id": "4d6f845d-6f6a-4848-8fc2-a3760764c196",
        "createdAt": "2021-06-11T02:42:12.000+0000",
        "updatedAt": "2021-09-03T09:21:46.000+0000",
        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "sort": 1,
        "name": "女",
        "description": "",
        "code": "N922",
        "value": "1",
        "parentId": null,
        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
        "version": 1,
        "valid": true,
        "standard": false,
        "standardName": null,
        "standardValue": null,
        "children": [],
        "commonName": "女(N922)"
    },
    {
        "id": "637c360b-d4e2-4afb-aa18-33624cf3abcb",
        "createdAt": "2021-06-11T02:42:29.000+0000",
        "updatedAt": "2021-09-03T09:21:43.000+0000",
        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
        "sort": 0,
        "name": "保密",
        "description": "",
        "code": "BM816",
        "value": "2",
        "parentId": null,
        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
        "version": 1,
        "valid": true,
        "standard": false,
        "standardName": null,
        "standardValue": null,
        "children": [],
        "commonName": "保密(BM816)"
    }
]
    //   } else {
    //     this.$message.error({ message: res.message, showClose: true })
    //   }
    // })
  },
  methods: {
    // getUserInfo(id) {
    //   getAction(`${api.users}/${id}`).then((res) => {
    //     if (res.status === 1) {

    //     } else {
    //       this.$message.error({ message: res.message, showClose: true })
    //     }
    //   })
    // },
    // 更新信息
    updateInfo() {
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     putAction(`${api.users}/${this.form.id}`, this.form).then((res) => {
      //       if (res.status === 1) {
      //         this.$message.success({ message: res.message, showClose: true })
      //         this.getUserInfo(this.form.id)
      //       } else {
      //         this.$message.error({ message: res.message, showClose: true })
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.user-info {
  margin: .1875rem 1.0417rem;
  background: #ffffff;
  max-height: 90%;
  overflow-y: auto;
  .form-wrapper {
    padding: 24px 120px 0px;
    .el-form-item {
      margin-bottom: 24px;
      .el-form-item__label {
        color: #747e8c;
      }
      ::v-deep .el-input .el-input__inner {
        padding: 0 8px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #dfe7f3;
      }
    }
  }
  .bottom-wrapper {
    padding: 32px 120px 24px;
    text-align: right;
  }
}
</style>