<!-- 订单待付款  待收货 -->

  <template>

    <view class="content">

      <!-- 待付款 -->
      <view
        class="order-time"
        v-if="status == '0'"
      >

        <text>请在</text>

        <uni-countdown
          color="#EC5D3B"
          splitor-color="#EC5D3B"
          :show-day="false"
          :hour="0"

          :second="getTime"
          @timeup=timeup

        ></uni-countdown>
        <text>内完成付款</text>
      </view>

      <!-- 待收货 -->
      <view
        class="headerBanner"
        v-if="status == '1'"
      >
        <view class="bannerLeft">
          <view class="T1">卖家已发货</view>
          <view class="T2">还剩 确认收货</view>
        </view>
        <image
          src="../../static/car.png"
          mode="aspectFill"
        ></image>
      </view>

      <view class="order">
        <view class="order-user">
          <view class="order-user-head">

            <text class="p1">{{orderAddressInfo.userName}}</text>
            <text class="p2">{{orderAddressInfo.telNumber}}</text>

          </view>
          <view class="order-user-body">
            <image src="../../static/myorder-paying-location.png"></image>

            <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}
  {{orderAddressInfo.detailInfo}}</text>

          </view>
        </view>
        <view class="order-info">

          <view
            class="order-info-head"
            v-for="(orderInfoListItem,index) in orderInfoList"
            :key="index"
          >
            <image
              :src="orderInfoListItem.imgUrl"
              mode="aspectFill"
            ></image>

            <view class="order-info-head-r">

              <text class="p1">{{orderInfoListItem.p_name}}</text>

              <view
                class="p2"
                style="margin: 0;"
              >
                规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
                <!-- <view class="arrow"></view> -->
              </view>

              <view class="infoText-bottom">
                <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
                <view class="buy-num">X {{orderInfoListItem.num}}</view>
              </view>

            </view>
          </view>

          <!-- <view class="order-info-goodsnum">
              <text>X1</text>
          </view> -->

          <text class="order-info-freight">
            <text class="p1">运费</text>

            <text class="p2">免运费</text>

          </text>
          <text class="order-info-discount">
            <text class="p1">优惠</text>

            <text class="p2">-￥{{totalDiscount}}</text>

          </text>
          <text class="order-info-price">
            <text class="p1">实付</text>

            <text class="p2">￥{{orderInfo.total_fee}}</text>

          </text>
          <text class="order-info-num">

            <text>订单号：{{payId}}</text>

          </text>
          <text class="order-info-time">

            <text>下单时间：{{orderInfo.pay_time | timerChange}}</text>

          </text>
          <view class="order-info-hr"></view>
          <view class="order-info-contact">
            <image src="../../static/myorder-paying-contact.png"></image>
            <text>联系客服</text>
          </view>
        </view>
      </view>

      <view
        class="order-confim"
        v-if="status == '0'"
      >
        <button
          class="b1"
          @click="cancleOrder"
        >取消订单</button>
        <button
          class="b2"
          @click="paylog"
        >立即支付</button>
      </view>
  
      <view
        class="order-confim"
        v-if="status == '1'"
      >
        <!-- <button class="b1">取消订单</button> -->
        <button
          class="b2"
          @click="confirmOrder"
        >确认收货</button>

      </view>
    </view>

  </template>
  
  <script>

  import store from "@/store";
  import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";

  export default {
    components: {

      UniCountdown

    },

    data() {

      return {

        payId: "",
        payTime: "",
        status: "", // status 0 待付款 1 已发货
        uid: "",
        openid: "",

        lefttime: 0,

        isPay: 0
      };

    },

    onLoad: function(option) {
      console.log(option);
      this.payId = option.payId;
      this.status = option.status;
      this.isPay = option.isPay;
      const openid = uni.getStorageSync("openid");
      const uid = this.$store.state.user.uid;
      this.uid = uid;
      this.openid = openid;
      store.dispatch("orderRead/getOrderInfo", {

        pay_id: this.payId,

        uid: "1",
        openid: openid
      });

      // this.orderInfo = this.$store.state.orderRead.orderInfo
    },

    // 若从支付页面跳转过来，返回直接返回到首页
    onBackPress(option) {

      if (option.from === "backbutton" && this.isPay) {

        uni.switchTab({

          url: "/pages/index/index"
        });
        return true; // 阻止默认返回行为

      }
    },

    computed: {
      // 获取订单详细信息

      orderInfo() {
        console.log("orderInfo", this.$store.state.orderRead.orderInfo);
        return this.$store.state.orderRead.orderInfo || {};

      },

      orderInfoList() {
        const orderInfoList = this.orderInfo.order_info.list;
        return orderInfoList;

      },
      // 获取订单地址信息

      orderAddressInfo() {
        return this.orderInfo.order_info.address;

      },
      // 订单付款时间

      getTime() {
        return this.orderInfo.order_info.lefttime;

      },
      // 计算总优惠额

      totalDiscount() {
        const discountInfoList = this.orderInfo.discount_info;
        let totalDiscount = 0;

        if (discountInfoList) {
          discountInfoList.map((discountItem, index) => {

            totalDiscount += Number(discountItem.value);
          });

        }
        // console.log(totalDiscount)

        return totalDiscount;
      }

    },
    methods: {

      // 取消订单

      timeup() {
        this.cancleOrder();

      },

      cancleOrder() {
        const uid = this.uid;
        const openid = this.openid;

        uni.showModal({

          title: "提示",
          content: "现在取消，订单不可恢复哦，确认取消吗？",
          success: function(res) {

            if (res.confirm) {

              store.dispatch("cancelOrder/cancel", {
                keyname: "1",

                uid: uid,

                openid: openid
              });

            } else if (res.cancel) {

              console.log("用户点击取消");

            }

          }
        });

      },

      paylog() {},
      confirmOrder() {
        store
          .dispatch("statusConfirm/confirm", {
            uid: this.uid,
            openid: this.openid,
            oldway: "1",
            way: "2",
            pay_id: this.payId,
            judgeContent: "",
            orderInfo: this.orderInfo.order_info
          })
          .then(
            setTimeout(() => {
              uni.navigateBack();
            }, 1500)
          );
      }

    },
    filters: {
      timerChange: function(value) {

        var newDate = new Date();
        newDate.setTime(value * 1000);
        return newDate.toLocaleString();
      }
    }
  };

  </script>
  
  <style lang="scss" scoped>

  .content {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;

    align-items: center;
    background-color: #f2f2f2;
  }
  
  .order {

    margin-bottom: 112rpx;
    background: #f2f2f2;

    margin-top: 140rpx;
    width: 670rpx;

  }

  .order-time {
    width: 100%;
    height: 140rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;

    align-items: center;
    position: fixed;
    top: 0;
    left: 0;

    text {
      // font-family: PingFangSC-Regular;

      // margin-top: 48rpx;

      font-size: 14px;
      color: #333333;
      letter-spacing: -0.26px;
    }
    .p2 {
      // font-family: DINAlternate-Bold;
      margin: 42rpx 20rpx 0 20rpx;
      font-size: 18px;
      color: #ec5d3b;
      letter-spacing: -0.34px;
    }
  }

  .headerBanner {
    width: 100%;
    height: 140rpx;
    background: #4a90e2;
    padding: 26rpx 60rpx 24rpx 60rpx;
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    .bannerLeft {
      font-size: 36rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .T2 {
        font-size: 24rpx;
      }
    }
    image {
      height: 56rpx;
      width: 72rpx;
    }
  }

  
  .order-user {

    height: 228rpx;
    background: #ffffff;
    border-radius: 14rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    .order-user-head {
      display: flex;
      height: 108rpx;

      align-items: center;
      margin-left: 126rpx;
      .p1 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        margin-right: 20rpx;
      }
      .p2 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999999;
        letter-spacing: -0.26px;
      }
    }
    .order-user-body {
      display: flex;
      width: 100%;
      image {
        width: 24px;
        height: 26px;
        margin: 12rpx 32rpx 0 40rpx;
      }
      .p3 {
        // font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
      }
    }
  }
  
  .order-info {

    background-color: #fff;
    box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
    border-radius: 16rpx;
    margin: 0 auto;
    view {
      margin-left: 40rpx;
    }
    text {
      font-size: 14px;
    }
    .order-info-head {
      display: flex;
      padding-top: 40rpx;
      image {
        height: 188rpx;
        width: 188rpx;
      }
      .order-info-head-r {
        margin: 0;
        width: 368rpx;
        margin-left: 24rpx;
        // margin-top: 40rpx;
        text {
          display: block;
        }
        // .arrow{
        // width: 0;
        // height: 0;
        // border-left: 5px transparent;
        // border-right: 5px transparent;
        // border-top: 5px #979797;
        // border-bottom: 0 transparent;
        // border-style: solid;
        // position: relative;
        // // transform: scaleY(-1);
        // }
        // .arrow::after{
        //     content: '';
        //     position: absolute;
        //     top: -6.5px;
        //     left: -5px;

        //     border-left: 5px transparent;
        //     border-right: 5px transparent;
        //     border-top: 5px #FFFFFF;
        //     border-bottom: 0 transparent;
        //     border-style: solid;

        // }
        .p1 {
          min-height: 40px;
          // font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          letter-spacing: -0.26px;
          line-height: 18px;
          // line-height: 20px;
        }
        .p2 {
          height: 34px;
          padding: 1px 0 3px 0;
          // font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #999999;
          letter-spacing: -0.23px;
        }

        .infoText-bottom {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          margin-left: 0;
          .markPrice {
            font-size: 14px;
            color: #ff6b4a;
            margin-right: 20rpx;
            margin-left: 0rpx;
          }
          .buy-num {
            font-size: 12px;
            color: #999999;
          }

        }
      }
    }
    // .order-info-goodsnum {

    //     display: flex;
    //     align-items: center;
    //     justify-content: flex-end;
    //     text {
    //         margin-right: 44rpx;
    //         // ont-family: PingFangSC-Regular;
    //         font-size: 12px;
    //         color: #999999;
    //         letter-spacing: -0.23px;
    //     }

    // }
    .order-info-freight {
      display: block;
      margin-left: 40rpx;
      margin-top: 22rpx;
      .p1 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
        margin-right: 24px;
      }
      .p2 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #ff6b4a;
        letter-spacing: -0.26px;
      }
    }
    .order-info-discount {
      display: block;
      margin-left: 40rpx;
      margin-top: 24rpx;
      .p1 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
        margin-right: 24px;
      }
      .p2 {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #ff6b4a;
        letter-spacing: -0.26px;
      }
    }
    .order-info-price {
      display: block;
      margin-left: 40rpx;
      margin-top: 24rpx;
      .p1 {
        // font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
        margin-right: 24px;
      }
      .p2 {
        // font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #ff6b4a;
        letter-spacing: -0.26px;
      }
    }
    .order-info-num {
      display: block;
      margin-left: 40rpx;
      margin-top: 44rpx;
      text {
        // font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: -0.23px;
      }
    }
    .order-info-time {
      display: block;
      margin: 8rpx 0 48rpx 40rpx;
      text {
        // font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: -0.23px;
      }
    }
    .order-info-hr {
      width: 520rpx;
      height: 1px;
      background-color: #e9e9e9;
      margin-bottom: 20rpx;
    }
    .order-info-contact {
      display: flex;
      padding-bottom: 28rpx;
      image {
        width: 19px;
        height: 16px;
      }
      text {
        // font-family: PingFangSC-Regular;
        margin-left: 20rpx;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
      }
    }
  }

  .order-confim {
    display: flex;
    align-items: center;

    justify-content: flex-end;
    // z-index: 999;

    width: 100%;
    height: 112rpx;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    button {
      width: 204rpx;
      height: 80rpx;
      border: 1px solid #ff6b4a;
      border-radius: 40rpx;
      font-size: 32rpx;
      letter-spacing: -0.3px;
      margin-right: 0;
    }
    .b1 {
      // font-family: PingFangSC-Regular;
      color: #ff6b4a;

      background-color: #ffffff;

    }
    .b2 {
      // font-family: PingFangSC-Regular;
      background-color: #ff6b4a;
      color: #ffffff;
      margin: 0 26rpx 0 20rpx;
    }
  }

  </style>