<template>
  <el-row align="center" v-for="(v, i) in outlineData" :key="i">
    <el-col :span="2">
      <span style="text-align: center; line-height: 32px">{{ chineseNumbers[i] }}、</span>
    </el-col>
    <el-col :span="16">
      <el-input placeholder="请输入章节" v-model="v.title" />
    </el-col>
    <el-col :span="6">
      <el-space style="width: 100%; height: 100%; margin-left: 10px;" :size="6">
        <el-icon  @click="handleUpChapter(i)" :style="{ color: i === 0 ? '#ccc' : '', cursor: 'pointer' }">
          <Top />
        </el-icon>
        <el-icon @click="handleNextChapter(i)" :style="{ color: i === outlineData.length - 1 ? '#ccc' : '', cursor: 'pointer'}">
          <Bottom />
        </el-icon>
        <el-icon @click="handleDeleteChapter(i)" style="cursor: pointer">
          <Delete />
        </el-icon>
<!--        <el-button :icon="Top" circle @click="handleUpChapter(i)" :disabled="i === 0" size="small"/>
        <el-button :icon="Bottom" circle @click="handleNextChapter(i)" :disabled="i === outlineData.length - 1" size="small" />
        <el-button :icon="Delete" circle @click="handleDeleteChapter(i)" type="danger" size="small" />-->
      </el-space>
    </el-col>
    <el-col :span="24" :offset="2" style="margin-top: 10px" v-for="(c, j) in v.subtopics">
      <el-row align="center" :gutter="10">
        <el-col :span="2">
          <span style="text-align: center; line-height: 32px"> {{ j + 1 }}、 </span>
        </el-col>
        <el-col :span="14">
          <el-input placeholder="请输入章节" v-model="c.title" />
        </el-col>
        <el-col :span="8">
          <el-space style="width: 100%; height: 100%; margin-left: 2px;" :size="6">
            <el-icon  @click="handleUpSection(i, j)" :style="{ color: j === 0 ? '#ccc' : '', cursor: 'pointer'}">
              <Top />
            </el-icon>
            <el-icon @click="handleNextSection(i, j)" :style="{ color: i === v.subtopics.length - 1 ? '#ccc' : '', cursor: 'pointer'}">
              <Bottom />
            </el-icon>
            <el-icon @click="handleDeleteSection(i, j)" style="cursor: pointer">
              <Delete />
            </el-icon>
<!--            <el-button :icon="Top" circle @click="handleUpSection(i, j)" :disabled="j === 0" size="small" />
            <el-button :icon="Bottom" circle @click="handleNextSection(i, j)" :disabled="j === v.subtopics.length - 1" size="small" />
            <el-button :icon="Delete" circle @click="handleDeleteSection(i, j)" type="danger" size="small" />-->
          </el-space>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="24" style="margin-top: 10px">
      <el-button @click="handleAddSection(i)" size="small">添加小节</el-button>
    </el-col>
    <el-divider />
  </el-row>
  <el-button type="primary" :icon="CirclePlus" style="width: 100%" @click="handleAddChapter"
    >添加章节
  </el-button>
</template>
<script setup lang="ts">
import { CirclePlus, Plus, Top, Bottom, Delete } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'

const chineseNumbers = [
  '一',
  '二',
  '三',
  '四',
  '五',
  '六',
  '七',
  '八',
  '九',
  '十',
  '十一',
  '十二',
  '十三',
  '十四',
  '十五',
  '十六',
  '十七',
  '十八',
  '十九',
  '二十'
]
interface Props {
  data: any
}

const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['update:value'])

const outlineData: any = computed({
  get () {
    return props.data || [];
  },
  set (val) {
    emit('update:value', val)
  }
})
const handleUpSection = (chapterIndex: any, sectionIndex: any) => {
  // 检查小节索引是否大于0，以确保不是第一个小节
  if (sectionIndex > 0) {
    // 获取当前章节的小节数组
    const subtopics = outlineData.value[chapterIndex].subtopics

    // 交换当前小节和前一个小节的位置
    const temp = subtopics[sectionIndex]
    subtopics[sectionIndex] = subtopics[sectionIndex - 1]
    subtopics[sectionIndex - 1] = temp
  }
}
const handleNextSection = (chapterIndex: any, sectionIndex: any) => {
  // 获取当前章节的小节数组
  const subtopics = outlineData.value[chapterIndex].subtopics

  // 检查小节索引是否小于数组长度减一，以确保不是最后一个小节
  if (sectionIndex < subtopics.length - 1) {
    // 交换当前小节和后一个小节的位置
    const temp = subtopics[sectionIndex]
    subtopics[sectionIndex] = subtopics[sectionIndex + 1]
    subtopics[sectionIndex + 1] = temp
  }
}
const handleDeleteSection = (i: any, j: any) => {
  outlineData.value[i].subtopics.splice(j, 1)
}
const handleAddSection = (i: any) => {
  outlineData.value[i].subtopics.push({
    title: undefined
  })
}
const handleAddChapter = () => {
  outlineData.value.push({
    title: undefined,
    subtopics: []
  })
}
const handleNextChapter = (chapterIndex: any) => {
  // 检查章节索引是否小于数组长度减一，以确保不是最后一个章节
  if (chapterIndex < outlineData.value.length - 1) {
    // 交换当前章节和后一个章节的位置
    const temp = outlineData.value[chapterIndex];
    outlineData.value[chapterIndex] = outlineData.value[chapterIndex + 1];
    outlineData.value[chapterIndex + 1] = temp;
  }
}
const handleUpChapter = (chapterIndex: any) => {
  // 检查章节索引是否大于0，以确保不是第一个章节
  if (chapterIndex > 0) {
    // 交换当前章节和前一个章节的位置
    const temp = outlineData.value[chapterIndex];
    outlineData.value[chapterIndex] = outlineData.value[chapterIndex - 1];
    outlineData.value[chapterIndex - 1] = temp;
  }
}
const handleDeleteChapter = (i: any) => {
  outlineData.value.splice(i, 1)
}


</script>
<style scoped lang="scss"></style>
