<template>
  <div class="gva-table-box">
    <el-menu ref="elMenuRef" class="gva-page-menu" :default-active="defaultActive" mode="horizontal">
      <el-menu-item v-for="(item) in pageList" @click="handleOpenItem(item)" :index="item.ID.toString()">
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>

    <el-form ref="elFormRef" label-position="top" label-width="auto" :inline="true" :model="formData">
      <div v-if="formData.kind === 1" style="margin-bottom: 15px; width:100%">
        <RichEdit v-model="formData.content" media-category="page_imgs" style="height: 50rem;" />
      </div>
      <div v-else style="width: 100%;">
        <el-timeline hide-timestamp>
          <el-timeline-item placement="top" v-for="(item, index) in timelineArr">
            <el-row :gutter="10" style="width: 80%">
              <el-col :span="18">
                <div class="gva-multi-input">
                  <el-input v-model="item.time" style="width: 100%; margin-bottom: 10px;" placeholder="时间"
                    @blur="timelineBlur" />
                  <el-input v-model="item.title" style="width: 100%; margin-bottom: 10px;" placeholder="标题"
                    @blur="timelineBlur" />
                  <el-input v-model="item.content" type="textarea" rows="3" style="width: 100%" placeholder="内容" />
                </div>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" plain size="small" @click="timelineAdd(index)">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-button>
                <el-button type="danger" plain size="small" v-if="index > 0" @click="timelineDel(index)">
                  <el-icon>
                    <Minus />
                  </el-icon>
                </el-button>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div>
        <el-button type="primary" style="width: 160px;" @click="handleFormSubmit">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import RichEdit from '@/components/richtext/rich-edit.vue'
import {
  getPageList,
  getPageById,
  updatePage,
} from '@/api/page'

const elMenuRef = ref(null)
const elFormRef = ref(null)
const defaultActive = ref("")
const pageList = ref([])
const formData = ref({})
const timelineArr = ref([{
  time: "",
  title: "",
  content: "",
}])
const copyTimelineData = () => {
  if (formData.value.kind === 1) {
    return
  }
  const arr = timelineArr.value.filter(item => item.title.trim() != '')
  if (arr.length > 0) {
    formData.value.content = JSON.stringify(arr)
  }
}
const timelineAdd = (index) => {
  timelineArr.value.splice(index + 1, 0, { time: '', title: '', content: '' })
}
const timelineDel = (index) => {
  timelineArr.value.splice(index, 1)
}
const timelineBlur = () => {
  copyTimelineData()
}

const handleOpenItem = async (item) => {
  const res = await getPageById({ id: item.ID })
  if (res.code === 0) {
    formData.value = res.data.item
    if (item.kind === 2) {
      if (res.data.item.content != '') {
        timelineArr.value = JSON.parse(res.data.item.content)
      }
      if (timelineArr.length == 0) {
        timelineArr.value.push({
          time: "",
          title: "",
          content: "",
        })
      }
    }
  } else {
    ElMessage.error("获取数据失败")
  }
}
const getTableData = async () => {
  const res = await getPageList()
  if (res.code === 0) {
    pageList.value = res.data.list
    defaultActive.value = pageList.value[0].ID.toString()
    handleOpenItem(pageList.value[0])
  }
}

const init = () => {
  getTableData()
}

init()

const handleFormSubmit = () => {
  copyTimelineData()
  elFormRef.value.validate(async valid => {
    if (!valid) {
      return false
    }
    const res = await updatePage(formData.value)
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '保存成功',
      })
    }
  })
}

</script>

<style scoped>
.gva-page-menu {
  margin-bottom: 15px;
}

.gva-multi-input {
  margin-bottom: 15px;
}
</style>
