<script setup lang="ts">
const props = defineProps<{
  options: string
}>()

const optionsHtml = computed(() => {
  if (!props.options) return []
  let parsed: any = props.options
  try {
    parsed = JSON.parse(parsed)
    if (typeof parsed === 'string') {
      parsed = JSON.parse(parsed)
    }
  } catch (e) {
    return []
  }
  if (!Array.isArray(parsed)) return []

  // 判断是否为单纯的选项数组 [{"label":"A","value":"..."}]
  // 如果是，则包装成 [{ options: [...] }] 格式，以便复用模板渲染逻辑
  if (parsed.length > 0) {
    const first = parsed[0]
    const isFlatOption =
      first &&
      typeof first === 'object' &&
      'label' in first &&
      'value' in first &&
      !('options' in first)
    if (isFlatOption) {
      return [{ options: parsed }]
    }
  }

  return parsed
})
</script>

<template>
  <div class="box">
    <div v-for="(item, index) in optionsHtml" :key="index" class="row">
      <span class="index">{{ index + 1 }}</span>
      <div class="content">
        <template v-if="item?.options && Array.isArray(item.options)">
          <span v-for="opt in item.options" :key="opt.label" class="opt-item">
            <span class="opt-label">{{ opt.label }}.</span>
            <span v-html="opt.value"></span>
          </span>
        </template>
        <template v-else>
          {{ item }}
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.row {
  margin-bottom: 20px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}
.content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.index {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  /* background-color: #669cfe; */
  border: 5px solid #669cfe;
  color: #669cfe;
  margin-right: 12px;
  margin-top: 5px;
  font-size: 25px;
  flex-shrink: 0;
}
.opt-item {
  margin-right: 24px;
  display: inline-block;
  margin-bottom: 8px;
}
.opt-label {
  font-weight: bold;
  margin-right: 2px;
}
</style>
