<template>
  <view style="background-color: white; height: 100vh">
    <u-navbar title="返校预约申请" :custom-back="goPageFn"></u-navbar>
    <!-- 内容 -->
    <scroll-view
      scroll-y="true"
      style="
        height: calc(100vh - 240rpx);
        width: 100%;
        border-top: 1px solid #edf2fa;
        background-color: #f1f2f6;
        box-sizing: border-box;
      "
    >
      <!-- 基础信息 -->
      <view class="base-box">
        <view class="item-line">
          <text class="line-label"> 预约人</text>
          <text class="line-value"> {{ formData.userName || "-" }} </text>
        </view>
        <view class="item-line">
          <text class="line-label"> 学院专业</text>
          <text class="line-value"> {{ baseMsg.college + "-" + baseMsg.major }} </text>
        </view>
        <view class="item-line">
          <text class="line-label"> 学历层次</text>
          <text class="line-value"> {{ baseMsg.educationStr || "-" }} </text>
        </view>
        <view class="item-line">
          <text class="line-label"> 毕业年份</text>
          <text class="line-value"> {{ baseMsg.endYear || "-" }} </text>
        </view>
      </view>
      <!-- 表单 -->
      <view class="form-box">
        <!-- 返校日期 -->
        <view class="item-date">
          <text class="line-label"> 返校日期</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            :value="formData.retuenSchoolTime"
            placeholder=""
            disabled
          />
        </view>
        <!-- 提示 -->
        <view class="item-tip" v-if="weekSet.length">
          <text class="line-label"> 提示：每周{{ dateTip }}暂停开放返校服务</text>
        </view>
        <!-- 车牌号 -->
        <view class="item-line">
          <text class="line-label"> 车牌号</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.carNumber || '-'"
            placeholder=""
            disabled
          />
        </view>
        <!-- 联系电话 -->
        <view class="item-line">
          <text class="line-label"> 联系电话</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="20"
            :value="formData.phone"
            placeholder=""
            disabled
          />
        </view>
        <!-- 随行人信息 -->
        <view class="item-line" v-if="sxList.length">
          <text class="line-label"> 随行人信息</text>
        </view>
        <!-- 动态随行人 -->
        <view class="item-for" v-for="(x, xIndex) in sxList" :key="xIndex">
          <!-- 左侧内容 -->
          <view class="for-left">
            <view class="each">
              <text> 随行人{{ xIndex + 1 }}</text>
              <u-input
                :custom-style="eachStyle"
                type="text"
                input-align="right"
                :border="false"
                maxlength="20"
                :value="x.name"
                placeholder="-"
                disabled
              />
            </view>
            <view class="each">
              <text> 手机号</text>
              <u-input
                :custom-style="eachStyle"
                type="text"
                input-align="right"
                :border="false"
                maxlength="20"
                :value="x.phone"
                placeholder="-"
                disabled
              />
            </view>
          </view>
        </view>
        <!-- 返校事由 -->
        <view class="item-line" style="border-bottom: none;">
          <text class="line-label"> 返校事由</text>
        </view>
        <view class="item-text">
          <u-input
          :custom-style="{color:'#969696'}"
            type="textarea"
            height="200"
            :border="false"
            :value="formData.retuenSchoolReason || '-'"
            placeholder=""
            disabled
          />
        </view>
      </view>
      <!-- 其余信息 -->
      <view class="other-box">
        <!-- 提交时间 -->
        <view class="item-line">
          <text class="line-label"> 提交时间</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.createTime"
            placeholder=""
            disabled
          />
        </view>
        <!-- 核验状态 -->
        <view class="item-line">
          <text class="line-label"> 核验状态</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.prebookStateZN"
            placeholder=""
            disabled
          />
        </view>
        <!-- 核验时间 -->
        <view class="item-line" v-if="['已核验'].includes(formData.prebookStateZN)">
          <text class="line-label"> 核验时间</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.returnSchoolPrebookVerify[0].verifyTime"
            placeholder=""
            disabled
          />
        </view>
        <!-- 取消时间  --- 待对接 -->
        <view class="item-line" v-if="['已取消'].includes(formData.prebookStateZN)">
          <text class="line-label"> 取消时间</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.cancelTime"
            placeholder=""
            disabled
          />
        </view>
        <!-- 审核时间 -->
        <!-- v-if="['已驳回', '已核验', '未返校'].includes(formData.prebookStateZN)" -->
        <view
          class="item-line"
          v-if="formData.auditTime"
        >
          <text class="line-label"> 审核时间</text>
          <u-input
            :custom-style="inputStyle"
            type="text"
            input-align="right"
            :border="false"
            maxlength="10"
            :value="formData.auditTime"
            placeholder=""
            disabled
          />
        </view>
        <!-- 驳回理由 -->
        <template v-if="['已驳回'].includes(formData.prebookStateZN)">
          <view class="item-line">
            <text class="line-label"> 驳回理由</text>
          </view>
          <view class="item-text">
            <u-input
              type="textarea"
              height="200"
              :border="false"
              :value="formData.auditRemark || '-'"
              placeholder=""
              disabled
            />
          </view>
        </template>
      </view>
      <view style="height: 50rpx;background: #fff;"></view>
    </scroll-view>
    <!-- 按钮 -->
    <view class="btn-box">
      <u-button
        v-if="['待审核'].includes(queryParams.status)"
        style="width: 80%"
        shape="circle"
        type="primary"
        @click="cancelFn"
        >取消预约</u-button
      >
      <template v-if="['待核验'].includes(queryParams.status)">
        <u-button
          v-if="['管理员未开启核验功能'].includes(formData.prebookStateZN) && this.formData.isFlag === false"
          style="width: 80%"
          shape="circle"
          type="primary"
          @click="cancelFn"
        >
         取消预约
        </u-button>
        <u-button
        v-if="['管理员未开启核验功能'].includes(formData.prebookStateZN)  && this.formData.isFlag === true"
          style="width: 80%"
          shape="circle"
          type="primary"
          @click="submitFn"
        >
        确认返校
        </u-button>
      </template>
      <template v-if="['已结束'].includes(queryParams.status)">
        <u-button
          v-if="['已取消'].includes(formData.prebookStateZN)"
          style="width: 80%; background-color: #9ea1b9; color: white"
          disabled
          shape="circle"
        >
          已取消
        </u-button>
        <u-button
          v-if="['已驳回'].includes(formData.prebookStateZN)"
          style="width: 80%; background-color: #9ea1b9; color: white"
          disabled
          shape="circle"
        >
          已驳回
        </u-button>
        <u-button
          v-if="['已核验'].includes(formData.prebookStateZN)"
          style="width: 80%; background-color: #9ea1b9; color: white"
          disabled
          shape="circle"
        >
          已核验
        </u-button>
        <u-button
          v-if="['未返校','管理员未开启核验功能'].includes(formData.prebookStateZN)"
          style="width: 80%; background-color: #9ea1b9; color: white"
          disabled
          shape="circle"
        >
          未返校
        </u-button>
      </template>
    </view>
    <u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { AuditStateEnumMap, PrebookStateEnumMap } from "@/enums/index.js";
export default {
  data() {
    return {
      // 表单
      formData: {
        userName: "李彪",
        college: "计算机信息工程学院",
        major: "计算机科学与技术",
        endYear: "2029",
        carNumber: "", // 车牌号
        phone: "", // 联系电话
        checked: false, //是否同意
        retuenSchoolReason: "-", //返校事由
        retuenSchoolTime: "", //返校日期
        auditTime: "", //审核时间
        createTime: "", //提交时间
        auditRemark: null, //驳回理由

        id: "",
        retuenSchoolCount: 3,
        prebookState: 0,
        prebookStateZN: "", //状态
        verifyCount: 0,
        auditState: 0,
        auditStateZN: "",

        isFlag:false,//区分是否在核验时间内
      },
      // 随行人
      sxList: [
        {
          name: "",
          phone: "",
        },
      ],
      // 选择日期
      dateShow: false,
      //
      inputStyle: {
        lineHeight: "90rpx",
        height: "90rpx",
        width: "400rpx",
        color:"#969696"
      },
      eachStyle: {
        lineHeight: "80rpx",
        height: "80rpx",
        width: "400rpx",
        color:"#969696"
      },
      queryParams: {
        id: "",
      },
      // 基础信息
      baseMsg: {
        id: "",
        name: "", //姓名
        schoolName: "",
        schoolLogo: "",
        startYear: "", //入学年份
        college: "", //学院
        educationStr: "", //学历层次
        major: "", //专业
        endYear: "", //毕业年份
      },
      // 选择日期提示
      dateTip: "",
      weekSet: [],
      // 是否查看二维码
      isVerify: false,
    };
  },
  onLoad(e) {
    console.log(e, "e--");
    Object.assign(this.queryParams, e);
  },
  async created() {
   await this.getSchoolFn();
    await this.getSetFn();
    this.getDetailFn();
  },
  methods: {
    goPageFn(){
      // 返回上一页
      /* this.$u.route({
        url: "pages/my/BackSchool/BackSchool",
      }); */
      uni.navigateBack({
        delta: 1
      });
    },
    arrayToString(arr) {
      let result = "";
      const map = new Map([
        [0, "周日"],
        [1, "周一"],
        [2, "周二"],
        [3, "周三"],
        [4, "周四"],
        [5, "周五"],
        [6, "周六"],
      ]);
      arr.forEach((x) => {
        if (map.has(x)) {
          result += map.get(x) + "、";
        }
      });
      return arr.length ? result.slice(0, result.length - 1) : result;
    },
    //获取返校设置
    async getSetFn() {
      const req = {
        schoolId: this.baseMsg.schoolId,
      }
      const res = await this.$u.apiList.SelectInfoSetApi(req);
      console.log(res, "res--");
      let AllArr = [0, 1, 2, 3, 4, 5, 6];
      // 星期设置
      if (res.isDayOfWeek) {
        // 星期设置
        let result = res.dayOfWeek.split(",").map((x) => Number(x));
        this.weekSet = AllArr.filter((x) => {
          return !result.includes(x);
        });
        // 处理tip提示
        this.dateTip = this.arrayToString(this.weekSet);
      }
      // 是否查看二维码
      this.isVerify = res.isVerify;
    },
    // 获取教育经历
    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 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 submitFn(){
      uni.showModal({
        // title: "提示",
        content: `是否确认返校？确认后您的预约状态将变更为 “已返校”`,
        success: async (res) => {
          let year = new Date().getFullYear();
          let month =
            new Date().getMonth() < 10
              ? `0${new Date().getMonth() + 1}`
              : new Date().getMonth() + 1;
          let day =
            new Date().getDate() < 10 ? `0${new Date().getDate()}` : new Date().getDate();

          let currentDate = year + month + day;
          if (res.confirm) {
            const req = {
              id: this.queryParams.id,
              command: currentDate,
              schoolId: this.baseMsg.schoolId,
            };
            const res = await this.$u.apiList.SaveReturnSchoolInfoApi(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 getDetailFn() {
      const req = {
        id: this.queryParams.id,
      };
      const res = await this.$u.apiList.SelectReturnSchoolInfoApi(req);
      console.log(res, "res-");
      // 回填基础信息
      Object.assign(this.formData, res);
      this.formData.prebookStateZN = PrebookStateEnumMap.get(res.prebookState);
      // 如果未开启二维码,待核验变成 管理员未开启核验功能
      if (this.isVerify === false && ["待核验"].includes(this.formData.prebookStateZN)) {
        this.formData.prebookStateZN = "管理员未开启核验功能";
      }
      this.formData.auditStateZN = AuditStateEnumMap.get(res.auditState);
      this.formData.retuenSchoolTime = res.retuenSchoolTime
        .replaceAll("0:00:00", "")
        .replaceAll("00:00:00", "");
      console.log(JSON.parse(JSON.stringify(this.formData)),'this.formData-');
      // 回填随行人
      this.sxList = res.returnSchoolPrebookTogetherPerson.sort((a, b) => {
        return a.index - b.index;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body-box {
  max-height: calc(100vh - 250rpx);
  overflow-y: auto;
  border: 1px solid red;
}
// 基础信息
.base-box {
  background-color: white;
  // 单行样式
  .item-line {
    text-align: left;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 30rpx;
    line-height: 90rpx;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f6;
    .line-label {
      // font-size: 30rpx;
      color: black;
    }
  }
}
.line-value {
  // font-weight: 700;
  color: #969696;
}
// 表单
.form-box {
  margin-top: 20rpx;
  background-color: white;
  // 返校日期
  .item-date {
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 30rpx;
    line-height: 90rpx;
    height: 90rpx;
    display: flex;
    position: relative;
    .input-mask {
      position: absolute;
      width: 100%;
      height: 90rpx;
      // background-color: red;
    }
    .img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50rpx;
      // padding-right: 30rpx;
    }
  }
  // 单行样式
  .item-line {
    text-align: left;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 30rpx;
    line-height: 90rpx;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f6;
    .line-label {
      // font-size: 30rpx;
      color: black;
    }
  }
  // 提示
  .item-tip {
    text-align: left;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 10rpx;
    font-size: 22rpx;
    // line-height: 90rpx;
    // height: 90rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f6;
    .line-label {
      // font-size: 30rpx;
      color: red;
    }
  }
  // 随行人样式
  .item-for {
    background-color: #f7f6f9;
    padding-left: 30rpx;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #7b7c8033;
    .for-left {
      // border: 1px solid blue;
      width: calc(100%);
      .each {
        flex: 1;
        display: flex;
        justify-content: space-between;
        line-height: 80rpx;
        height: 80rpx;
        padding-right: 30rpx;
      }
    }
  }
  // 文本框
  .item-text {
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
}
// 其余信息
.other-box {
  margin-top: 20rpx;
  background-color: white;
  // 文本框
  .item-text {
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
  // 单行样式
  .item-line {
    text-align: left;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 30rpx;
    line-height: 90rpx;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f6;
    .line-label {
      // font-size: 30rpx;
      color: black;
    }
  }
}
// 按钮
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
