<template>
  <div>
    <div style="display: flex">
      <el-input
        v-model="input"
        :placeholder="placeholder"
        @dblclick.native="openMultiInput"
      />
      <div v-if="showTips" class="tips">双击输入多行</div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-input v-model="multiInputs" type="textarea" :rows="10" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="clear">清除</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { format } from '@/utils/multiInput'
export default {
  props: {
    title: { type: String, default: '输入多行，每行一个' },
    placeholder: { type: String, default: '双击输入多行' },
    showTips: { type: Boolean, default: false },
    value: { type: String }
  },
  data: function() {
    return {
      dialogVisible: false,
      multiInputs: null,
      input: null
    }
  },
  watch: {
    input(n, o) {
      this.$emit('input', n)
    }
  },
  methods: {
    clear() {
      this.$confirm('是否清空全部内容?', '正在清空', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.multiInputs = ''
        this.input = ''
      })
    },
    ok() {
      if (this.multiInputs) {
        const lines = format(this.multiInputs, ',')
        this.input = lines
      }
      this.dialogVisible = false
    },
    openMultiInput() {
      const lines = format(this.input, '\n')
      this.multiInputs = lines
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      // this.$emit("handleClose", param);
    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  white-space: nowrap;
  color: #ccc;
  margin-left: 10px;
}
</style>
