<template>
  <!-- 商品运费设置模块 -->
  <div class="mod-prod-prod-transport">
    <!-- 运费设置表单项 -->
    <el-form-item
      label="运费设置"
      :rules="[{ required: true, message: '运费模板不能为空'}]"
    >
      <!-- 运费模板选择框 -->
      <el-select
        v-model="transportId"
        placeholder="请选择"
        @change="changeTransport"
      >
        <el-option
          v-for="transport in transportList"
          :key="transport.transportId"
          :label="transport.transName"
          :value="transport.transportId"
        />
      </el-select>
    </el-form-item>

    <!-- 展示运费详情表格 -->
    <el-form-item>
      <el-table
        v-if="transportInfo.transfees"
        :data="transportInfo.transfees"
        style="width: 100%"
      >
        <el-table-column
          label="配送区域"
          width="350"
        >
          <template #default="scope">
            <!-- 如果没有城市列表，则显示“所有地区” -->
            <span v-if="!scope.row.cityList.length">所有地区</span>
            <!-- 否则显示具体城市 -->
            <el-tag
              v-for="city in scope.row.cityList"
              v-else
              :key="city.areaId"
            >
              {{ city.areaName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 动态列标题，根据chargeType改变 -->
        <el-table-column
          prop="firstPiece"
          :label="tableTitle[0]"
        />
        <el-table-column
          prop="firstFee"
          :label="tableTitle[1]"
        />
        <el-table-column
          prop="continuousPiece"
          :label="tableTitle[2]"
        />
        <el-table-column
          prop="continuousFee"
          :label="tableTitle[3]"
        />
      </el-table>
    </el-form-item>

    <!-- 展示包邮条件 -->
    <el-form-item v-if="transportInfo.hasFreeCondition === 1">
      <el-table
        :data="transportInfo.transfeeFrees"
        style="width: 100%"
      >
        <el-table-column
          label="指定区域"
          width="350"
        >
          <template #default="scope">
            <el-tag
              v-for="city in scope.row.freeCityList"
              :key="city.areaId"
            >
              {{ city.areaName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="freeType"
          label="包邮条件"
        >
          <template #default="scope">
            <span v-if="scope.row.freeType === 0">满件/重量/体积包邮</span>
            <span v-if="scope.row.freeType === 1">满金额包邮</span>
            <span v-if="scope.row.freeType === 2">满件/重量/体积且满金额包邮</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount">
          <template #default="scope">
            <span v-if="scope.row.freeType === 1">满{{ scope.row.amount }}元金额包邮</span>
            <span v-if="scope.row.freeType === 0">满{{ scope.row.piece }}件/重量/体积包邮</span>
            <span v-if="scope.row.freeType === 2">满{{ scope.row.piece }}件/重量/体积且满{{ scope.row.amount }}元金额包邮</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </div>
</template>

<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props，接收父组件传递的modelValue
const props = defineProps({
  modelValue: {
    default: null,
    type: Number
  }
})

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

// 绑定运费模板ID
const transportId = ref(null)

// 计算属性，动态生成表格标题
const tableTitle = computed(() => {
  const titles = [
    ['首件(个)', '运费(元)', '续件(个)', '续费(元)'],
    ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'],
    ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']
  ]
  if (transportInfo.value.chargeType !== undefined) {
    return titles[transportInfo.value.chargeType]
  }
  return titles[0]
})

// 监听props.modelValue的变化，同步到本地变量
watch(
  () => props.modelValue,
  (id) => {
    transportId.value = id
  }
)

// 组件挂载时获取运费模板列表
onMounted(() => {
  getTransportList()
})

// 存储运费模板列表的数据
const transportList = ref([{
  transportId: null,
  transName: ''
}])

/**
 * 获取运费模板列表
 */
const getTransportList = () => {
  http({
    url: http.adornUrl('/shop/transport/list'),
    method: 'get',
    params: http.adornParams({})
  })
    .then(({ data }) => {
      transportList.value = data
    })
}

// 存储选中运费模板的信息
const transportInfo = ref({
  hasFreeCondition: false,
  transfeeFrees: [{ freeCityList: [] }]
})

/**
 * 当运费模板选择发生变化时触发
 * @param id - 选中的运费模板ID
 */
const changeTransport = (id) => {
  emit('update:modelValue', id) // 更新父组件的modelValue
  if (!id) {
    return
  }
  http({
    url: http.adornUrl(`/shop/transport/info/${transportId.value}`),
    method: 'get',
    params: http.adornParams({})
  })
    .then(({ data }) => {
      transportInfo.value = data // 更新运费模板信息
    })
}
</script>
