<template>
  <view style="background-color: white; height: 100vh">
    <u-navbar title="核验二维码"></u-navbar>
    <!-- 基础信息 -->
    <view class="base-box">
      <!-- 左侧 -->
      <view class="img-box">
        <u-avatar
          :src="$u.http.config.imgUrl + vuex_user.head"
          class="avatar-box"
        ></u-avatar>
      </view>
      <!-- 右侧 -->
      <view class="msg-box">
        <view>
          <text class="msg-name"> {{ baseMsg.name }} </text>
          <text class="status">{{ baseMsg.startYear }}届</text>
        </view>
        <view class="msg-desc"
          >{{ baseMsg.college }}-{{ baseMsg.major }}-{{
            "(" + baseMsg.educationStr + ")"
          }}</view
        >
      </view>
    </view>
    <!-- 阴影行 -->
    <view style="height: 20rpx; background-color: #f7f7f7"></view>
    <!-- 二维码 -->
    <view class="code-box">
      <view class="code-school">
        <u-avatar
          :src="$u.http.config.imgUrl + baseMsg.logo.slice(1)"
          class="avatar"
          size="mini"
        ></u-avatar>
        <view class="school-name" @click="testFn"> {{ baseMsg.school }} </view>
      </view>
      <view class="code-time">预约时间：{{ formData.retuenSchoolTime }}</view>
      <view class="uq-code">
        <!-- 二维码组件 -->
        <uqrcode ref="uqrcode" canvas-id="qrcode" :value="jumpURL" :options="options">
          <template v-slot:loading>
            <text style="color: #2979ff">loading...</text>
          </template>
        </uqrcode>
      </view>
    </view>
    <!--  -->
    <!-- <view @click="goPageFn">跳转成功页</view> -->
    <u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
    <u-toast ref="uToast" />
    <!-- 按钮 -->
    <view class="btn-box">
      <u-button style="width: 80%" shape="circle" type="primary" @click="cancelFn"
        >取消预约</u-button
      ></view
    >
  </view>
</template>

<script>
import { Debounce } from "../../../common/utils.js";
export default {
  data() {
    return {
      // 表单
      formData: {
        // code: "浙A88888", // 车牌号
        // phone: "22", // 联系电话
        // checked: false, //是否同意
        // remark: "上学上学-", //返校事由
        // date: "2025/09/18 12:68:45", //返校日期
        // otherDate: "2025/09/18 12:68:45", //提交时间
        // status: "已核验",
        // hyDate: "2025/09/18 12:68:45", //核验时间
        // desc: "驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由", //驳回理由

        userName: "李彪",
        college: "计算机信息工程学院",
        major: "计算机科学与技术",
        endYear: "2029",
        carNumber: "", // 车牌号
        phone: "", // 联系电话
        checked: false, //是否同意
        retuenSchoolReason: "-", //返校事由
        retuenSchoolTime: "", //返校日期
        hyDate: "2025/09/18 12:68:45", //核验时间
        createTime: "2025-01-07 11:07:20", //提交时间
        auditRemark: null, //驳回理由
      },
      // 随行人
      sxList: [
        {
          name: "",
          phone: "",
        },
      ],
      // 选择日期
      dateShow: false,
      //
      inputStyle: {
        lineHeight: "90rpx",
        height: "90rpx",
        width: "400rpx",
      },
      eachStyle: {
        lineHeight: "80rpx",
        height: "80rpx",
        width: "400rpx",
      },
      options: {
        // margin: 10,
      },
      queryParams: {
        id: "",
      },
      // 扫描网址
      jumpURL: "http://192.168.1.8:8080/pages/my/BackSuccess/BackSuccess?id=",
      // 基础信息
      baseMsg: {
        id: "",
        name: "", //姓名
        schoolName: "",
        logo: "",
        startYear: "", //入学年份
        college: "", //学院
        educationStr: "", //学历层次
        major: "", //专业
        endYear: "", //毕业年份
      },
      // 二维码信息
      codeMsg: {
        id: "",
        returnSchoolPrebookId: "",
        retuenSchoolTime: "",
        isVerified: false,
        verifyQRCode: "", //二维码
        verifyTime: null,
      },
      interval: null, // 保存定时器的引用
    };
  },
  onLoad(e) {
    console.log(e, "e--");
    Object.assign(this.queryParams, e);
    this.jumpURL =
      window.location.origin +
      "/#/pages/my/BackCodeLook/BackCodeLook?id=" +
      this.queryParams.id;
    console.log(this.jumpURL, "this.jumpURL----------");
  },
  onHide() {
    // 在组件销毁前清除定时器以防止内存泄漏
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  created() {
    this.getCodeFn();
    this.getSchoolFn();
    this.getDetailFn();
    // 然后每隔1秒获取一次数据
    // this.interval = setInterval(this.getCodeFn, 2000);
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器以防止内存泄漏
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  methods: {
    testFn() {
      console.log(this.$refs.uqrcode, "this.$refs.uqrcode");
    },
    // 取消预约
    async cancelFn() {
      uni.showModal({
        // title: "提示",
        content: `确定取消本次预约？`,
        success: async (res) => {
          if (res.confirm) {
            const req = {
              id: this.queryParams.id,
              // educationId: this.baseMsg.id,
            };
            const res = await this.$u.apiList.DelReturnSchoolInfoApi(req).catch((e) => e);
            console.log(res, "res----");
            if (res?.succeed === false) {
              /* uni.showToast({
                icon: "error",
                title: res.error || "取消失败",
                duration: 2000,
              }); */
              this.$refs.uToast.show({
                title: res.error || "取消失败",
                type: "error",
              });
              return;
            }
            /* uni.showToast({
              title: "取消预约成功!",
              duration: 2000,
            }); */
            this.$refs.uToast.show({
              title: "取消预约成功!",
              type: "success",
            });
            setTimeout(() => {
              // 返回上一页
              /* this.$u.route({
                url: "pages/my/BackSchool/BackSchool",
              }); */
              uni.navigateBack({
                delta: 1
              });
            }, 1000);
          }
          if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    async getSchoolFn() {
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyEducations(req);
      console.log(res, "res--");
      const findRow = res.find((x) => x.isSelected === true);
      if (!findRow) {
        /* uni.showToast({
          title: "未查询到当前教育经历",
          icon: "none",
        }); */
        this.$refs.uToast.show({
          title: "未查询到当前教育经历",
          type: "error",
        });
        return;
      }
      Object.assign(this.baseMsg, findRow);
      this.baseMsg.name = this.vuex_user.name;
    },
    // 获取详情
    async getDetailFn() {
      const req = {
        id: this.queryParams.id,
      };
      const result = await this.$u.apiList.SelectReturnSchoolInfoApi(req);
      console.log(result, "result-");
      //
      if (result.isVerified) {
        // 跳转到返回成功界面
        return;
      }
      Object.assign(this.formData, result);
      this.formData.retuenSchoolTime = this.formData.retuenSchoolTime
        .replaceAll("0:00:00", "")
        .replaceAll("00:00:00", "");
    },
    // 获取二维码
    async getCodeFn() {
      const req = {
        id: this.queryParams.id,
      };
      const res = await this.$u.apiList.SaveReturnSchoolVerifyApi(req);
      console.log(res, "res--二维码结果");
      Object.assign(this.codeMsg, res);
    },
    submitFn() {},
    goPageFn() {
      this.$u.route({
        url: `pages/my/BackSuccess/BackSuccess?id=${6666}&name=${777}`,
        // params: {
        //   row: JSON.stringify(data),
        // },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 基础信息
.base-box {
  background-color: white;
  // border: 1px solid red;
  display: flex;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  // 左侧头像
  .img-box {
    // border: 1px solid red;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
  // 右侧
  .msg-box {
    // border: 1px solid blue;
    flex: 1;
    .msg-name {
      font-size: 32rpx;
      color: black;
    }
    .status {
      margin-left: 15rpx;
      background-color: #ecf1ff;
      color: #2d7ad6;
      padding-left: 15rpx;
      padding-right: 15rpx;
      border-radius: 15rpx;
    }
    .msg-desc {
      color: #909090;
      margin-top: 10rpx;
    }
  }
}
// 二维码盒子
.code-box {
  .code-school {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    padding-top: 10rpx;
    .avatar {
      width: 60rpx;
    }
    .school-name {
      margin-left: 10rpx;
      color: black;
    }
  }
  .code-time {
    text-align: center;
    color: black;
    margin-top: 20rpx;
    font-size: 30rpx;
    font-weight: 700;
  }
  .uq-code {
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
  }
}
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
