<template>
  <div class="segment-split-view">
    <div class="segment-list">
      <div
        v-for="(segment, index) in descriptions.data"
        :key="index"
        class="segment-list-item"
        :class="{ active: activeSegment === index }"
        @click="handleSegmentClick(index)"
      >
        <div>
          <span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
        </div>
        <div>
          <p>Q {{ segment.content }}</p>
          <p>A {{ segment.answer }}</p>
        </div>
        <!--            <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">-->
        <!--              <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>-->
        <!--            </div>-->
        <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="问答详情" :visible.sync="dialogVisible" width="50%" append-to-body :before-close="handleClose">
      <div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
        <div class="segment-content">
          <div>
            <div>
              <p>QUESTION</p>
              <p>{{ descriptions.data[activeSegment].content }}</p>
            </div>
            <div>
              <p>ANSWER</p>
              <p>{{ descriptions.data[activeSegment].answer }}</p>
            </div>
          </div>
          <div
            class="flex align-items-c mt20"
            v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length"
            style="width: max-content"
          >
            <span>关键词 ：</span>
            <el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index" class="mr10" size="mini" type="primary">
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'QAModel',
  props: {
    visible: Boolean,
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    }
  },
  data() {
    return {
      activeSegment: null,
      dialogVisible: false
    }
  },
  methods: {
    handleSegmentClick(index) {
      this.activeSegment = index
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
.segment-split-view {
  display: block;
}

.segment-list {
  width: 100%;
  height: 400px;
  overflow-y: auto;
}

.segment-list-item {
  cursor: pointer;
  padding: 15px 0 10px 15px;
  border-radius: 15px;
  transition: background-color 0.3s;
  font-size: 14px;
  border: 1px solid #f3f5f7;
  margin-bottom: 20px;
  &:hover {
    background: #f3f5f7;
  }

  &.active {
    background: #f3f5f7;
  }
  p {
    margin: 15px 0;
  }
  .segment-number {
    color: #0a84ff;
  }
  .segment-keywords {
    color: #606266;
    p {
      margin: 0 10px 0 0;
    }
  }
}

.segment-content {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 15px;
  //white-space: pre-wrap;
  line-height: 35px;
  color: #666;
}
</style>
