<script setup lang="ts">
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import {
  createOrderApi,
  payAppointmentApi,
  queryOrderStatusApi,
  queryParamsApi,
} from "@/services/home";
import type { QueryPa } from "@/types/home";
import HomeList from "./components/HomeList.vue";
import { loginUser } from "@/hooks/useIsLogin";
import { useMemberStore } from "@/stores";
const userInfo = useMemberStore();
//1 未支付   --可查看全部信息
//2 openId相等  但是状态是支付中  --可查看全部状态
//3 openId不相等  状态是别人在支付中 --不可查看任何信息
//4 openId 相等  但是已支付  --不再支付可查看生成的报告
//5 openId 不相等  别人已支付  --不可查看任何信息

/**
 * 总结  当返回状态是
 * 1或2时--按钮是微信支付---且列表显示--全部信息展示
 * 3和5时 所有信息不展示
 * 4时 按钮为查看风险评估
 *
 */

//获取到的传输过来的唯一值
const params = reactive<any>({
  title: "", //标题
  num: "", //剩余次数
  time: "", //有效截止日期
  flag: "", //当前订单的状态
});

// const userId = ref<string>("");
//调用查询参数需要的入参
const scene = ref<QueryPa>({ scene: "", userId: "" });
const orderId = ref<string>("");

//onLoad方法  --在页面初次加载时触发，仅会在页面初次加载时触发一次
//应该将二维码获取唯一标识放到缓存中--这样即使从其他页面过来就回调用就能记住这个标识--然后根据标识去查询
onLoad((options) => {
  //获取的二维码中得到的参数信息
  // console.log(decodeURIComponent(options?.scene));
  // scene.value.scene = decodeURIComponent(options?.scene);
  userInfo.saveScene(decodeURIComponent(options?.scene));
  //将scene存入缓存中

  // loginUser().then((res) => {
  //   //这时已经有返回信息了且用户数据已经
  //   scene.value.userId = res as string;
  //   //获取到userId了
  //   queryParams(scene.value);
  // });
});
onShow(() => {
  //从缓存中取出信息
  //  scene.value.scene = decodeURIComponent(options?.scene);
  //将scene存入缓存中
  scene.value.scene = userInfo.scene;
  loginUser().then((res) => {
    //这时已经有返回信息了且用户数据已经
    scene.value.userId = res as string;
    //获取到userId了
    queryParams(scene.value);
  });
});

//查询 根据唯一键值对
const queryParams = async (val: QueryPa) => {
  const res = await queryParamsApi(val);

  params.flag = res.data.flag;
  if (params.flag == 3 || params.flag == 5) {
    return;
  }
  params.title = res.data.title;
  params.num = res.data.times;

  params.time = formatterData(res.data.createDate, res.data.effectiveDays);
};

//有效日期
const formatterData = (date: any, day: any) => {
  //将data日期格式化为初始的毫秒值
  //将day 日期格式化为day

  let dateF = new Date(date).getTime();
  let dayF = day * 24 * 60 * 60 * 1000;
  console.log(dateF);
  console.log(dayF);
  let dataN = dateF + dayF;
  //然后将毫秒值转化为具体时间
  let dataNew = new Date(dataN);
  let y = dataNew.getFullYear();
  let m =
    dataNew.getMonth() + 1 < 10 ? "0" + (dataNew.getMonth() + 1) : dataNew.getMonth() + 1;

  let d = dataNew.getDate() < 10 ? "0" + dataNew.getDate() : dataNew.getDate();
  return y + "-" + m + "-" + d;
};

//1先生成订单号
//2订单号生成后调用后台获取核心参数  核心参数获取到以后
//3调用位置支付、、 查看成功与否
//4如果是成功支付和用户取消了订单
//5否则循环调用查询支付接口
//支付完成后进行下边的逻辑--开始查询报告

//点击支付按钮生成的方法
const payButton = () => {
  //先调用订单生成
  //creatOrderFun()
};
//生成订单号
const creatOrderFun = async (val: any) => {
  const res = await createOrderApi(val);
  //获取到订单号了

  //然后调用预支付接口后去核心数据
  //payFun(val)
};
//支付接口调用
//调用后台接口返回订单号
//调用后台接口返回  下单核心数据
const payFun = async (val: any) => {
  const res = await payAppointmentApi(val);
  //核心参数返回后
  //调用微信支付方法
  uni.requestPayment({
    ...val,
    success: (res: any) => {
      if (res) {
        console.log(res);
        if (res.errMsg == "requestPayment:ok") {
          //
          console.log("支付成功");
        }
      }
    },
    fail: (res: any) => {
      console.log(res);
      if (res.errMsg == "requestPayment:fail cancel") {
        console.log("用户取消了支付");
      } else {
        queryOrderFor();
        //调用支付失败的具体原因
        //这时是不是就应该定时器调用订单状态
      }
    },
  });
};

//查询订单状态
const queryOrderStatus = async (val: any) => {
  const res = await queryOrderStatusApi(val);
  //判定返回参数
  //如果订单完成了
  //如果是满了返回了
  //需要去掉定时器
  clearInterval(timeMe.value);
};
//定时器参数
const timeMe = ref<any>();
//创建一个定时器
const queryOrderFor = () => {
  //进来的时候清除定时器
  clearInterval(timeMe.value);
  timeMe.value = setInterval(() => {
    //嗲用方法
    queryOrderStatus({});
  }, 3000);
};

//销毁页面
onUnload(() => {
  //来清除定时器
  clearInterval(timeMe.value);
});
</script>
<template>
  <view class="payBg">
    <ShuiWuTop />
    <view class="pay_params">
      <view class="pay_card_title1">
        {{ params.title }}
      </view>
      <view class="pay_card_num"> 剩余生成次数：{{ params.num }} </view>
      <view class="pay_card_time"> 有效日期：{{ params.time }} </view>
    </view>
    <view v-show="params.flag == 1 || params.flag == 2"
      ><button class="pay_button" @click="payButton">立即支付</button></view
    >
    <view v-show="params.flag == 4"
      ><button class="detection_button">税务风险检测</button></view
    >

    <view v-show="params.flag == 4"><HomeList class="home_list_com" /></view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
}
.payBg {
  background-color: rgb(243, 250, 248);
  width: 750rpx;
  height: 100%;
  padding: 0rpx 20rpx;
  .pay_params {
    border-radius: 20rpx;
    color: #ffffff;
    margin-top: 60rpx;
    padding: 20rpx 40rpx;
    background: linear-gradient(#bbc0ee, #55459e);
    display: flex;
    flex-direction: column;
    .pay_card_title1 {
      font-size: 40rpx;
      padding-top: 20rpx;
      padding-bottom: 40rpx;
      padding-left: 20rpx;
    }
    .pay_card_num {
      font-size: 26rpx;
      padding-left: 20rpx;
      margin-top: 20rpx;
    }
    .pay_card_time {
      font-size: 26rpx;
      padding-left: 20rpx;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
    }
  }
  .pay_button {
    color: #ffffff;
    border-radius: 20rpx;
    margin-top: 40rpx;
    width: 100%;
    background: linear-gradient(#bbc0ee, #55459e);
  }
  .detection_button {
    border-radius: 20rpx;
    color: #ffffff;
    width: 100%;
    background: linear-gradient(#bb8e2d, #c7ca11);
  }
}
</style>
