<template>
  <view style="background-color: white; height: 100vh">
    <u-navbar title="返校预约" :custom-back="goPageFn"></u-navbar>
    <!-- tabs -->
    <u-tabs-swiper
      ref="uTabs"
      :list="tabList"
      :current="current"
      :is-scroll="false"
      :active-item-style="{ color: '#3CB5FB'}"
      :bar-style="{ background: '#3CB5FB' }"
      @change="tabsChange"
    ></u-tabs-swiper>
    <!-- 滚动区域 -->
    <scroll-view
      scroll-y="true"
      style="
        height: calc(100vh - 320rpx);
        width: 100%;
        border-top: 1px solid #edf2fa;
        background-color: #f1f2f6;
        box-sizing: border-box;
      "
      @scrolltolower="onreachBottom"
    >
      <view
        class="item"
        v-for="(x, y) in schoolList"
        @click="detailFn(x)"
        :key="y"
      >
        <view class="item-line">
          <text class="line-label"> 预约人：</text>
          <text class="line-value"> {{ x.userName }} </text>
          <!-- 待审核 -->
          <text v-if="current === 0" class="line-status yellow">待审核</text>
          <!-- 待核验 -->
          <template v-if="current === 1">
            <text class="line-status blue">待核验</text>
          </template>
          <!-- 已结束 -->
          <template v-if="current === 2">
            <text
              v-if="['已核验'].includes(x.prebookStateZN)"
              class="line-status green"
              >已返校</text
            >
            <text
              v-if="['未返校', '待核验'].includes(x.prebookStateZN)"
              class="line-status red"
              >未返校</text
            >
            <text
              v-if="['已驳回'].includes(x.prebookStateZN)"
              class="line-status red"
              >已驳回</text
            >
            <text
              v-if="['已取消'].includes(x.prebookStateZN)"
              class="line-status red"
              >已取消</text
            >
          </template>
        </view>
        <view class="item-line">
          <text class="line-label"> 预约时间：</text>
          <text class="line-value"> {{ x.retuenSchoolTime || "-" }} </text>
        </view>
        <view class="item-line">
          <text class="line-label"> 车牌号：</text>
          <text class="line-value"> {{ x.carNumber || "-" }} </text>
        </view>
        <view class="item-time">
          <text class="line-label"> 提交时间：</text>
          <text class="line-value"> {{ x.createTime || "-" }} </text>
        </view>
      </view>
      <no-data v-if="!schoolList.length"></no-data>
    </scroll-view>
    <!-- 按钮 -->
    <view class="btn-box">
      <u-button
        style="width: 90%"
        shape="circle"
        type="primary"
        @click="applyFn"
        >我要预约</u-button
      >
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { Debounce } from "../../../common/utils.js";
import { AuditStateEnumMap, PrebookStateEnumMap } from "@/enums/index.js";
import NoData from "@/components/NoData.vue";
export default {
  components: { NoData },
  data() {
    return {
      tabList: [
        {
          name: "待审核",
        },
        {
          name: "待核验",
        },
        {
          name: "已结束",
        },
      ],
      current: 0,
      // 预约列表
      schoolList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      // 星期设置
      weekSet: [],
      // 学校基础信息
      baseMsg: {
        id: "",
        name: "", //姓名
        schoolName: "",
        schoolLogo: "",
        startYear: "", //入学年份
        college: "", //学院
        educationStr: "", //学历层次
        major: "", //专业
        endYear: "", //毕业年份
      },
    };
  },
  async onLoad(e) {
    // console.log(AuditStateEnum, "AuditStateEnum--");
    // 获取用户当前学校
    await this.getSchoolFn();
    // 获取列表
    this.getListFn();
    // 获取设置
    this.getSetFn();
  },
  created() {},
  methods: {
    // 获取用户当前学校
    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;
      }
      console.log(findRow, "findRow--当前学校");
      Object.assign(this.baseMsg, findRow);
    },
    //获取返校设置
    async getSetFn() {
      const req = {
        schoolId: this.baseMsg.schoolId,
      };
      const res = await this.$u.apiList.SelectInfoSetApi(req);
      console.log(res, "res--");
      // 星期设置
      this.weekSet = res.dayOfWeek.split(",").map((x) => Number(x));
      // 是否查看二维码
      this.isVerify = res.isVerify;
    },
    // 触底函数
    onreachBottom() {
      console.log("触底了");
      let num = this.pageIndex * this.pageSize;
      if (num >= this.total) return;
      this.pageIndex++;
      this.getListFn();
    },
    // 获取列表
    async getListFn() {
      const req = {
        id: this.vuex_user.id,
        type: this.current,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        educationId: this.baseMsg.id,
      };
      let res = null;
      // 待审核
      if ([0].includes(this.current)) {
        res = await this.$u.apiList.SelectReturnSchoolList_dshApi(req);
      }
      // 待核验，已结束
      if ([1, 2].includes(this.current)) {
        res = await this.$u.apiList.SelectReturnSchoolList_typeApi(req);
      }
      console.log(res, "res--");
      this.total = res.item2;
      if (res.item1.length) {
        this.schoolList = [...this.schoolList, ...res.item1];
        //
        this.schoolList.forEach((x) => {
          x.prebookStateZN = PrebookStateEnumMap.get(x.prebookState);
          x.auditStateZN = AuditStateEnumMap.get(x.auditState);
          // x.retuenSchoolTime = x.retuenSchoolTime.slice(0, 9);
        });
        console.log(
          JSON.parse(JSON.stringify(this.schoolList)),
          "this.schoolList"
        );
      }
    },
    goPageFn() {
      /* uni.switchTab({
        url: "/pages/my/my/my",
      }); */
      uni.navigateBack({
        delta: 1
      });
    },
    // tabschange
    tabsChange(i) {
      console.log(i, "i----");
      if (this.current !== i) {
        this.current = i;
        this.schoolList = [];
        this.pageIndex = 1;
        this.getListFn();
      }
    },
    // 我要预约
    applyFn() {
      if (!this.weekSet.length) {
        /* uni.showToast({
          title: "当前暂停开放返校服务",
          icon: "none",
        }); */
        this.$refs.uToast.show({
          title: "当前暂停开放返校服务",
          type: "error",
        });
        return;
      }
      this.$u.route({
        url: "pages/my/BackApply/BackApply",
      });
    },
    // 查看详情
    detailFn(row) {
      console.log(row, "row----");
      // 待审核
      if ([0].includes(this.current)) {
        this.$u.route({
          url: `pages/my/BackDetail/BackDetail?id=${row.id}&status=待审核`,
        });
      }
      // 待核验
      if ([1].includes(this.current)) {
        // 开启二维码
        if (this.isVerify) {
          // 核验二维码
          this.$u.route({
            url: `pages/my/BackCode/BackCode?id=${row.id}&status=待核验`,
          });
          return;
        }
        // 未开启二维码
        this.$u.route({
          url: `pages/my/BackDetail/BackDetail?id=${row.id}&status=待核验`,
        });
      }
      // 已结束
      if ([2].includes(this.current)) {
        this.$u.route({
          url: `pages/my/BackDetail/BackDetail?id=${row.id}&status=已结束`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: calc(100% - 64rpx);
  margin: 32rpx 32rpx 0;
  // height: 80rpx;
  text-align: center;
  // border-bottom: 1px solid blue;
  // margin-top: 20rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  background: #FFFFFF;
border-radius: 24rpx;
border: 2rpx solid #F7F6F9;
  // 时间
  .item-time {
    text-align: left;
    padding-left: 30rpx;
    font-size: 30rpx;
    line-height: 40rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #969696;
    .line-value {
      // font-weight: 700;
      color: black;
    }
  }
  // 单行样式
  .item-line {
    text-align: left;
    padding-left: 30rpx;
    font-size: 30rpx;
    // line-height: 40rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    .line-label {
      // font-size: 30rpx;
      color: #969696;
    }
    .line-value {
      // font-weight: 700;
      color: black;
    }
    // 状态
    .line-status {
      // padding-left: 20rpx;
      // padding-right: 20rpx;
      margin-left: 20rpx;
      font-size: 24rpx;
      display: inline-block;
      box-sizing: border-box;
      width: 104rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      border-radius: 6rpx;
    }
    // 待审核
    .yellow {
      color: #efa643;
      background-color: #fef6e7;
    }
    // 待核验
    .blue {
      color: #278eeb;
      background-color: #e7f3ff;
    }
    // 已核验
    .green {
      color: #74b57f;
      background-color: #ecfbf4;
    }
    // 未返校 已驳回 已取消
    .red {
      color: #d2564c;
      background-color: #ffeeed;
    }
  }
}
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f2f6;
}
::v-deep .u-tabs-scorll-flex .u-tabs-item {
		transition: all 0.1s;
		font-size: 28rpx !important;
	}
</style>
