<template>
  <a-collapse :active-key="activeKey">
    <a-collapse-panel
      :key="value"
      v-for="(item, value) in questionList">
      <!-- 使用具名插槽#header来自定义头部内容 -->
      <template #header>
        <!-- 这里可以根据需要设计你的标题结构 -->
        <div class="custom-header">
          {{ item.question }}
          <!-- 假设你想在标题后显示一个状态图标，可以根据item.sql的存在与否来决定 -->
          <a-icon v-if="!item.sql" type="close-circle" style="color: red; margin-left: 5px;" />
        </div>
      </template>
      <a-row v-if="item.sql && item.data">
        <DynamicTable :title="item.question" :table-data="item.data" />
        <ChartSelector :rawData="item.data"/>
      </a-row>
      <a-row v-else>
        <a-result
          status="error"
          title="请求失败"
          sub-title="这通常是因为网络波动或程序故障导致的"
        >

          <div class="desc">
            <p style="font-size: 16px;">
              <strong>我如何解决这个问题:</strong>
            </p>
            <p>
              <a-icon :style="{ color: 'red' }" type="close-circle" /> 尝试重新发起请求
            </p>
            <p>
              <a-icon :style="{ color: 'red' }" type="close-circle" /> 调整提问方式
            </p>
          </div>
        </a-result>
      </a-row>
      <a-icon slot="extra" type="delete" @click.stop="handleClick(item)" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import ChartSelector from './ChartSelector.vue'
import EvaluationArea from './EvaluationArea.vue'
import Ellipsis from '@vue2-client/components/Ellipsis/Ellipsis.vue'
import DynamicTable from './DynamicTable.vue'
import { indexedDB } from '@vue2-client/utils/indexedDB'

export default {
  components: {
    DynamicTable,
    Ellipsis,
    ChartSelector,
    EvaluationArea
  },
  data () {
    return {
      dataTypeActiveKey: '0',
      pane: {},
      questionList: [],
      currentKey: '',
      activeKey: 0
    }
  },
  mounted () {
    this.pane = {}
  },
  methods: {
    async show (obj) {
      this.questionList = obj.questionList
      this.currentKey = obj.key
    },
    handleClick (item) {
      indexedDB.get(this.currentKey, (data) => {
        let index = 0
        // 使用while循环以避免在遍历过程中修改数组长度导致的问题
        while (index < data.questionList.length) {
          if (data.questionList[index].uuid === item.uuid) {
            // 找到匹配的uuid，使用splice方法移除该元素
            data.questionList.splice(index, 1)
            break
          } else {
            // 如果uuid不匹配，则索引加1继续检查下一个元素
            index++
          }
        }
        //  回更indexedDB库中的数据
        indexedDB.update(this.currentKey, data)
        //  刷新数据
        this.$emit('afterDelDialogOfOne', data)
        this.questionList = data.questionList
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tab-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.chart-card {
  margin-top: 20px;
}

.data-content {
  min-height: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}
:deep(.ant-tabs-bar) {
  margin-bottom: 0px;
}
:deep(.ant-collapse-extra) {
  margin-top: -20px
}
</style>
