<template>
  <!-- 商品SKU信息管理模块 -->
  <div class="mod-prod-sku-table">
    <el-form-item>
      <!-- SKU信息表格 -->
      <el-table
        :data="modelValue" <!-- 绑定表格数据 -->
      border <!-- 显示边框 -->
      style="width: 100%; margin-top: 20px"
      >
      <!-- 动态生成左侧标题列 -->
      <el-table-column
        v-for="(leftTitle, index) in tableLeftTitles" <!-- 循环创建列 -->
      :key="index"
      :label="leftTitle" <!-- 列标题 -->
      >
      <template #default="scope"> <!-- 自定义单元格内容 -->
        {{ scope.row.properties.split(';')[index].split(':')[1] }} <!-- 根据properties字段显示属性值 -->
      </template>
      </el-table-column>

      <!-- SKU图片列 -->
      <el-table-column
        v-if="tableLeftTitles.length" <!-- 如果有左侧标题则显示 -->
      prop="pic"
      label="sku图片"
      width="180"
      >
      <template #default="scope"> <!-- 自定义单元格内容 -->
        <pic-upload v-model="scope.row.pic" /> <!-- 使用自定义上传组件 -->
      </template>
      </el-table-column>

      <!-- 商品名称列 -->
      <el-table-column
        v-if="tableLeftTitles.length" <!-- 如果有左侧标题则显示 -->
      prop="prodName"
      label="商品名称"
      width="250"
      >
      <template #default="scope"> <!-- 自定义单元格内容 -->
        <el-input
          v-model="scope.row.prodName" <!-- 绑定输入框值 -->
        type="textarea" <!-- 设置为文本区域类型 -->
        :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
        />
      </template>
      </el-table-column>

      <!-- 销售价列 -->
      <el-table-column
        prop="price"
        label="销售价"
        width="160"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-input-number
            v-model="scope.row.price" <!-- 绑定输入框值 -->
          controls-position="right" <!-- 控制按钮位置 -->
          :precision="2" <!-- 小数点后保留位数 -->
          :max="1000000000" <!-- 最大值 -->
          :min="0.01" <!-- 最小值 -->
          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
          />
        </template>
      </el-table-column>

      <!-- 市场价列 -->
      <el-table-column
        prop="oriPrice"
        label="市场价"
        width="160"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-input-number
            v-model="scope.row.oriPrice" <!-- 绑定输入框值 -->
          controls-position="right" <!-- 控制按钮位置 -->
          :precision="2" <!-- 小数点后保留位数 -->
          :max="1000000000" <!-- 最大值 -->
          :min="0.01" <!-- 最小值 -->
          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
          />
        </template>
      </el-table-column>

      <!-- 库存列 -->
      <el-table-column
        prop="stocks"
        label="库存"
        width="160"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-input-number
            v-model="scope.row.stocks" <!-- 绑定输入框值 -->
          :min="0" <!-- 最小值 -->
          controls-position="right" <!-- 控制按钮位置 -->
          type="number" <!-- 类型 -->
          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
          />
        </template>
      </el-table-column>

      <!-- 商品重量列 -->
      <el-table-column
        prop="weight"
        label="商品重量(kg)"
        width="210"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-input-number
            v-model="scope.row.weight" <!-- 绑定输入框值 -->
          :precision="2" <!-- 小数点后保留位数 -->
          :min="0" <!-- 最小值 -->
          controls-position="right" <!-- 控制按钮位置 -->
          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
          />
        </template>
      </el-table-column>

      <!-- 商品体积列 -->
      <el-table-column
        prop="volume"
        label="商品体积(m³)"
        width="210"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-input-number
            v-model="scope.row.volume" <!-- 绑定输入框值 -->
          :precision="2" <!-- 小数点后保留位数 -->
          :min="0" <!-- 最小值 -->
          controls-position="right" <!-- 控制按钮位置 -->
          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
          />
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column
        label="操作"
      >
        <template #default="scope"> <!-- 自定义单元格内容 -->
          <el-button
            v-if="scope.row.status" <!-- 如果状态为启用，则显示禁用按钮 -->
          type="text"
          @click="changeSkuStatus(`${scope.$index}`)" <!-- 点击事件触发改变状态 -->
          >
          禁用
          </el-button>
          <el-button
            v-else <!-- 如果状态为禁用，则显示启用按钮 -->
          type="text"
          @click="changeSkuStatus(`${scope.$index}`)" <!-- 点击事件触发改变状态 -->
          >
          启用
          </el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-form-item>
  </div>
</template>

<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import { scoreProdStore } from '@/stores/prod.js'

// 定义props接收父组件传递的数据
const props = defineProps({
  modelValue: {
    default: () => [],
    type: Array
  },
  prodName: {
    default: '',
    type: String
  }
})

// 定义emits用于更新父组件的数据
const emit = defineEmits(['update:modelValue'])

// 数据库中的规格列表引用
const dbSpecs = ref([])

// 初始化标记
let initing = false

// 计算属性：动态生成表格左侧标题
const tableLeftTitles = computed(() => {
  const res = []
  for (let i = 0; i < skuTags.value.length; i++) {
    const skuTag = skuTags.value[i]
    res.push(skuTag.tagName)
  }
  return res
})

// 获取全局状态存储实例
const prod = scoreProdStore()

// 计算属性：获取SKU标签
const skuTags = computed({
  get () { return prod.skuTags }
})

// 监听商品名称变化，更新SKU名称
watch(() => props.prodName,
  () => {
    skuAddProdName()
  })

// 组件挂载时初始化
onMounted(() => {
  http({
    url: http.adornUrl('/prod/spec/list'),
    method: 'get',
    params: http.adornParams()
  })
    .then(({ data }) => {
      dbSpecs.value = data // 更新数据库中的规格列表
    })
})

// 初始化方法，暴露给父组件调用
const init = () => {
  initing = true
}
defineExpose({ init })

/**
 * 改变SKU状态
 * @param tagIndex - 要改变状态的SKU索引
 */
const changeSkuStatus = (tagIndex) => {
  props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1 // 反转状态
}

/**
 * 添加或更新商品名称到每个SKU中
 */
const skuAddProdName = () => {
  if (initing) return // 如果正在初始化，则不执行
  const skuList = []
  for (let i = 0; i < props.modelValue.length; i++) {
    const sku = Object.assign({}, props.modelValue[i]) // 复制当前SKU对象
    if (!sku.properties) {
      return // 如果没有properties字段，则跳过
    }
    sku.skuName = '' // 初始化SKU名称
    const properties = sku.properties.split(';') // 分割properties字符串
    for (const propertiesKey in properties) {
      sku.skuName += properties[propertiesKey].split(':')[1] + ' ' // 构建SKU名称
    }
    sku.prodName = props.prodName + ' ' + sku.skuName // 更新商品名称
    skuList.push(sku) // 将更新后的SKU添加到列表
  }
  emit('update:modelValue', skuList) // 更新父组件的modelValue
}

</script>

<style lang="scss" scoped>
.mod-prod-sku-table {
  /* 图片上传样式 */
  :deep(.pic-uploader-component .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .pic-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }

    .pic {
      width: 120px;
      height: 120px;
      display: block;
    }
  }

  /* 鼠标悬停时的样式 */
  :deep(.pic-uploader-component .el-upload:hover) {
    border-color: #409EFF;
  }
}
</style>
