<!-- 提示词模板 -->
<template>
<div>
  <div class="promptWordTemplate">
    <span v-for="(item,index) in content" :key="index" style="white-space: pre-wrap;">
    <template v-if="item.text">
      {{ item.text }}
    </template>
    <template v-else-if="item.placeholder">
      <el-input v-model="item.value"  style="display:inline-block;width: 100px;margin:0 10px 0 10px;" size="small" :placeholder="item.placeholder"></el-input>
    </template>
    </span>
    <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
      <el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      content: undefined,
      text: '',
      placeholders: []
    
    };
  },
  props: ['data'],
  components: {},

  computed: {},

  mounted () {
    this.content = this.domRender(this.data.value, this.data.parameterFormat).map((item, index) => {
      let x = this.placeholders.indexOf(item) !== -1
      return {
        text: x ? '' : item,
        value: '',
        placeholder: x ? item : ''
      }
    })
  },

  methods: {
    onCancel (isSuccess, data) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, data);
      }
    },
    domRender (str, parameterFormat) {
      var match;
      let strData = str
      var regexPattern = new RegExp(`\\${parameterFormat[0]}([^}]+)\\${parameterFormat[1]}`, 'g');
      while ((match = regexPattern.exec(str)) !== null) {
        this.placeholders.push(match[1]);
      }
      var reg = new RegExp(`\\${parameterFormat[0]}(.*?)\\${parameterFormat[1]}`, 'g')
      strData = strData.split(reg);
      return strData
    },

    onSubmit () {
      this.content.forEach(element => {
        this.text += element.text || element.value
      });
  
      this.onCancel(true, this.text)
    }

  }
}

</script>
<style scoped>
.promptWordTemplate{
  line-height: 35px;
}
</style>
