<!--prompt输入  -->
<template>
  <div >
    <el-input v-if="[1,2,3].indexOf(templateFramework)===-1||isEdit" type="textarea" :rows="5" placeholder="请输入内容" :value="prompt" class="inputWidth" @input="changeInput"></el-input>

    <el-card class="box-card" style="width:600px" v-else>
      <div class="inputBox" v-for="(item,index) in myPrompts" :key="index">
        {{ item.label }}:
        <el-input v-if="item.label!=='示例'" type="textarea" :rows="3" placeholder="请输入内容" v-model="item.value" class="inputWidth" @input="changeInput"></el-input>
        <div v-else>
          <el-table :data="item.tableData" style="width: 100%" :size="defaultFormItemSize">

            <el-table-column prop="input" label="输入">
              <template slot-scope="scope">
                <el-input  type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.input" class="inputWidth" @input="changeInput"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="output" label="输出">
              <template slot-scope="scope">
                <el-input  type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.output" class="inputWidth" @input="changeInput"></el-input>
              </template>
            </el-table-column>
     
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(item,scope.$index)" :size="defaultFormItemSize" type="text">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="add" @click="add(item)" :disabled="item.tableData.length === 5" icon="el-icon-plus" :size="defaultFormItemSize">新增</el-button>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  data () {
    return {
      prompt: '',
      prompts: [
        {
          label: '能力与角色',
          templateFramework: [2],
          value: ''
        },
        {
          label: '指令',
          templateFramework: [1, 2],
          value: ''
        },
        {
          label: '背景信息',
          templateFramework: [1, 2],
          value: ''
        },
        {
          label: '背景及指令',
          templateFramework: [3],
          value: ''
        },
        {
          label: '输出风格',
          templateFramework: [2],
          value: ''

        },
        {
          label: '输出范围',
          templateFramework: [2],
          value: ''

        },
        {
          label: '补充数据',
          templateFramework: [1],
          value: ''
        },
        {
          label: '输出格式',
          templateFramework: [1],
          value: ''
        },
        {
          label: '示例',
          templateFramework: [3],
          tableData: []
        }
      ]
    };
  },
  props: ['templateFramework', 'value', 'isEdit'],
  components: {},

  computed: {
    myPrompts () {
      return this.prompts.filter((item) => {
        return item.templateFramework.indexOf(this.templateFramework) !== -1
      })
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.prompt = this.value
    })
  },

  methods: {
    init () {
      Object.assign(this.$data, this.$options.data());
      this.$emit('input', undefined)
    },
    changeInput (data) {
      this.prompt = data
      let promptsString = this.prompts.map((item) => {
        if (item.label === '示例') {
          if (item.tableData.length === 0) return
          return item.tableData.map((item2) => {
            return '输入：' + item2.input + '\n' + '输出：' + item2.output + '\n'
          }).join('')
        } else {
          if (item.value === '') return
          return item.label + ':' + item.value + '\n'
        }
      }).join('')
      console.log(promptsString);
      this.$emit('input', [1, 2, 3].indexOf(this.templateFramework) === -1 ? this.prompt : promptsString)
    },
    add (item) {
      if (item.tableData.length === 20) return
      item.tableData.push({
        input: '',
        output: ''
      })
    },
    deleteRow (item, index) {
      item.tableData.splice(index, 1);
    }
  }
}

</script>
<style scoped>
.inputBox{
    margin-bottom: 10px;
}
div /deep/ .el-table th.is-leaf{
    background: #f5f7fa;
}
.add{
    margin-top: 20px;
}
</style>
