<template>
  <uv-navbar autoBack title="店铺续费" placeholder />
  <view class="head"> 到期时间：{{ date || "--" }} </view>
  <view class="content">
    <view class="list-item u-flex-center-sb">
      <text>续费时长</text>
      <text class="num">一年</text>
    </view>
    <view class="form-item">
      <view class="label">账户码：</view>
      <input
        placeholder="请输入账户码"
        class="input"
        placeholder-class="input-placeholder"
        v-model="formData.accountCode"
      />
    </view>
    <view class="tip">*账户码请联系上级购买</view>
  </view>
  <view class="footer">
    <button class="u-btn-two" @click="handleSubmit">确认续费</button>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import { ticketBusinessRenewApi } from "@/api/ShopContent";

const date = ref(null);
const formData = reactive({});

const handleSubmit = async () => {
  if (!formData.accountCode) return uni.$uv.toast("请输入账户码");
  uni.showLoading({ title: "提交中...", mask: true });
  try {
    const res = await ticketBusinessRenewApi(formData);
    uni.hideLoading();
    uni.$uv.toast("续费成功");
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  } catch (error) {
    uni.hideLoading();
  }
};

onLoad((options) => {
  console.log("App Launch", options);
  if (options.date) date.value = options.date;
});
</script>

<style lang="scss" scoped>
.head {
  box-sizing: border-box;
  padding: 50rpx 30rpx 30rpx;
  border-bottom: 12rpx solid #f7f7f7;
}

.content {
  box-sizing: border-box;
  padding: 30rpx;
  .list-item {
    padding: 20rpx 24rpx;
    background: #fff7f2;
    border: 2rpx solid #cd7647;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    margin-bottom: 20rpx;
    .num {
      font-size: 32rpx;
      color: #ff4144;
      font-weight: 700;
    }
  }
  .form-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    .label {
      margin-bottom: 10rpx;
    }
    .input {
      font-size: 28rpx;
    }
    .input-placeholder {
      color: #cccccc;
      font-size: 28rpx;
    }
  }
}
.tip {
  color: #ff0000;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.footer {
  width: 750rpx;
  box-sizing: border-box;
  padding: 30rpx 60rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  .u-btn-two {
    height: 90rpx;
    line-height: 90rpx;
  }
}
</style>
