<template>
  <view class="">
    <up-navbar
      bg-color="transparent"
      title="兑换中心"
      @leftClick="back"
    ></up-navbar>

    <view class="top"> </view>
    <view class="box">
      <view class="info">
        <view class="titile">兑换您的专属福利 </view>
        <view class="u-flex justify-center">
          <view class="input-box u-flex">
            <image class="icon" src="/user/static/duihuan.png"></image>
            <view class="u-flex-1">
              <input placeholder="请输入兑换码" v-model="code" />
            </view>
          </view>
        </view>
        <view class="u-flex justify-center u-m-t-24">
          <button class="duihuan" @click="confirmExchange">确认兑换</button>
        </view>
      </view>

      <view class="desc">
        <view>兑换说明:</view>
        <view>
          1、请直接输入您获得的兑换码，点击立即兑换即可
          <br />
          2、兑换码为一次性，兑换完成之后即失效
          <br />
          3、兑换获得的奖励，将直接发送至您的账号，可直接前往余额或优惠券查看
          <br />
          4、兑换码为赠品，不可转赠、不退不换
          <br />
          5、兑换码需在有效期内完成兑换，过期即作废
        </view>
      </view>
    </view>

    <confirmModal v-model="modal.confirm.show" :data="modal.confirm.data" @confirm="exchange"></confirmModal>
    <resultModal
      v-model="modal.result.show"
      :title="modal.result.title"
    ></resultModal>
  </view>
</template>

<script setup>
import confirmModal from "./components/confirm.vue";
import resultModal from "./components/result.vue";
import * as exchangeApi from "@/common/api/market/exchange.js";
import { reactive, ref } from "vue";
const modal = reactive({
  confirm: {
    show: false,
  },
  result: {
    show: false,
    title: "该兑换码无效，请输入有效兑换码",
  },
});

const code = ref("");
function confirmExchange() {
  if (code.value == "") {
    uni.showToast({
      title: "请输入兑换码",
      icon: "none",
    });
    return;
  }
  exchangeApi.redemption({
    code: code.value,
  }).then((res) => {
    if (res) {
      modal.confirm.show = true;
      modal.confirm.data = res;
    }
  })
}

function exchange() {
  exchangeApi
    .exchange({
      code: code.value,
    })
    .then((res) => {
      if (res) {
        modal.result.title = "兑换成功！奖励已发放至您的账户";
        modal.result.show = true;
        code.value = "";
      }
    })
    .catch((err) => {
      console.log("err,", err);
      modal.result.title = err.message || "该兑换码无效，请输入有效兑换码";
      modal.result.show = true;
    });
}

function back() {
  uni.navigateBack();
}
</script>

<style scoped lang="scss">
.top {
  width: 962rpx;
  height: 648rpx;
  flex-shrink: 0;
  border-radius: 962rpx;
  background: linear-gradient(357deg, #faf7ee 3.12%, #d8b285 71.51%);
  position: relative;
  transform: translateX(-104rpx) translateY(-136rpx);
}
.box {
  position: relative;
  transform: translateY(-340rpx);
  .info {
    padding: 0 74rpx;
  }
}
.input-box {
  display: flex;
  width: 604rpx;
  height: 106rpx;
  padding: 30rpx 40rpx;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
  border-radius: 70rpx;
  border: 2rpx solid #c58e4d;
  background: #fff;
  margin-top: 60rpx;
  .icon {
    width: 30rpx;
    height: 30rpx;
  }
}
.titile {
  color: #5c2602;
  font-family: "Source Han Sans CN";
  font-size: 48rpx;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.01rpx;
  text-align: center;
}
.duihuan {
  padding: 22rpx 236rpx;
  border-radius: 110rpx;
  background: #e8ad7b;
  line-height: 48rpx;
  margin: 0;
  white-space: nowrap;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 700;
}
.desc {
  color: #666666;
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0.01rpx;
  padding: 0 44rpx;
  margin-top: 160rpx;
}
</style>