<template>
  <div>
    <a-spin :spinning="loading" style="width:100%;height:100%;">
      <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
        <a-row>
          <a-col :span="4" class="bg-gray">
            证件号
          </a-col>
          <a-col :span="20">
            {{formData.certId}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            姓名
          </a-col>
          <a-col :span="20">
            {{formData.personName}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            性别
          </a-col>
          <a-col :span="20">
            {{formData.sex}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            出生日期
          </a-col>
          <a-col :span="20">
            {{formData.birthday}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            工作单位
          </a-col>
          <a-col :span="20">
            {{formData.unitName}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">用户名</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="username" prop="username">
              <a-input v-model="formData.username" @blur="() => {$refs.username.onFieldBlur(); }" style="width: 250px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">密码</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="password" prop="password">
              <a-input v-model="formData.password" @blur="() => {$refs.password.onFieldBlur(); }" style="width: 250px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">系统角色</div>
            </div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="roles" prop="roles">
              <a-checkbox-group v-model="formData.role" name="checkboxgroup" :options="options" @change="onCheckChange" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align:center;">
            <a-button type="primary" style="margin-right:50px;" @click="submit">保存</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>
<script>
import { isEmptyParams } from "@/views/utils/common"
import moment from 'moment'

export default {
  name: "userEdit",
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  data () {
    return {
      formData: { id: null, certId: '', personName: '', sex: '', birthday: null, unitName: '', username: '', password: '', personId: null, noteState: null, role: [] },
      options: [
        { label: '最高级行政管理员', value: '0' },
        { label: '行政管理员', value: '1' },
        { label: '单位管理员', value: '2' },
        { label: '申报用户', value: '3' },
        { label: '超级管理员', value: '4' },
        { label: '专家', value: '5' },
      ],
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value == '' || value == undefined) {
              callback()
            }
            let pars = { username: this.formData.username, id: this.formData.id }
            this.$api.base.checkUserNameById(pars).then(({ data = {} }) => {
              if (data) {
                callback(new Error("用户名已存在"));
              } else
                callback()
            })
          },
        }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }],
      },
      loading: false,
    };
  },
  created () {
    this.getSystemUserById()
  },
  methods: {
    moment,
    getSystemUserById () {
      this.loading = true
      this.$api.systemUser.getSystemUserById({ id: this.value }).then(({ data = {} }) => {
        if (data) {
          this.formData = data
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    onCheckChange () {

    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formData.role.length > 0) {
            this.loading = true
            let pars = isEmptyParams(this.formData)
            let par = { ...pars }
            this.$api.systemUser.updateSystemUser(par).then(({ data = {} }) => {
              if (data) {
                this.$message.success('提交成功！')
                this.$emit('close', 'edit')
              }
              this.loading = false
            }).catch(() => { this.loading = false })
          } else {
            this.$message.error('请选择角色!')
          }
        } else {
          this.$message.info('信息未填写完整!')
          return false
        }
      })
    }
  }
};
</script>