<template>
  <div>
    <a-form-model
      v-show="inited"
      ref="userForm"
      :model="userform"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      :rules="rules"
    >
      <a-form-model-item v-for="item in colums" :key="item.id" :label="item.title" :prop="item.id">
        <a-input
          v-model="userform[item.id]"
          :disabled="item.disabled ? true : false"
          :type="item.type ? item.type : ''"
        />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button
          :class="$style.buttonclass"
          type="primary"
          :loading="isSubmitting"
          @click="handleSubmitUserinfo"
        >
          确定
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <div :class="$style.loading">
      <a-spin v-if="!inited" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Message } from 'ant-design-vue'
import components from './_import-components/sd-user-info-import'
import PersonalCenterService from './personal-center-service'
Vue.use(Message)
const duration = 1
const colums = [
  {
    title: '账号',
    id: 'account',
    disabled: true,
  },
  {
    title: '姓名',
    id: 'name',
    disabled: true,
  },
  {
    title: '所在部门',
    id: 'parentPathName',
    disabled: true,
  },
  {
    title: '兼职部门',
    id: 'adjunctPathNames',
    disabled: true,
  },
  {
    title: '座机电话',
    id: 'phone',
  },
  {
    title: '手机',
    id: 'mobile',
  },
  {
    title: '电子邮件',
    id: 'email',
  },
  {
    title: '地址',
    id: 'room',
  },
  {
    title: '备注信息',
    id: 'description',
    type: 'textarea',
  },
]
export default {
  name: 'SdUserInfo',
  components,
  props: {
    userinfoAccount: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      colums,
      inited: false,
      isSubmitting: false,
      userform: {},
      rules: {
        phone: [
          {
            pattern: '^(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{7,14}$',
            message: '请输入正确的座机电话',
            trigger: 'change',
          },
        ],
        mobile: [
          {
            pattern: '^[1]([3-9])[0-9]{9}$',
            message: '请输入正确的手机号码',
            trigger: 'change',
          },
        ],
        idcard: [
          {
            pattern: '(^\\d{15}$)|(^\\d{17}([0-9]|X)$)',
            message: '请输入正确的身份证（数字或数字+大写字母X）',
            trigger: 'change',
          },
        ],
        room: [{ max: 50, message: '限制50字以内', trigger: 'change' }],
        description: [{ max: 200, message: '限制200字以内', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.getAccountInfo()
  },
  methods: {
    getAccountInfo() {
      // 获取登录用户的账户信息
      PersonalCenterService.getAccountInfos(this.userinfoAccount).then((res) => {
        const userform = {}
        this.colums.forEach((item) => {
          userform[item.id] = res[item.id]
        })
        this.userform = userform
        this.inited = true
      })
    },
    handleSubmitUserinfo() {
      // 用户信息设置提交
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.isSubmitting = true
          const key = Symbol.for()
          Message.loading({ content: '处理中...', key })
          // 调用接口提交数据
          this.userform.props = undefined
          PersonalCenterService.updateAccountInfo(this.userform).then(
            (_) => {
              Message.success({ content: '保存成功', key, duration })
              this.isSubmitting = false
              // 更新数据
              this.getAccountInfo()
            },
            (_) => {
              Message.error({ content: '保存失败', key, duration })
              this.isSubmitting = false
            }
          )
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.loading {
  position: fixed;
  top: 310px;
  left: 50%;
  text-align: center;
}
.buttonclass {
  float: right;
}
</style>
