<!--
  @description: 采购计划-多值查询
  @author: lxl
  @date： 2020-11-02 14:32
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="moreSearchDialogData.dialogVisible"
    :before-close="handleCloseDialog"
    :close-on-click-modal="false"
    :lock-scroll="false"
    append-to-body
    title="多值查询"
    width="800px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div class="main mb10">
      <el-input
        v-model="pasteVal"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20}"
        placeholder="请按Ctrl+V或鼠标右键粘贴内容"
        @blur="onBlur"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onEnter">
        确 定
      </el-button>
      <el-button data-clipboard-text="paste" @click="onClear">
        清 空
      </el-button>
      <el-button @click="handleCloseDialog">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>
<script>

export default {
  name: 'MoreSearchDialog',
  components: {
  },
  props: {
    moreSearchDialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          attr: ''
        }
      }
    }
  },
  data() {
    return {
      pasteVal: '',
      arr: []
    }
  },
  watch: {
    'moreSearchDialogData.dialogVisible'(val) {
      if (val) {
        this.onClear()
      }
    }
  },
  methods: {
    onBlur() {
      this.arr = []
      this.pasteVal = this.pasteVal + '\n'
      const textarr = this.pasteVal.split('\n') // 以转行符切割文本字符串
      textarr.forEach((item) => {
        if (item && !this.arr.includes(item)) {
          this.arr.push(item)
        }
      })
    },
    // 确认
    onEnter() {
      this.pasteVal = [...new Set(this.arr)].join(',')
      this.$emit('onMoreSearch', { attr: this.moreSearchDialogData.attr, value: this.pasteVal })
      this.handleCloseDialog()
    },
    onClear() {
      this.pasteVal = ''
      this.arr = []
    },
    // 关闭弹框
    handleCloseDialog() {
      this.onClear()
      this.moreSearchDialogData.dialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
</style>
