<template>
  <div class="segment-split-view">
    <div class="segment-list">
      <!--      <el-checkbox-group v-model="selectedSegments">-->
      <div
        class="segment-list-item"
        v-for="(segment, index) in descriptions.data"
        :key="index"
        :class="{ active: activeSegment === index }"
        @click="handleSegmentClick(index)"
      >
        <!--          <el-checkbox class="mr pt15" :label="index">-->
        <span class="el-icon-s-unfold"></span>
        <span class="segment-number"
          >分段 - {{ (index + 1).toString().padStart(2, '0') }}</span
        >
        <span v-if="segment.word_count > 0">
          · {{ segment.word_count }}个字符 ·</span
        >
        <span> {{ 0 }} 次召回次数</span>
        <!--          </el-checkbox>-->
        <div>
          <p class="context">{{ segment.content.slice(0, 20) + '.....' }}</p>
          <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>
        </div>
      </div>
      <!--      </el-checkbox-group>-->
    </div>

    <!-- 弹窗 -->
    <el-drawer
      title="分段详情"
      :wrapperClosable="false"
      :visible.sync="dialogVisible"
      :modal="false"
      append-to-body
      :before-close="handleClose"
    >
      <div
        v-if="
          activeSegment !== null &&
            descriptions.data &&
            descriptions.data.length > 0
        "
      >
        <div class="segment-content">
          {{ descriptions.data[activeSegment].content }}
          <div
            class="flex align-items-c mt20"
            v-if="
              descriptions.data[activeSegment].keywords &&
                descriptions.data[activeSegment].keywords.length
            "
            style="flex-wrap: wrap"
          >
            <span>关键词 ：</span>
            <el-tag
              v-for="(item, index) in descriptions.data[activeSegment].keywords"
              :key="index"
              class="mr10 ellipsis"
              size="mini"
              type="primary"
            >
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >关 闭</el-button
        >
      </span>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'TextModel',
  props: {
    visible: Boolean,
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    }
  },
  data() {
    return {
      activeSegment: null,
      dialogVisible: false,
      selectedSegments: []
    }
  },
  methods: {
    handleSegmentClick(index) {
      this.activeSegment = index
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
.segment-split-view {
  display: block;
}
.context {
  color: #3a3f4f;
  font-size: 14px;
}
.segment-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

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

  &:hover {
    background: #f3f5f7;
  }

  &.active {
    background: #f3f5f7;
  }

  p {
    margin: 15px 0;
  }

  .segment-number {
    //color: #0a84ff;
  }

  .segment-keywords {
    font-weight: 400;
    font-size: 12px;
    color: #70778d;
    flex-wrap: wrap;

    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>
