<template>
  <!-- 分类管理模块 -->
  <div class="mod-category">
    <!-- 搜索表单，使用inline布局让表单项在同一行显示 -->
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <!-- 新增按钮，只有拥有相应权限的用户可以点击 -->
        <el-button
          v-if="isAuth('prod:category:save')"
          type="primary"
          icon="el-icon-plus"
          @click="onAddOrUpdate()"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格，展示分类列表 -->
    <el-table :data="dataList" border row-key="categoryId" style="width: 100%;">
      <!-- 分类名称列 -->
      <el-table-column
        prop="categoryName"
        header-align="center"
        tree-key="categoryId"
        width="150"
        label="分类名称"
      />

      <!-- 图片列，自定义模板显示图片 -->
      <el-table-column
        prop="pic"
        header-align="center"
        align="center"
        label="图片"
      >
        <template #default="scope">
          <img alt="" :src="checkFileUrl(scope.row.pic)" style="height:80px;width:200px;">
        </template>
      </el-table-column>

      <!-- 状态列，根据状态值显示不同颜色的标签 -->
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">下线</el-tag>
          <el-tag v-else>正常</el-tag>
        </template>
      </el-table-column>

      <!-- 排序号列 -->
      <el-table-column
        prop="seq"
        header-align="center"
        align="center"
        label="排序号"
      />

      <!-- 操作列，提供修改和删除按钮 -->
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
      >
        <template #default="scope">
          <!-- 修改按钮，只有拥有相应权限的用户可以点击 -->
          <el-button
            v-if="isAuth('prod:category:update')"
            type="primary"
            @click="onAddOrUpdate(scope.row.categoryId)"
          >
            修改
          </el-button>
          <!-- 删除按钮，只有拥有相应权限的用户可以点击 -->
          <el-button
            v-if="isAuth('prod:category:delete')"
            type="danger"
            @click="onDelete(scope.row.categoryId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗, 新增 / 修改，通过addOrUpdateVisible控制显示隐藏 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="getDataList"
      @close="addOrUpdateVisible=false"
    />
  </div>
</template>

<script setup>
import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddOrUpdate from './add-or-update.vue'

// 表单数据对象
const dataForm = ref({})

// 页面加载时获取数据列表
onMounted(() => {
  getDataList()
})

// 数据列表引用
const dataList = ref([])
const dataListLoading = ref(false)

/**
 * 获取数据列表方法
 */
const getDataList = () => {
  dataListLoading.value = true // 开始加载时设置为true
  http({
    url: http.adornUrl('/prod/category/table'),
    method: 'get',
    params: http.adornParams()
  })
    .then(({ data }) => {
      // 将返回的数据转换成树形结构并赋值给dataList
      dataList.value = treeDataTranslate(data, 'categoryId', 'parentId')
      dataListLoading.value = false // 加载完成设置为false
    })
}

// 控制弹窗显示与隐藏
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)

/**
 * 新增或修改分类
 * @param id - 如果提供id则为修改，否则为新增
 */
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true // 显示弹窗
  nextTick(() => {
    addOrUpdateRef.value?.init(id) // 初始化弹窗内容
  })
}

/**
 * 删除分类
 * @param id - 要删除的分类ID
 */
const onDelete = (id) => {
  // 确认框提示用户是否确定要执行删除操作
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 发送HTTP DELETE请求
      http({
        url: http.adornUrl(`/prod/category/${id}`),
        method: 'delete'
      })
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              getDataList() // 刷新列表
            }
          })
        })
    })
}
</script>

<style lang="scss" scoped>
.mod-category {
  img {
    height: 80px;
    width: 200px; // 设置图片的尺寸以确保一致性和美观性
  }
}
</style>
