<template>
  <el-dialog
    v-model="visible"                              <!-- 对话框的显示状态 -->
  title="选择商品"                               <!-- 对话框标题 -->
  :modal="false"                                 <!-- 是否需要遮罩层 -->
  :close-on-click-modal="false"                  <!-- 点击模态框是否关闭对话框 -->
  >
  <el-table
    ref="prodTableRef"                           <!-- 表格引用 -->
  v-loading="dataListLoading"                  <!-- 加载状态 -->
  :data="dataList"                             <!-- 数据源 -->
  border                                      <!-- 显示边框 -->
  style="width: 100%;"                         <!-- 表格宽度 -->
  @selection-change="selectChangeHandle"       <!-- 多选变化事件处理函数 -->
  >
  <!-- 单选列 -->
  <el-table-column
    v-if="isSingle"                            <!-- 根据props.isSingle决定是否显示 -->
  width="50"
  header-align="center"
  align="center"
  >
  <template #default="scope">
    <div>
      <el-radio
        v-model="singleSelectProdId"         <!-- 绑定单选值 -->
      :label="scope.row.prodId"            <!-- 单选标签为商品ID -->
      @change="getSelectProdRow(scope.row)"<!-- 单选变化事件处理函数 -->
      >
      &nbsp;
      </el-radio>
    </div>
  </template>
  </el-table-column>

  <!-- 多选列 -->
  <el-table-column
    v-if="!isSingle"                           <!-- 根据props.isSingle决定是否显示 -->
  type="selection"                           <!-- 多选类型 -->
  header-align="center"
  align="center"
  width="50"
  />

  <!-- 产品名称列 -->
  <el-table-column
    prop="prodName"                            <!-- 数据字段 -->
  header-align="center"
  align="center"
  label="产品名称"                           <!-- 列标题 -->
  />

  <!-- 产品图片列 -->
  <el-table-column
    align="center"
    width="140"
    label="产品图片"                          <!-- 列标题 -->
  >
  <template #default="scope">
    <img
      alt=""
      :src="scope.row.pic"                   <!-- 动态绑定图片源 -->
    width="100"
    height="100"
    >
  </template>
  </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
    :current-page="pageIndex"                    <!-- 当前页码 -->
  :page-sizes="[10, 20, 50, 100]"              <!-- 可选每页条数 -->
  :page-size="pageSize"                        <!-- 默认每页条数 -->
  :total="totalPage"                           <!-- 总记录数 -->
  layout="total, sizes, prev, pager, next, jumper" <!-- 分页布局 -->
  @size-change="sizeChangeHandle"              <!-- 每页条数变化事件处理函数 -->
  @current-change="currentChangeHandle"        <!-- 当前页码变化事件处理函数 -->
  />

  <!-- 对话框底部操作按钮 -->
  <template #footer>
      <span>
        <el-button @click="visible = false">取消</el-button> <!-- 关闭对话框 -->
        <el-button
          type="primary"
          @click="submitProds()"                   <!-- 提交选择的商品 -->
        >确定</el-button>
      </span>
  </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'           // 导入Element Plus的消息提示组件
import { defineEmits, defineProps, ref, reactive, onMounted, nextTick } from 'vue'
import http from '@/utils/http'

// 定义emit函数，用于向父组件发送更新
const emit = defineEmits(['refreshSelectProds'])

// 定义父组件传递的属性
const props = defineProps({
  isSingle: {
    default: false,                                // 默认值为false，表示多选
    type: Boolean                                  // 类型为布尔值
  }
})

// 定义响应式变量
const visible = ref(false)                         // 控制对话框的显示/隐藏
const dataForm = reactive({ product: '' })         // 表单数据对象
const singleSelectProdId = ref(0)                  // 单选商品ID
const selectProds = ref([])                        // 已选择的商品列表
const dataList = ref([])                           // 商品列表数据
const pageIndex = ref(1)                           // 当前页码
const pageSize = ref(10)                           // 每页条数
const totalPage = ref(0)                           // 总记录数
const dataListLoading = ref(false)                 // 加载状态
const dataListSelections = ref([])                 // 当前选择的商品

// 在组件挂载时获取数据列表
onMounted(() => {
  getDataList()
})

/**
 * 初始化并打开对话框
 * @param selectProdParam - 已选择的商品参数
 */
const init = (selectProdParam) => {
  selectProds.value = selectProdParam || []        // 设置已选择的商品
  visible.value = true                             // 打开对话框
  dataListLoading.value = true                     // 开启加载状态
  if (selectProds.value.length) {
    selectProds.value.forEach(row => {
      dataListSelections.value.push(row)           // 将已选择的商品添加到选择列表
    })
  }
  getDataList()                                    // 获取商品列表数据
}
defineExpose({ init })                             // 将init方法暴露给父组件调用

// 表格引用
const prodTableRef = ref(null)

/**
 * 获取数据列表
 */
const getDataList = () => {
  http({
    url: http.adornUrl('/prod/prod/page'),         // 请求URL
    method: 'get',                                 // 请求方法
    params: http.adornParams(
      Object.assign(
        {
          current: pageIndex.value,                // 当前页码
          size: pageSize.value                     // 每页条数
        },
        {
          prodName: dataForm.product               // 查询条件（产品名称）
        }
      )
    )
  }).then(({ data }) => {
    dataList.value = data.records                  // 更新商品列表数据
    totalPage.value = data.total                   // 更新总记录数
    dataListLoading.value = false                  // 关闭加载状态
    if (selectProds.value.length) {
      nextTick(() => {
        selectProds.value.forEach(row => {
          const index = dataList.value.findIndex(prodItem => prodItem.prodId === row.prodId)
          if (index !== -1) {
            prodTableRef.value.toggleRowSelection(dataList.value[index], true) // 自动选中已选择的商品
          }
        })
      })
    }
  })
}

/**
 * 每页条数变化事件处理函数
 * @param val - 新的每页条数
 */
const sizeChangeHandle = (val) => {
  pageSize.value = val                             // 更新每页条数
  pageIndex.value = 1                              // 重置当前页码为第一页
  getDataList()                                    // 重新获取数据
}

/**
 * 当前页码变化事件处理函数
 * @param val - 新的当前页码
 */
const currentChangeHandle = (val) => {
  pageIndex.value = val                            // 更新当前页码
  getDataList()                                    // 重新获取数据
}

/**
 * 单选商品事件处理函数
 * @param row - 被选择的商品行数据
 */
const getSelectProdRow = (row) => {
  dataListSelections.value = [row]                 // 更新选择列表为当前单选商品
}

/**
 * 多选变化事件处理函数
 * @param selection - 当前选择的商品列表
 */
const selectChangeHandle = (selection) => {
  dataList.value.forEach(tableItem => {
    const selectedProdIndex = selection.findIndex(selectedProd => selectedProd && selectedProd.prodId === tableItem.prodId)
    const dataSelectedProdIndex = dataListSelections.value.findIndex(dataSelectedProd => dataSelectedProd.prodId === tableItem.prodId)
    if (selectedProdIndex > -1 && dataSelectedProdIndex === -1) {
      dataListSelections.value.push(tableItem)     // 如果新选中则添加到选择列表
    } else if (selectedProdIndex === -1 && dataSelectedProdIndex > -1) {
      dataListSelections.value.splice(dataSelectedProdIndex, 1) // 如果取消选中则从选择列表移除
    }
  })
}

/**
 * 确定事件处理函数
 */
const submitProds = () => {
  if (!dataListSelections.value.length) {
    ElMessage({
      message: '请选择商品',
      type: 'error',
      duration: 1000,
      onClose: () => {}
    })
    return
  }
  const prods = []
  dataListSelections.value.forEach(item => {
    const prodIndex = prods.findIndex(prod => prod.prodId === item.prodId)
    if (prodIndex === -1) {
      prods.push({ prodId: item.prodId, prodName: item.prodName, pic: item.pic }) // 添加选择的商品到提交列表
    }
  })
  emit('refreshSelectProds', prods)                // 发送选择的商品给父组件
  dataListSelections.value = []                    // 清空选择列表
  visible.value = false                            // 关闭对话框
}

</script>
