<template lang="">
  <div>
    <a-tag
      :key="tagIdx"
      v-for="(tag,tagIdx) in greylistIdentities"
      :disable-transitions="false"
    >
      {{ tag.identityPrefix }} - {{ tag.grayName }}

      <a-icon type="close" @click="handleClose(tag)"/>
    </a-tag>
    <div>
      <a-input
        v-if="greylistIdentities.inputVisible"
        style="width:180px"
        type="text"
        class="input-new-tag"
        placeholder="身份证前缀，2~6位数字，多个请用“/”隔开"
        v-model="greyValue.identityPrefix"
        ref="greylistIdentitiesInput"
        size="small"
      ></a-input>
      <a-select
        v-if="greylistIdentities.inputVisible"
        style="width:150px"
        placeholder="请选择灰名单提示"
        v-model="greyValue.identityGreyListId"
      >
        <a-select-option
          v-for="(i,index) in greyList"
          :value="i.id"
          :key="index"
        >
          {{ i.name }}
        </a-select-option>
      </a-select>

      <a-button v-if="greylistIdentities.inputVisible" type="primary" size="small" @click="handleGreyInputConfirm('greylistIdentities')">确定</a-button>

      <a-button v-else type="primary" size="small" @click="showInput('greylistIdentities')">添加</a-button>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    greyList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    greyListMap () {
      // 生成灰名单id对象
      const greyListMap = {}
      this.greyList.forEach(i => {
        greyListMap[i.id] = i
      })
      return greyListMap
    }
  },
  data () {
    return {
      greyValue: {
        grayName: '',
        identityGreyListId: undefined,
        identityPrefix: ''
      },
      greylistIdentities: []
    }
  },
  watch: {
    value: {
      handler (val) {
        this.greylistIdentities = JSON.parse(JSON.stringify(val))
      },
      immediate: true
    }
  },
  methods: {
    showInput (prop) {
      this.$set(this[prop], 'inputVisible', true)

      this.$nextTick(_ => {
        this.$refs[`${prop}Input`].$refs.input.focus()
      })
    },
    handleGreyInputConfirm (prop) {
      console.log('greyValue', this.greyValue)
      if (this.greyValue.identityGreyListId && this.greyValue.identityPrefix) {
        const newItems = this.greyValue.identityPrefix.split('/').filter(Boolean).map(item => {
          return {
            identityPrefix: item,
            identityGreyListId: this.greyValue.identityGreyListId,
            grayName: this.greyListMap[this.greyValue.identityGreyListId].name.trim()
          }
        })

        newItems.forEach(item => {
          // 是否重复
          if (!this.greylistIdentities.some(i => (i.identityPrefix === item.identityPrefix))) {
            this.greylistIdentities.push(item)
          }
        })
      }
      this[prop].inputVisible = false

      this.greyValue = {
        grayName: '',
        identityGreyListId: undefined,
        identityPrefix: ''
      }

      this.$emit('input', this.greylistIdentities)
    },
    handleClose (tag) {
      const tagIdx = this.greylistIdentities.findIndex(i => i.identityPrefix === tag.identityPrefix)
      this.greylistIdentities.splice(tagIdx, 1)

      this.$emit('input', this.greylistIdentities)
    }
  }
}
</script>
<style lang="">

</style>
