<template>
  <div>
    <div v-for="(item, index) in modelValue" :key="index" class="flex gap-4 mb-2">
      <el-select v-model="item.coupon.id" placeholder="请选择优惠券">
        <el-option v-for="coupon in couponList" :key="coupon.id" :label="coupon.title" :value="coupon.id" />
      </el-select>
      <el-input v-model="item.num" placeholder="请输入数量">
        <template #append>数量</template>
      </el-input>
      <div>
        <el-link :underline="false" type="danger" class="no-wrap" @click="modelValue.splice(index, 1)">
          删除
        </el-link>
      </div>
    </div>
    <div class="flex">
      <div class="flex gap-1 cursor-pointer" @click="addCoupon()">
        <el-icon color="#3F9EFF">
          <CirclePlus />
        </el-icon>
        <el-link :underline="false" type="primary" class="no-wrap">新增券</el-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import couponApi from "@/api/market/coupon";

import { ref, reactive, onMounted } from "vue";
const modelValue = defineModel({
  type: Array,
  default: () => [],
});

// 优惠券列表
const couponList = ref([]);
function addCoupon() {
  if (!modelValue.value) {
    modelValue.value = [
      {
        num: 1,
        coupon: {
          id: null,
        },
      },
    ];
    return;
  }
  modelValue.value.push({
    num: 1,
    coupon: {
      id: null,
    },
  });
  console.log(modelValue.value);
}

onMounted(() => {
  couponApi.getList({ size: 999 }).then((res) => {
    if (res) {
      couponList.value = res.records || [];
    }
  });
});

// function changeCoupon(e, index) {
//   const coupon = couponList.value.find((item) => item.id === e);
//   console.log(coupon);
//   modelValue.value[index].coupon = coupon;
// }
</script>