<!-- 预览 -->
<template>
    <el-card class="box-card" >
  <el-descriptions :column="1" colon>
    <el-descriptions-item label="模板名称：">{{item.templateName}}</el-descriptions-item>
    <el-descriptions-item label="模板标签：">
         <el-tag size="small" v-for="tag in getTags(item.templateLabel)" :key="tag">{{ tag }}</el-tag>
        </el-descriptions-item>
    <el-descriptions-item label="变量识别符：">{{ ParameterFormatLabelDict.getList().filter((data)=>data.symbol===item.parameterFormat)[0].name}}</el-descriptions-item>
    <el-descriptions-item label="场景类型：">{{ ScenarioTypeDict.getValue(item.scenarioType)}}</el-descriptions-item>
    <el-descriptions-item label="模板框架：">{{TemplateFrameworkDict.getValue(item.templateFramework)}}</el-descriptions-item>
    <el-descriptions-item label="Prompt：">
      
      <div style="white-space: pre-wrap;    display: inline-flex;">
      {{ item.templateContent }}
    </div> </el-descriptions-item>
</el-descriptions>
</el-card>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: ['item'],
  components: {},

  computed: {},

  mounted () {
    console.log();
  },

  methods: {
    getTags (data) {
      return JSON.parse(data)
    }
  }
}

</script>
<style scoped>
div /deep/ .el-card{
    margin-bottom: 20px;
}

.main{
  height: calc(100vh - 450px);
  width: calc(100vw - 100px);
}
.main img{
  height: 100%;
  width: 100%;
}
div /deep/ .el-descriptions__title{
font-size: 18px;
}
div /deep/.el-descriptions__table{
    width: 100%;
    line-height: 30px;
}
div /deep/ .el-card{
    margin-bottom: 20px;
}
</style>
