<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  modalSize: String
}>()

const DeQuestions = ref([
  {
    label: 'List shipments with ETA changes in the last 30 days.',
    value: 'List shipments with ETA changes in the last 30 days.',
    isLong: false
  },
  {
    label: 'Shipments arriving in the next 7 days.',
    value: 'Shipments arriving in the next 7 days.',
    isLong: false
  },
  {
    label: 'Show shipments delayed in the last 30 days.',
    value: 'Show shipments delayed in the last 30 days.',
    isLong: false
  },
  {
    label: 'List shipments with milestone updates in the last 7 days.',
    value: 'List shipments with milestone updates in the last 7 days.',
    isLong: false
  },
  {
    label: 'List shipments with milestone in the last 7 days2sdsa.',
    value: 'List shipments with milestone in the last 7 days2sdsa.',
    isLong: false
  },
  {
    label: 'List shipments with milestone updates 7 days3fef.',
    value: 'List shipments with milestone updates 7 days3fef.',
    isLong: false
  },
  {
    label:
      'List shipments with ETA changes in the last 30 days11111111111111111111111111111111111.',
    value:
      'List shipments with ETA changes in the last 30 days11111111111111111111111111111111111.',
    isLong: true
  },
  {
    label:
      'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111122.',
    value:
      'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111122.',
    isLong: true
  },
  {
    label:
      'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111133.',
    value:
      'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111133.',
    isLong: true
  }
])
const itemGroups = ref([])
const pages = ref([])
// 随机显示方法
const prepareGroups = () => {
  const groups = []
  let currentGroup = []
  let currentHeight = 0

  DeQuestions.value.forEach((item) => {
    const itemHeight = item.isLong ? 2 : 1

    if (currentHeight + itemHeight > 4) {
      groups.push(currentGroup)
      currentGroup = []
      currentHeight = 0
    }

    currentGroup.push(item)
    currentHeight += itemHeight
  })

  // 添加最后一组
  if (currentGroup.length > 0) {
    groups.push(currentGroup)
  }

  itemGroups.value = groups
}
// 智能分页算法
const generatePages = () => {
  const result = []
  let currentPage = { row1: [], row2: [] }
  let cursor = 0

  while (cursor < DeQuestions.value.length) {
    // 处理第一排
    const currentItem = DeQuestions.value[cursor]
    // 第一排逻辑
    if (currentItem.isLong) {
      // 长文本独占第一排
      currentPage.row1.push(currentItem)
      cursor++
    } else {
      // 尝试取两个短文本
      const nextItem = DeQuestions.value[cursor + 1]
      if (nextItem && !nextItem.isLong) {
        currentPage.row1.push(currentItem, nextItem)
        cursor += 2
      } else {
        currentPage.row1.push(currentItem)
        cursor++
      }
    }

    // 处理第二排
    const remaining = DeQuestions.value.slice(cursor)
    if (remaining.length > 0) {
      const secondItem = remaining[0]

      if (secondItem.isLong) {
        currentPage.row2.push(secondItem)
        cursor++
      } else {
        const nextSecondItem = remaining[1]
        if (nextSecondItem && !nextSecondItem.isLong) {
          currentPage.row2.push(secondItem, nextSecondItem)
          cursor += 2
        } else {
          currentPage.row2.push(secondItem)
          cursor++
        }
      }
    }

    // 保存当前页
    result.push(currentPage)

    // 重置页面
    currentPage = { row1: [], row2: [] }
  }
  pages.value = result.filter((p) => p.row1.length > 0)
}
onMounted(() => {
  prepareGroups()
  generatePages()
})

const emit = defineEmits<{ question: [string] }>()
const clickQuestion = (question) => {
  emit('question', question)
}
</script>
<template>
  <div class="flex_center">
    <div class="dialogue_content">
      <div class="dialogue_content_title">
        <div class="dialogue_title_left">
          <img
            class="dialogue_title_left_img"
            src="../image/icon_ai_robot48_b@2x.png"
            width="48px"
          />
          <div class="dialogue_title_left_text">Frequently Asked Questions</div>
        </div>
      </div>
      <el-carousel
        v-if="props.modalSize === 'large'"
        class="carousel large_carousel"
        :autoplay="false"
        height="115px"
      >
        <el-carousel-item v-for="(page, index) in pages" :key="index">
          <div class="dialogue_container dialogue_container_large">
            <div class="double-row-layout">
              <!-- 第一排 -->
              <div class="row first-row">
                <template v-for="item in page.row1" :key="item.id">
                  <div
                    @click="clickQuestion(item.label)"
                    class="dialogue_content_item"
                    :class="{ 'long-item': item.isLong }"
                  >
                    {{ item.label }}
                  </div>
                </template>
              </div>
              <!-- 第二排 -->
              <div class="row second-row">
                <template v-for="item in page.row2" :key="item.id">
                  <div
                    @click="clickQuestion(item.label)"
                    class="dialogue_content_item"
                    :class="{ 'long-item': item.isLong }"
                  >
                    {{ item.label }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-carousel v-else class="carousel small_carousel" :autoplay="false" height="190px">
        <el-carousel-item v-for="(group, index) in itemGroups" :key="index">
          <div class="dialogue_container">
            <div
              class="dialogue_content_item"
              v-for="item in group"
              :key="item.label"
              @click="clickQuestion(item.label)"
              :class="{ 'long_item': item.isLong }"
            >
              {{ item.label }}
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dialogue_content {
  background: var(--color-dialogue_content-bg);
}
.dialogue_title_left {
  position: relative;
}
.dialogue_title_left_img {
  position: absolute;
  top: -20px;
}
.dialogue_title_left_text {
  background: var(--color-dialogue_title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 14px;
  font-weight: 700;
  margin: 5px 0 0 55px;
}
.small_carousel {
  width: 452px;
}
.large_carousel {
  width: 968px;
}
.double-row-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row {
  flex: 1;
  display: flex;
  min-height: 0; /* 防止内容溢出 */
}
.dialogue_content_item:hover {
  background-color: var(--color-arrow-hoverL);
  color: var(--color-theme);
}
.long-item {
  grid-column: span 2;
}
.dialogue_container_large {
  width: 936px;
  height: 84px;
}
.dialogue_content_item {
  width: 100%;
  height: 32px;
  padding: 5.5px 8px;
  border-radius: 6px;
  background-color: var(--color-dialogue-bg);
  margin-right: 4px;
  word-break: break-word;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: center;
  cursor: pointer;
  min-width: 0; /* 防止文本溢出 */
}
:deep(.el-carousel__item--card, .el-carousel__item.is-animating) {
  padding-bottom: 0 !important;
}
</style>
