<template>
  <!-- 使用avue-crud组件创建一个可编辑的数据表格 -->
  <div class="mod-transport">
    <avue-crud
      ref="crudRef"
    :page="page"
    :data="dataList"
    :option="tableOption"
    @search-change="onSearch"
    @selection-change="selectionChange"
    @on-load="getDataList"
    >
    <!-- 自定义列内容：产品属性值 -->
    <template #prod-prop-values="scope">
      <el-tag v-for="item in scope.row.prodPropValues" :key="item.valueId">{{ item.propValue }}</el-tag>
    </template>

    <!-- 左侧菜单按钮 -->
    <template #menu-left>
      <el-button
        v-if="isAuth('shop:transport:save')"
      type="primary"
      icon="el-icon-plus"
      @click.stop="onAddOrUpdate()"
      >
      新增
      </el-button>

      <el-button
        v-if="isAuth('shop:transport:delete')"
      type="danger"
      :disabled="dataListSelections.length <= 0"
      @click="onDelete()"
      >
      批量删除
      </el-button>
    </template>

    <!-- 行内操作按钮 -->
    <template #menu="scope">
      <el-button
        v-if="isAuth('shop:transport:update')"
      type="primary"
      icon="el-icon-edit"
      @click.stop="onAddOrUpdate(scope.row.transportId)"
      >
      修改
      </el-button>

      <el-button
        v-if="isAuth('shop:transport:delete')"
      type="danger"
      icon="el-icon-delete"
      @click.stop="onDelete(scope.row.transportId)"
      >
      删除
      </el-button>
    </template>
    </avue-crud>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
    ref="addOrUpdateRef"
    @refresh-data-list="getDataList"
    />
  </div>
</template>

<script setup>
import { isAuth } from '@/utils'  // 导入权限验证工具函数
import { ElMessage, ElMessageBox } from 'element-plus'  // 导入Element Plus的消息提示和消息框组件
import { tableOption } from '@/crud/shop/transport'  // 导入表格配置选项
import AddOrUpdate from './add-or-update.vue'  // 导入添加或更新对话框组件
import { ref, nextTick } from 'vue'  // 导入Vue的响应式API
import http from '@/api/http'  // 假设这是导入的HTTP请求模块

// 定义响应式变量
const dataList = ref([])  // 数据列表
const dataListSelections = ref([])  // 多选框选中的数据项
const page = ref({
  total: 0, // 总页数
  currentPage: 1, // 当前页码
  pageSize: 10 // 每页大小
})

/**
 * 获取数据列表
 * @param {Object} pageParam - 分页参数
 * @param {Object} params - 查询参数
 * @param {Function} done - 加载完成回调函数
 */
const getDataList = (pageParam, params, done) => {
  http({
    url: http.adornUrl('/shop/transport/page'),  // 请求URL
    method: 'get',  // HTTP方法
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.value.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.value.pageSize : pageParam.pageSize
        },
        params
      )
    )  // 请求参数
  })
    .then(({ data }) => {
      dataList.value = data.records  // 设置数据列表
      page.value.total = data.total  // 设置总条目数
      if (done) done()  // 如果有传入done函数，则执行
    })
}

// 控制添加或更新对话框的显示状态
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)

/**
 * 新增或修改运输模板
 * @param {Number} id - 运输模板ID，如果存在则是修改操作
 */
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true  // 显示对话框
  nextTick(() => {
    addOrUpdateRef.value?.init(id)  // 初始化子组件并传递ID
  })
}

/**
 * 删除运输模板
 * @param {Number} id - 单个运输模板ID，如果不存在则进行批量删除
 */
const onDelete = (id) => {
  const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId)  // 确定要删除的ID列表
  ElMessageBox.confirm(
    `确定进行[${id ? '删除' : '批量删除'}]操作?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      http({
        url: http.adornUrl('/shop/transport'),
        method: 'delete',
        data: http.adornData(ids, false)  // 请求体数据
      })
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              getDataList()  // 刷新数据列表
            }
          })
        })
    }).catch(() => {})
}

/**
 * 条件查询
 * @param {Object} params - 查询参数
 * @param {Function} done - 查询完成后回调
 */
const onSearch = (params, done) => {
  getDataList(page.value, params, done)  // 根据查询条件获取数据列表
}

/**
 * 多选变化时触发
 * @param {Array} val - 选中的数据项数组
 */
const selectionChange = (val) => {
  dataListSelections.value = val  // 更新选中的数据项
}
</script>
