<template>
  <div>
    <el-table ref="refTable" empty-text="无可用优惠券" :data="data" max-height="40vh">
      <el-table-column type="index" label="">
        <template v-slot="scope">
          <el-checkbox
            @change="couponClick($event, scope.row)"
            :model-value="scope.row.id == couponSel.id"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="name" label="券名称"></el-table-column>
      <el-table-column label="券类型" width="80">
        <template v-slot="scope">
          {{ UTILS.returnCoupType(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="discountAmount" label="抵扣" align="center">
        <template v-slot="scope">
          <span class="color-red">￥{{ scope.row.discountAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品信息" width="120">
        <template v-slot="scope">
          <div class="u-flex" v-if="scope.row.type == 2">
            <div v-if="scope.row.useFoods.length">
              <div class="u-flex">
                <el-image
                  :src="scope.row.productImg"
                  fit="cover"
                  style="width: 40px; height: 40px"
                ></el-image>
              </div>
              <div class="u-p-l-10">
                <div class="">{{ scope.row.productName }}</div>
                <div class="">x{{ scope.row.discountNum || 1 }}</div>
              </div>
            </div>
            <div v-else>任意商品 x{{ scope.row.discountNum || 1 }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="discountAmount" label="最大抵扣金额" align="center">
        <template v-slot="scope">
          <span class="color-red">￥{{ scope.row.maxDiscountAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="discountAmount" label="限制" width="180">
        <template v-slot="scope">
          <div class="u-flex">
            <span>支付满</span>
            <span class="color-red no-wrap">
              {{ scope.row.fullAmount }}
            </span>
            <span>元可用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="useRestrictions" label="描述"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import * as UTILS from "@/utils/coupon-utils.js";

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  couponSel: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["couponClick"]);

function couponClick(checked, row) {
  emit("couponClick", checked, row);
}
</script>