<template>
  <el-tooltip v-model="openNumbersInput" effect="light" :manual="true">
    <div slot="content" :style="{ width: contentWidth }">
      <el-input ref="inputMultiCodesRef" v-model="inputMultiCodes" type="textarea" rows="7" placeholder="请输入单号，每行一个" />
      <div style="text-align: right; padding: 5px">
        <el-button size="mini" @click="openNumbersInput = false">关闭</el-button>
        <el-button size="mini" type="danger" @click="clearInputMultiCodes">清除</el-button>
        <el-button size="mini" type="success" @click="confirmMultiCodes">确定</el-button>
      </div>
    </div>
    <el-input v-model="numbers" clearable @focus="openNumbersInputPannel" @clear="hanleClear"/>
  </el-tooltip>
</template>
<script>
import { format } from '@/utils/multiInput'

export default {
  name: 'MultipleNumber',
  props: {
    contentWidth: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      inputMultiCodes: '',
      openNumbersInput: false,
      numbers: ''
    }
  },
  watch: {
    openNumbersInput(val) {
      if (val) {
        this.$nextTick(() => {
            this.$refs.inputMultiCodesRef?.focus()
        })
      }
    }
  },
  methods: {
    // 处理多个订单号
    openNumbersInputPannel() {
      const str = format(this.numbers, '\n')
      this.inputMultiCodes = str
      this.openNumbersInput = true
    },
    confirmMultiCodes() {
      const inputs = this.inputMultiCodes
      const str = format(inputs, ',')
      this.numbers = str
      this.$emit('getNumber', str)
      this.inputMultiCodes = ''
      this.openNumbersInput = false
    },
    clearInputMultiCodes() {
      this.inputMultiCodes = ''
      this.numbers = ''
    },
    hanleClear() {
      this.clearInputMultiCodes()
      this.openNumbersInput = false
      this.$emit('getNumber', undefined)
    }
  }
}
</script>
<style scoped>

</style>
