<template>
  <a-modal
    width="1000px"
    :confirmLoading="loading"
    :visible="visible"
    :title="title"
    @cancel="handleClose"
    @ok="handleSubmit">
    <a-form-model ref="form" :model="form">
      <a-form-model-item
        v-bind="layout"
        label="名称"
        prop="name"
        :rules="{
          required: true,message:'请输入名称'
        }"
      >
        <a-input allowClear v-model="form.name"></a-input>
      </a-form-model-item>

      <a-form-model-item
        v-bind="layout"
        label="绑定身份证"
        prop="greyList_identities"
      >
        <ul>
          <li class="form-list-item" v-for="(item,index) in form.greyList_identities" :key="index">
            <a-input v-model="item.identityPrefix" placeholder="请输入身份证前缀"></a-input>
            <a-input v-model="item.remark" maxLength="16" style="margin-left:10px" placeholder="请输入备注"></a-input>
            <a-select v-model="item.identityGreyListId" style="margin-left:10px" placeholder="请选择提示">
              <a-select-option v-for="(v,idx) in greyInfoList" :value="v.id" :key="idx">
                {{ v.name }}
              </a-select-option>
            </a-select>

            <a-icon
              v-if="form.greyList_identities.length > 1"
              class="delete-button"
              type="minus-circle-o"
              :disabled="form.greyList_identities.length === 1"
              @click="form.greyList_identities.splice(index,1)"
            />
          </li>
          <li>
            <a-button block size="small" type="dashed" @click="handleAdd">新增</a-button>
          </li>
        </ul>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addGreyList, updateGreyList } from '@/api/greylist'
import { verifyPhoneRequire, verifyIdRequire } from '@/utils/validator'

export default {
  props: {
    greyInfoList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    title () {
      return `${this.type === 'add' ? '新增' : '编辑'} 灰名单`
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      type: 'add',
      form: {
        name: '',
        greyList_identities: [{ identityPrefix: '', identityGreyListId: undefined, remark: '' }]
      },
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 17 }
      }
    }
  },
  methods: {
    verifyIdRequire,
    verifyPhoneRequire,
    show (record) {
      this.visible = true

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

      this.form = record ? JSON.parse(JSON.stringify(record)) : {
        name: '',
        greyList_identities: [{ identityPrefix: '', identityGreyListId: undefined, remark: '' }]
      }
    },
    handleAdd () {
      this.form.greyList_identities.push({ identityPrefix: '', identityGreyListId: undefined, remark: '' })
    },
    handleClose () {
      this.$refs.form.clearValidate()
      this.visible = false
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) return

        if (this.form.greyList_identities.some(i => !i.identityPrefix || !i.identityGreyListId)) {
          return this.$message.error('信息不完整，请完善内容')
        }

        this.loading = true

        const action = this.type === 'add' ? addGreyList : updateGreyList

        action(this.form).then(res => {
          this.$message.success('操作成功')
          this.visible = false
          this.$emit('update')
        }).finally(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-list-item{
  display: flex; margin-bottom: 5px; position: relative;
  .delete-button{
    position: absolute; right: -20px; top: 8px;
  }
}
</style>
