<template>
  <window-size class="buy-coupon">
    <div class="coupon-box">
      <div class="flex">
        <div class="value-box">
          <div class="amount-box">
            <span class="amount">{{coupon.value}}</span>
            <span>&nbsp;元</span>
          </div>
          <div class="description">
            {{coupon.description}}
          </div>
          <div class="description" style="color: #1c1c1e">
            购买价格：￥{{coupon.price}}
          </div>
        </div>
        <div class="name-box">
          <div class="name">
            {{coupon.name}}
          </div>
          <div class="time">
            {{makeStartDate()}} - 2099.12.31
          </div>
        </div>
      </div>
      <div v-if="coupon.availableCharge" class="charge-name">
        <span class="alert">
          可用项目：
        </span>
        {{coupon.availableChargeName}}
      </div>
      <van-button
          block
          type="success"
          :style="{marginTop: coupon.availableCharge ? '10px' : '20px'}"
          @click="toCashier"
      >
        前往购买（￥{{coupon.price}}）
      </van-button>
    </div>
  </window-size>
</template>

<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import {getCouponInfo} from "@/api/coupon";
import store from "@/store";

const key = router.currentRoute.value.params.key

const coupon = ref({})

function makeStartDate() {
  return coupon.value.createTime?.split(" ")[0].replaceAll("-", ".")
}

function toCashier() {
  const createOrderRequest = {
    body: '购买优惠券',
    orderType: 6,
    totalFee: coupon.value.price,
    patientId: store.getters.getDefaultCard?.patientId || 'unknown',
    fundpayAmt: 0,
    acctpayAmt:0,
    cashpayAmt: coupon.value.price,
    couponAmt: 0,
    couponId: key
  }
  store.dispatch({
    type: 'storeCreateOrderRequest',
    createOrderRequest,
  }).then(() => {
    router.push('/cashier')
  })
}

onMounted(() => {
  getCouponInfo(key).then(res => {
    console.log(res)
    coupon.value = res
  }).catch(e => {
    console.log(e)
  })
})
</script>

<style lang="scss">
.buy-coupon{
  .coupon-box {
    margin: 20px 10px 10px 20px;
    width: calc(100% - 40px);
    height: max-content;
    background-color: white;
    border-radius: 8px;
    .flex {
      display: flex;
      align-items: center;
    }
    .value-box {
      margin: 20px 20px 6px 20px;
      color: rgb(25, 137, 250);
      .amount-box{
        font-weight: bold;
        .amount{
          font-size: 32px;
        }
      }
      .description {
        margin-top: 4px;
        font-size: 12px;
        margin-left: 2px;
      }
    }
    .name-box {
      margin-left: 30px;
      .name {
        font-size: 16px;
        font-weight: bold;
      }
      .time {
        margin-top: 12px;
        font-size: 12px;
      }
    }

    .charge-name {
      border-top: 1px dashed #dfdfdf;
      color: rgb(25, 137, 250);
      font-size: 12px;
      padding: 6px 10px;
      min-height: 30px;
      display: flex;
      align-items: center;
      .alert {
        color: darkred;
      }
    }
  }
}
</style>