<template>
  <div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="handleAdd('0')">新增根栏目</el-button>
      </div>

      <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
      <el-table :data="tableData" row-key="ID">
        <el-table-column align="left" label="ID" min-width="80" prop="ID" />
        <el-table-column align="left" label="名称" min-width="100" prop="name" />
        <el-table-column align="left" label="标题" min-width="120" prop="title" />
        <el-table-column align="left" label="摘要" min-width="260" prop="description" />
        <el-table-column align="left" label="关键词" min-width="260" prop="keyword" />
        <el-table-column align="left" label="介绍" min-width="260" prop="introduce" />
        <el-table-column align="left" label="栏目模板" min-width="80" prop="channelTplId" />
        <el-table-column align="left" label="文章页模板" min-width="140" prop="articleTplId" />
        <el-table-column align="left" label="默认显示文章数" min-width="140" prop="pageNum" />
        <el-table-column align="left" label="父节点" min-width="90" prop="parentId" />
        <el-table-column align="left" fixed="right" label="操作" width="300">
          <template #default="scope">
            <el-button type="primary" link icon="plus" @click="handleAdd(scope.row.ID)">添加子栏目</el-button>
            <el-button type="primary" link icon="edit" @click="handleEdit(scope.row.ID)">编辑</el-button>
            <el-button type="primary" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-drawer v-model="dialogFormVisible" size="550" :show-close="false" :before-close="handleCloseDialog"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ !isEdit ? '添加' : '修改' }}栏目</span>
          <div>
            <el-button type="primary" @click="handleFormSubmit">确 定</el-button>
            <el-button @click="handleCloseDialog">取 消</el-button>
          </div>
        </div>
      </template>
      <el-form v-if="dialogFormVisible" ref="channelForm" label-position="right" label-width="auto" :inline="true"
        :model="form" :rules="rules">
        <div class="section-title">
          <span>基本设置</span>
        </div>
        <el-form-item label="名称" prop="name" style="width: 88%">
          <template #label>
            <span>名称</span>
            <span>
              <el-tooltip content="导航用" placement="top">
                <el-icon style="margin-left: 3px; margin-top: 9px;">
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="标题" prop="title" style="width: 88%">
          <template #label>
            <span>标题</span>
            <span>
              <el-tooltip content="栏目页使用" placement="top">
                <el-icon style="margin-left: 3px; margin-top: 9px;">
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="每页数量" prop="pageNum" style="width: 88%">
          <el-input-number v-model="form.pageNum" autocomplete="off" style="width:100%" />
        </el-form-item>
        <el-form-item label="父节点ID" style="width: 88%">
          <el-cascader v-model="form.parentId" style="width:100%" :disabled="!isEdit" :options="channelOption"
            :props="{ checkStrictly: true, label: 'title', value: 'ID', disabled: 'disabled', emitPath: false }"
            :show-all-levels="false" filterable />
        </el-form-item>
        <el-divider />
        <div class="section-title">
          <span>Meta设置</span>
        </div>
        <el-form-item label="摘要" prop="description" style="width: 88%">
          <el-input v-model="form.description" type="textarea" rows="2" autocomplete="off" />
        </el-form-item>
        <el-form-item label="关键词" prop="keyword" style="width: 88%">
          <el-input v-model="form.keyword" type="textarea" rows="2" autocomplete="off" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduce" style="width: 88%">
          <el-input v-model="form.introduce" type="textarea" rows="2" autocomplete="off" />
        </el-form-item>
        <el-divider />
        <div class="section-title">
          <span>模板设置</span>
        </div>
        <el-form-item label="栏目模板" prop="channelTplId" style="width: 88%">
          <el-select v-model="form.channelTplId" placeholder="请选择" style="width: 240px">
            <el-option v-for="item in channelTplOptions" :key="item.ID" :label="item.title" :value="item.ID" />
          </el-select>
        </el-form-item>
        <el-form-item label="文章页模板" prop="articleTplId" style="width: 88%">
          <el-select v-model="form.articleTplId" placeholder="请选择" style="width: 240px">
            <el-option v-for="item in articleTplOptions" :key="item.ID" :label="item.title" :value="item.ID" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import {
  getChannelTree,
  addChannel,
  updateChannel,
  deleteChannel,
  getChannelById
} from '@/api/channel'

const rules = reactive({
  name: [
    { required: true, message: '请输入栏目名称', trigger: 'blur' }
  ],
  title: [
    { required: true, message: '请输入栏目标题', trigger: 'blur' }
  ],
  pageNum: [
    { required: true, type: 'number', message: '默认显示文章条数必须为大于0的整数', trigger: 'blur' }
  ],
})

// 查询
const tableData = ref([])
const getTableData = async () => {
  const res = await getChannelTree()
  if (res.code === 0) {
    tableData.value = res.data.channelTree
  }
}

getTableData()

const channelOption = ref([
  {
    ID: '0',
    title: '根栏目'
  }
])
const setOptions = () => {
  channelOption.value = [
    {
      ID: '0',
      title: '根栏目'
    }
  ]
  setChannelOptions(tableData.value, channelOption.value, false)
}
const setChannelOptions = (channelData, optionsData, disabled) => {
  channelData &&
    channelData.forEach(item => {
      if (item.children && item.children.length) {
        const option = {
          title: item.name,
          ID: String(item.ID),
          disabled: disabled || item.ID === form.value.ID,
          children: []
        }
        setChannelOptions(
          item.children,
          option.children,
          disabled || item.ID === form.value.ID
        )
        optionsData.push(option)
      } else {
        const option = {
          title: item.name,
          ID: String(item.ID),
          disabled: disabled || item.ID === form.value.ID
        }
        optionsData.push(option)
      }
    })
}

// ------ 获取模板 options ------
import { getTplOptions } from '@/api/channel'
const articleTplOptions = ref([])
const channelTplOptions = ref([])
const setTplOptions = async () => {
  channelTplOptions.value = []
  const res = await getTplOptions()
  if (res.code === 0) {
    articleTplOptions.value = res.data.articleTplOptions
    channelTplOptions.value = res.data.channelTplOptions
  }
}
// 初始化数据
setTplOptions()

// ----- 以下为 form 操作 -----
const form = ref({
  ID: 0,
  parentId: 0,
  name: '',
  title: '',
  description: '',
  keyword: '',
  introduce: '',
  channelTplId: 0,
  articleTplId: 0,
  pageNum: 10,
})

// 提交表单
const handleFormSubmit = async () => {
  channelForm.value.validate(async valid => {
    if (valid) {
      let res
      if (isEdit.value) {
        res = await updateChannel(form.value)
      } else {
        res = await addChannel(form.value)
      }
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: isEdit.value ? '编辑成功' : '添加成功!'
        })
        getTableData()
      }
      initForm()
      dialogFormVisible.value = false
    }
  })
}

// 初始化弹窗内表格方法
const channelForm = ref(null)
const checkFlag = ref(false)
const initForm = () => {
  checkFlag.value = false
  channelForm.value.resetFields()
  form.value = {
    ID: 0,
    parentId: 0,
    name: '',
    title: '',
    description: '',
    keyword: '',
    introduce: '',
    channelTplId: 0,
    articleTplId: 0,
    pageNum: 10,
  }
}

// 关闭弹窗
const dialogFormVisible = ref(false)
const handleCloseDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

// 删除菜单
const handleDelete = (ID) => {
  ElMessageBox.confirm('此操作将永久删除栏目, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteChannel({ ID })
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        if (tableData.value.length === 1 && page.value > 1) {
          page.value--
        }
        getTableData()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}

// 添加栏目方法，id为 0则为添加根栏目
const isEdit = ref(false)
const dialogTitle = ref('新增栏目')
const handleAdd = (id) => {
  dialogTitle.value = '新增栏目'
  form.value.parentId = String(id)
  isEdit.value = false
  setOptions()
  dialogFormVisible.value = true
}
// 修改菜单方法
const handleEdit = async (ID) => {
  dialogTitle.value = '编辑栏目'
  const res = await getChannelById({ ID })
  form.value = res.data.channel
  isEdit.value = true
  setOptions()
  dialogFormVisible.value = true
}

</script>

<style type="scss">
.section-title {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 15px;
}
</style>