<!-- 订单待付款  待收货 -->
<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}}\n{{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.order_info.total_fee}}</text>

        </text>
        <text class="order-info-num">
          <text>订单号：{{payId}}</text>
        </text>
        <text class="order-info-time">
          <text>下单时间：{{orderInfo.order_info.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,
	  orderInfo:Object
    };
  },
  onLoad:async function ({payId,status,isPay}) {
    // console.log('++++++++++++++++++',payId,status,isPay)
    this.payId = payId
    this.status = status
    this.isPay = isPay
    const openid = uni.getStorageSync('openid')
    const uid = this.$store.state.user.userInfo.uid
    this.uid = uid
    this.openid = openid
    await store.dispatch('orderRead/getOrderInfo', {
      pay_id: this.payId,
      uid: uid,
      openid: openid
    });
	console.log(this.$store.state.orderRead.orderInfo)
    this.orderInfo = this.$store.state.orderRead.orderInfo
  },
  // 若从支付页面跳转过来，返回直接返回到首页
  onBackPress(option) {
    if (option.from === "backbutton" && this.isPay) {
      uni.switchTab({
        url: "/pages/index/index"
      });
      return true; // 阻止默认返回行为
    }
  },
  computed: {
    orderInfoList () {
      return this.orderInfo.order_info.list
    },
    // 获取订单地址信息
    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;
	  const keyname = this.orderInfo.keyname
	  console.log(this.orderInfo)
      uni.showModal({
        title: "提示",
        content: "现在取消，订单不可恢复哦，确认取消吗？",
        success: function(res) {
          if (res.confirm) {
            store.dispatch("cancelOrder/cancel", {
              keyname: keyname,
              uid: uid,
              openid: openid
            });
			uni.navigateBack({
				delta:1
			})
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    paylog() {
		console.log('pay',this.orderInfo)
		//   const { data, exKeyName: keyName } = res
		//   const uid = uni.getStorageSync('uid')
		//   const timeStamp = new Date().getTime().toString()
		//   const nonceStr = 'asfafasfasfasfasf'
		//   // 支付参数
		//   const fieldSet = {
		//     openid: this.$store.state.user.userInfo.openid,
		//     uid: this.$store.state.user.userInfo.uid,
		//     shopid: 0,
		//     payCate: 2020,
		//     payMoney: this.totalPrice,
		//     payWoodId: `fcdj-${uid}-${keyName}`,
		//     payWoodDesc: '在【非常戴镜】的微信付款凭证',
		//     nonceStr,
		//     signType: 'MD5',
		//     app_uid: 2020,
		//     timeStamp,
		//     keyname: keyName,
		//     billInfo: JSON.stringify(data),
		//   }
		//   // 请求后台支付接口
		//   store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
		//     if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
		//       const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
		//       const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
		
		//       // 微信支付接口
		//       uni.requestPayment({
		//         appId: data.appid,
		//         timeStamp,
		//         nonceStr,
		//         total_fee: this.totalPrice,
		//         package: `prepay_id=${data.prepay_id}`,
		//         signType: 'MD5',
		//         paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
		//         success: (res) => {
		//           // 支付成功
		//           uni.showModal({
		//             content: '支付成功',
		//             showCancel: false,
		//           })
		//           // 跳转订单详情页->状态 待收货
		//           uni.reLaunch({
		//             url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
		//           })
		//         },
		//         fail: (res) => {
		//           // 支付失败
		//           uni.showModal({
		//             content: '支付失败',
		//             showCancel: false,
		//           })
		//           // 跳转订单详情页->状态 待付款
		//           uni.reLaunch({
		//             url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
		//           })
		//         },
		//         complete: () => {
		//           uni.hideLoading()
		//         },
		//       })
		//     } else {
		//       uni.showModal({
		//         content: '支付失败',
		//         showCancel: false,
		//       })
		//       console.log('支付失败')
		//       uni.hideLoading()
		//     }
		//   })
		
		//修改订单状态 待付款==>待收货
		store.dispatch("statusConfirm/confirm", {
		    uid: this.uid,
		    openid: this.openid,
		    oldway: "0",
		    way: "1",
		    pay_id: this.payId,
		    judgeContent: "",
		    orderInfo: this.orderInfo.order_info
		  })
		  .then(
		    setTimeout(() => {
		      uni.navigateBack();
		    }, 1500)
		  );
	},
    confirmOrder() {
		//确认收货 way1 ==>way2 
      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>