<template>
  <!-- 选取文案弹出框 -->
  <el-popover
    class="select-text-popover"
    placement="top-start"
    width="520"
    v-model="visible"
  >
    <el-input
      type="textarea"
      v-model="text"
      :autosize="{ minRows: 4 }"
      placeholder="请输入内容, 以回车进行拆分"
    />
    <div class="btn">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <el-button slot="reference" size="small">批量填写</el-button>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      visible: false, // 控制弹出框
      textData: '',
    };
  },
  props:{
    text: String,
    required: true 
  },
  watch: {
    visible(val) {
      if (val) {
        this.text = this.text.replace(/[\,]/gm,'\n');
      }
    },
  },

  computed: {
    
  },

  methods: {
    
    // 确认
    confirm() {
      let tempStr = this.text.replace(/[\,]/gm,'\n');
      console.log(tempStr)
      // console.log(this.text)
      let arrData = [];

      // tempStr = this.ClearBr(tempStr); // 去除换行符

      tempStr.split(/[\n]/gm).forEach((item) => {
        arrData.push(this.trim(item));
      });

      console.log(arrData);

      this.$emit("confirm", arrData);

      this.visible = false;
    },

    //去除换行
    // ClearBr(key) {
    //   key = key.replace(/<\/?.+?>/g, "");
    //   key = key.replace(/[\r\n]/g, "");
    //   return key;
    // },

    // 去除两端空格
    trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    },
  },
};
</script>

<style>
#el-popover-9923 {
  position: relative !important;
  right: 100px !important;
  top: 100px !important;
}
</style>

<style scoped>
.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>