<template>
  <a-modal :confirmLoading="loading" :visible="visible" :title="title" @cancel="visible=false" @ok="handleSubmit">
    <a-form-model ref="form" :model="form">
      <a-form-model-item v-bind="layout" label="黑名单类型">
        <a-select v-model="form.type" :disabled="type==='edit'" @change="handelChange">
          <a-select-option key="identity" value="identity">身份证</a-select-option>
          <a-select-option key="phone" value="phone">手机号</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        v-if="form.type==='identity'"
        v-bind="layout"
        label="身份证号"
        prop="identity"
        :rules="{
          required: true,
          validator:verifyIdRequire,
          trigger: ['blur','change']
        }">
        <a-input allowClear v-model="form.identity" :disabled="type==='edit'"></a-input>
      </a-form-model-item>

      <a-form-model-item
        v-else
        v-bind="layout"
        label="手机号"
        prop="phone"
        :rules="{
          required: true,
          validator:verifyPhoneRequire,
          trigger: ['blur','change']
        }"
      >
        <a-input allowClear v-model="form.phone" :disabled="type==='edit'"></a-input>
      </a-form-model-item>

      <a-form-model-item
        v-bind="layout"
        label="备注"
        prop="description"
      >
        <a-textarea allowClear v-model="form.description" :rows="4"></a-textarea >
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addId, addPhone, updateId, updatePhone } from '@/api/blacklist'
import { verifyPhoneRequire, verifyIdRequire } from '@/utils/validator'

export default {
  computed: {
    title () {
      return `${this.type === 'add' ? '新增' : '编辑'} 黑名单`
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      type: 'add',
      form: {
        phone: '',
        identity: '',
        description: '',
        type: 'identity'
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    }
  },
  methods: {
    verifyIdRequire,
    verifyPhoneRequire,
    show ({ blacklistType, record }) {
      this.visible = true

      this.type = record ? 'edit' : 'add'

      this.form.type = blacklistType

      this.$nextTick(() => {
        this.$refs.form.resetFields()

        if (record) {
          this.form.id = record.id
          this.form[blacklistType] = record[blacklistType]
          this.form.description = record.description
        }
      })
    },
    handelChange () {
      this.form[this.form.type] = ''
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) return

        this.loading = true

        switch (this.form.type) {
          case 'identity':
            this.type === 'add' ? this.addId() : this.updateId()
            break
          case 'phone':
            this.type === 'add' ? this.addPhone() : this.updatePhone()
            break
        }
      })
    },
    addId () {
      addId(this.form).then(res => {
        this.$message.success('添加成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    },
    addPhone () {
      addPhone(this.form).then(res => {
        this.$message.success('添加成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    },
    updateId () {
      updateId(this.form).then(res => {
        this.$message.success('操作成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    },
    updatePhone () {
      updatePhone(this.form).then(res => {
        this.$message.success('操作成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
