<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="tb-title">
          <span>管理员设置</span><span style="color:red;"> ※ 若不填写用户名/密码，系统将自动生成，初始密码为证件号后六位（末位是字母为小写形式）</span>
        </div>
        <span style="color: rgb(56, 188, 213);clear:both"> ※ 密码由数字加字母组成，长度为6-10位</span>
      </a-col>
    </a-row>
    <a-row class="row_t">
      <a-col :span="4" class="bg-gray">
        <span style="color:red">*</span>
        姓名
      </a-col>
      <a-col :span="8" class="bg-gray">
        <span style="color:red">*</span>
        身份证号
      </a-col>
      <a-col :span="4" class="bg-gray">
        <span style="color:red">*</span>
        手机号
      </a-col>
      <a-col :span="3" class="bg-gray">
        用户名
      </a-col>
      <a-col :span="3" class="bg-gray">
        密码
      </a-col>
      <a-col :span="2" class="bg-gray">
        操作
      </a-col>
    </a-row>
    <a-row v-for="(member, index) in managers" :key="index" class="row_t" type="flex">
      <a-col :span="4">
        <div class="special-middle">
          <a-form-model-item :prop="'managers.' + index + '.personName'" :rules="rules.personName">
            <a-input v-model="member.personName" :maxLength="20" placeholder="姓名" />
          </a-form-model-item>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="special-middle">
          <a-form-model-item :prop="'managers.' + index + '.certId'" :rules="rules.certId">
            <a-input v-model="member.certId" :maxLength="20" placeholder="身份证号" />
          </a-form-model-item>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <a-form-model-item :prop="'managers.' + index + '.mobile'" :rules="rules.mobile">
            <a-input v-model="member.mobile" :maxLength="20" placeholder="手机号" />
          </a-form-model-item>
        </div>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'managers.' + index + '.username'" :rules="rules.username">
          <a-input v-model="member.username" :maxLength="20" placeholder="用户名" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'managers.' + index + '.password'" :rules="rules.password">
          <a-input v-model="member.password" :maxLength="20" placeholder="密码" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removemanagers(member)">
          <a-button type="link" size="small">删除</a-button>
        </a-popconfirm>
      </a-col>
    </a-row>
    <a-row v-if="managers && managers.length < 10" type="flex">
      <a-col :span="24" style="text-align: center;">
        <div class="special-middle">
          <a-button type="dashed" style="width: 20%" @click="addmanagers">
            <a-icon type="plus" /> 添加
          </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
//用法 <manager-group :managers.sync="formData.managers" />

import { isEmptyParams, checkPhone, checkEmail, checkIdentitytionId, personBirthday, personGender } from "@/views/utils/common"
import { isIdentityId } from '@/views/utils/validate'

const Member = {
  personName: null,
  certId: null,
  mobile: null,
  username: null,
  password: null,
}

export default {
  name: 'managerAdd',
  data () {
    return {
      rules: {
        personName: [
          { required: true, message: '*', trigger: 'blur' },
        ],
        certId: [
          { required: true, message: '*', trigger: 'blur' },
          { required: false, validator: checkIdentitytionId, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '*', trigger: 'blur' },
          { required: false, validator: checkPhone, trigger: 'blur' }
        ],
        username: [
          { required: false, message: '*', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              else {
                let pars = { username: value }
                this.$api.base.checkUser(pars).then(({ data = {} }) => {
                  if (data) {
                    callback(new Error("用户名已存在"));
                  } else
                    callback()
                })
              }
            }
          }
        ],
        password: [
          { required: false, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              let ckPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
              if (ckPwd.test(value)) {
                callback()
              } else {
                callback(new Error('密码格式错误，请检查！'));
              }
            }
          },
        ]
      }
    }
  },
  props: {
    managers: {
      type: Array,
      default: () => {
        return [{ ...Member }]
      }
    },
    objectID: {//项目id/任务书id
      type: String,
      require: false
    },
  },
  components: {

  },
  created () {

  },
  methods: {
    removemanagers (item) {//移除成员
      let index = this.managers.indexOf(item)
      if (index !== -1) {
        this.managers.splice(index, 1)
      }
    },
    addmanagers () {//添加成员
      this.managers.push({ ...Member })
    }
  }
}
</script>
<style lang="less" scoped>
.row_t {
  .ant-col {
    text-align: center;
  }
}
.ant-input {
  width: 80%;
}
</style>