<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="办公电话:" prop="telephone">
          <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",
          },
        ],
        telephone: [
          {
            pattern: /\d{3}-\d{8}|\d{4}-\d{7}/,
            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: 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>