<template>
  <div class="coupon-container">
    <div class="header">
      <div class="back-btn" @click="$router.go(-1)"><</div>
      <div class="header-text">
        优惠券包
      </div>
      <div class="link-btn" @click="$router.push('/coupon')">领券中心</div>
    </div>

    <div class="coupon-list">
      <div class="coupon-item" v-for="coupon in couponList" :key="coupon.id">
        <div class="coupon-info">
          <div class="coupon-name">{{ getCouponName(coupon.couponInfo.type) }}</div>
          <div class="right">
            <div class="coupon-title">
              {{ getCouponTitle(coupon.couponInfo.type)[0] }}
              <span class="value">
                {{ coupon.couponInfo.discount === "0.00" ? coupon.couponInfo.price === "0.00" ? coupon.couponInfo.precent/10 : coupon.couponInfo.price : coupon.couponInfo.discount }}
              </span>
              {{ getCouponTitle(coupon.couponInfo.type)[1] }}
            </div>
            <div class="coupon-describe">{{ getCouponDescribe(coupon.couponInfo.type, coupon.couponInfo.for_a_amount === "0.00" ? coupon.couponInfo.price === "0.00" ? coupon.couponInfo.precent : coupon.couponInfo.price : coupon.couponInfo.for_a_amount) }}</div>
          </div>
        </div>
        <img src="/imgs/line.png" alt="虚线" class="line-image">
        <div class="coupon-bottom">
          {{ coupon.use_time === null ? '未使用' : '已使用' }}
          <span class="text" @click="showCouponDetail(coupon)">适用商品</span>
        </div>
      </div>
    </div>

    <el-drawer
      title="优惠券详情"
      v-model="dialogVisible"
      width="50%"
      direction="btt"
      size="90%"
      show_close
    >
      <div class="product-item" v-for="(product, index) in couponDetail.products" :key="product.id" @click="$router.push(`/productsummary/${couponDetail.products_id[index]}`)">
        {{ product.name }}
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </el-drawer>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/utils/api'
import { useUserStore } from '@/stores/user'

const user = useUserStore().user

const couponList = ref([])

const dialogVisible = ref(false)
const couponDetail = ref([])

const getCouponList = async () => {
  const response = await api.get(`/coupon/user/${user.id}`)
  couponList.value = response.data.coupon
}

const getCouponName = (couponType) => {
  const couponName = {
    'discount_for_a_amount': '满减券',
    'deduction': '抵扣券',
    'discount': '折扣券',
  }
  return couponName[couponType] || couponType
}

const getCouponTitle = (couponType) => {
  const couponTitle = {
    'discount_for_a_amount': ['￥',''],
    'deduction': ['￥',''],
    'discount': ['商品','折券'],
  }
  return couponTitle[couponType] || couponType
}

const getCouponDescribe = (couponType, value) => {
  const couponDescribe = {
    'discount_for_a_amount': '满'+value+'可用',
    'deduction': '指定商品可用',
    'discount': '指定商品可用',
  }
  return couponDescribe[couponType] || couponType
}

const showCouponDetail = (coupon) => {
  couponDetail.value = coupon.couponInfo
  dialogVisible.value = true
  console.log(coupon)
}

onMounted(() => {
  getCouponList()
})
</script>

<style scoped>
.coupon-container {
  background: linear-gradient(180deg, #E3E8FF 0%, #ffffff00 100%);
  background-blend-mode: lighten;
  min-height: 100vh;
  overflow-x: hidden;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  position: relative;
  background: #FFFFFF;
  height: 46px;
  padding-right: 10px;
  padding-left: 10px;
  opacity: 1;
}

.back-btn {
  font-size: 15px;
  width: 26px;
  height: 26px;
  color: #000000;
  background: transparent;
  border: none;
  position: absolute;
  left: 0;
  margin-left: 30px;
  margin-top: 5px;
}

.header-text {
  width: 80px;
  height: 28px;
  opacity: 1;
  font-family: SF Pro;
  font-weight: 650;
  font-style: Expanded Semibold;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  margin-left: -20px;
}

.link-btn {
  background: #CADBFF;
  width: 80px;
  height: 28px;
  padding-right: 16px;
  padding-left: 16px;
  gap: 10px;
  opacity: 1;
  border-radius: 99px;
  border: none;
  position: absolute;
  right: 0;
  font-size: 10px;
  line-height: 28px;
  text-align: center;
  margin-right: 15px;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.coupon-item {
  background: #F5F7FF;
  width: 334px;
  height: 116px;
  padding-top: 8px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-left: 10px;
  gap: 10px;
  opacity: 1;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 2px 4px 4px 0px #00000040;
}

.coupon-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
}

.coupon-name {
  background: #D4E2FF;
  width: 80px;
  height: 28px;
  padding-right: 16px;
  padding-left: 16px;
  gap: 10px;
  opacity: 1;
  border-radius: 99px;
  font-size: 15px;
  line-height: 28px;
  text-align: center;
  color: #2F4FB5;
  margin-top: 20px;
}

.coupon-title,
.coupon-describe {
  width: 300px;
  height: 28px;
  opacity: 1;
  font-family: SF Pro;
  font-size: 16px;
  line-height: 28px;
  vertical-align: middle;
  margin-left: 20px;
}

.coupon-title {
  margin-top: 10px;
}

.value {
  font-size: 25px;
  font-weight: bold;
  color: #2F4FB5;
}

.line-image {
  margin-top: 10px;
}

.coupon-bottom {
  margin-top: 5px;
  margin-left: 15px;
}

.text {
  font-size: 14px;
  margin-left: 170px;
  margin-top: 5px;
  background: #2954E0;
  color: #ffffff;
  height: 28px;
  padding-right: 10px;
  padding-left: 10px;
  gap: 10px;;
  opacity: 1;
  border-radius: 999px;
}

.product-item {
  margin-bottom: 10px;
}
</style>
