<template>
  <view class="container">
    <custom-navbar
      title="提交订单"
      :showBack="true"
      backgroundColor="#FFFFFF"
    ></custom-navbar>
    <select-time-page2
      ref="selecTime"
      :timeOptions="timeOptions"
      :service="manHourInfo"
      :url="`/syr/reserve/timeCheck`"
      :identity="1"
      @changeTime="changeTime"
      v-if="timeOptions.length > 0"
    ></select-time-page2>
    <view class="container-time" v-if="selectTime">
      <view class="container-time__left">您选择的时间段</view>
      <view class="container-time__right">{{ selectTime }}</view>
    </view>
    <view class="container-syr">
      <view class="container-syr__user">
        <view class="container-syr__user_picker">
          <image
            :src="userSyr.head_photo"
            class="container-syr__user__picker__img"
          ></image>
        </view>
        <view class="container-syr__user__introduce">
          <view class="container-syr__user__introduce__name">{{
            workSeat.title
          }}</view>
          <view class="container-syr__user__introduce__price"
            >￥{{ workSeat.price }}元/10分钟</view
          >
        </view>
        <view class="container-syr__user__line"></view>
        <view class="container-syr__user__detail">
          <view class="container-syr__user__detail__name">原价</view>
          <view class="container-syr__user__detail__price"
            >￥{{ totalPrice }}</view
          >
        </view>
        <view class="container-syr__user__detail">
          <view class="container-syr__user__detail__name">小计</view>
          <view class="container-syr__user__detail__price"
            >￥{{ totalPrice }}</view
          >
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer__left">
        <view class="container-footer__left__price">￥{{ totalPrice }}</view>
        <view class="container-footer__left__title">订单小计</view>
      </view>
      <view class="container-footer__right" @click="submit">提交订单</view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
import selectTimePage2 from "../../../components/select-time-page/select-time-page2.vue";
export default {
  components: {
    selectTimePage2,
  },
  data() {
    return {
      selectData: {},
      manHourInfo: {},
      workSeat: {},
      userSyr: {},
      totalPrice: 0,
      timeOptions: [],
      selectTime: null, //选择的时间段
      isSubmit:false,//是否提交订单
    };
  },
  onLoad(options) {
    this.manHourInfo = JSON.parse(decodeURIComponent(options.manHourInfo));
    this.workSeat = this.manHourInfo.work_seat;
    this.userSyr = this.manHourInfo.user_sj;
    console.log("工时详情", this.manHourInfo);
    this.getyestimearrFirst();
  },
  methods: {
    // 进入时获取预约时间
    getyestimearrFirst() {
      let that = this;
      that.timeOptions = [];
      request
        .post("/syr/reserve/timeList", {
          user_sj_id: this.userSyr.id,
          work_seat_id: this.workSeat.id,
        })
        .then(async (res) => {
          that.timeOptions = [
            ...that.timeOptions,
            res.data.today,
            res.data.tomorrow,
            res.data.after,
          ];
          let stateMap = {
            1: "可约",
            2: "约满",
            3: "休息",
            4: "锁定",
            5: "不可用",
          };
          that.timeOptions.forEach((item) => {
            item.forEach((ClipboardItem) => {
              ClipboardItem.stateName = stateMap[ClipboardItem.state];
            });
          });
        })
        .catch((err) => {
          console.log("报错", err);
        });
    },
    submit() {
      if(this.isSubmit){
        return
      }
      if (!this.selectTime) {
        uni.showToast({
          title: "请选择预约时间",
          icon: "none",
          duration: 1000,
        });
        this.isSubmit = false
        return;
      }
       this.isSubmit = true
      let parms = {
        work_seat_id: this.workSeat.id,
        reserve_start_time: this.selectData.reserve_start_time,
        reserve_end_time: this.selectData.reserve_end_time,
      };
      request
        .post("/syr/workSeatOrder/create", parms)
        .then(async (res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "提交成功",
              icon: "none",
              duration: 2000,
            });

            setTimeout(() => {
              uni.redirectTo({
                url: `/pages/shop/pay?id=${res.data.id}&money=${this.totalPrice}&title=${this.workSeat.title}&number=${res.data.number}&identity=1`,
              });
            }, 500);
          }
        })
        .catch((err) => {
          console.log("报错", err);
        }).finally(()=>{
          this.isSubmit = false
        });
    },
    changeTime(data) {
      if (data.startTime != data.endTime) {
        this.selectData = data;
        this.selectTime = `${data.date} ${data.startTime}-${data.endTime}`;
        this.totalPrice = (data.num * this.workSeat.price).toFixed(2);
      } else {
        this.selectData = data;
        this.selectTime = null;
        this.totalPrice = 0;
      }
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .container-time {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &__left {
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
    &__right {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
  }
  .container-syr {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    
    &__user {
      display: flex;
      flex-wrap: wrap;
      &__picker {
        &__img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }
      &__line{
        background-color: #F6F5F5;
        height: 3rpx;
         margin-top: 24rpx;
        width: 100%;
      }
      &__introduce {
        margin-left: 10rpx;
        &__name {
          margin-top: 10rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
        }
        &__price {
          margin-top: 38rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #E8101E;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
        }
      }
      &__detail {
        margin-top: 30rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__name {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
        }
        &__price {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .container-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 166rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx 0 30rpx;
    &__left {
      &__title {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
        font-style: normal;
      }
      &__price {
        font-weight: 500;
        font-size: 42rpx;
        color: #E8101E;
        line-height: 59rpx;
        font-style: normal;
      }
    }
    &__right {
      width: 188rpx;
      height: 68rpx;
      background: linear-gradient(73deg, #fe78b3 0%, #E8101E 100%);
      border-radius: 798rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 39rpx;
      text-align: right;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
