<template>
  <!-- 新增弹窗 -->
  <a-modal
    v-model="show"
    title="新增超级管理员"
    :centered="true"
    footer=""
    :level="level"
    :userType="userType"
    :afterClose="afterClose"
  >
    <a-form-model
      :model="form"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      ref="addForm"
      :rules="addrules"
    >
      <a-form-model-item label="用户名" prop="name">
        <a-input
          v-model="form.name"
          placeholder="请输入6个字以内的用户名"
          style="width: 200px;"
        />
      </a-form-model-item>
      <a-form-model-item label="手机号" prop="tel">
        <a-input
          v-model="form.tel"
          :maxLength="11"
          placeholder="请输入手机号"
          style="width: 200px;"
        />
      </a-form-model-item>
      <a-form-model-item label="初始密码" prop="password">
        <a-input
          v-model="form.password"
          style="width: 200px;"
          placeholder="请输入初始密码"
        />
      </a-form-model-item>
      <a-form-model-item label="用户所在机构层级">
        <span class="text-sm text-black">超级管理员</span>
      </a-form-model-item>
      <a-form-model-item label="所属银行" prop="bank">
        <a-select
          v-model="form.bank"
          placeholder="输入所属银行"
          style="width: 200px;"
        >
          <a-select-option
            :value="item.code"
            v-for="item in bankCodeList"
            :key="item.code"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
        <a-button type="primary" @click="onConfirm">新增</a-button>
        <a-button style="margin-left: 10px;" @click="show = false">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script lang="ts">
import Vue from 'vue'
import { PropType } from 'vue'
import { FormModel, message, Switch } from 'ant-design-vue'
import { eLevel } from '@/types/level'
import { addUser } from './const'
import UserManagementService from '@/service/UserManagementService/index'
import { mapMutations, mapState } from 'vuex'

Vue.use(Switch)

export default Vue.extend({
  props: {
    level: {
      type: Number as PropType<eLevel>,
      default: 0,
    },
    userType: {
      type: Number as PropType<addUser>,
      default: addUser.normalManager,
    },
  },
  data() {
    const addrules = {
      name: [
        { required: true, message: '请输入名称,6个字以内', max: 6, trigger: 'blur' },
      ],
      tel: [
        { required: true, message: '请输入手机号', len: 11, trigger: 'blur' },
      ],
      bank: [{ required: true, message: '请输入所属银行', trigger: 'blur' }],
    }
    return {
      show: false,
      addrules,
      form: {
        name: '',
        tel: '',
        password: 'abc123456',
        bank: undefined as undefined | number,
      },
      bankCodeList: [] as {
        code: number
        name: string
      }[],
    }
  },
  async mounted() {
    if (this.userType === addUser.superManager) {
      const ret = await UserManagementService.getInstance().adminQueryBanks()
      if (ret.code === 200) {
        this.bankCodeList = ret.data.item
      }
    }
  },
  methods: {
    afterClose() {
      ;(this.$refs.addForm as FormModel).resetFields()
      this.form.password = 'abc123456'
    },
    showModal() {
      this.show = true
    },
    onConfirm() {
      ;(this.$refs.addForm as FormModel).validate(async (valid) => {
        if (valid) {
          this.show = false
          const ret = await UserManagementService.getInstance().adminCreateStaff(
            {
              bank_code: this.form.bank as number,
              password: this.form.password,
              phone: this.form.tel,
              user_name: this.form.name,
            },
          )
          if (ret && ret.code === 200) {
            message.success('新增成功')
            this.$store.dispatch('platformUserManagement/query')
          }
        } else {
          return false
        }
      })
    },
  },
})
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 5px;
}
</style>
