<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 />
        </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: {},
        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 () {
      if (this.userInfo) {
        this.getUserInfo(this.userInfo.id)
      }
      this.sexList = [
        {
          "name": "男",
          "value": "0",
        },
        {

          "name": "女",
          "value": "1",
        },

        {
          "name": "保密",
          "value": "2",

        }
      ]
    },
    methods: {
      getUserInfo (id) {
        getAction(`${api.users}/${id}`).then((res) => {
          if (res.status === 1) {
            this.form = res.content
          } 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: 0.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 #6bc1fc;
        }
      }
    }
    .bottom-wrapper {
      padding: 32px 120px 24px;
      text-align: right;
    }
  }
</style>