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

  <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.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 MD5Util from '../../utils/md5'

  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,
  	  totalPrice:0,

      };

    },

    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
  	this.totalPrice = this.orderInfo.total_fee

    },

    // 若从支付页面跳转过来，返回直接返回到首页
    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.order_info.keyname
  	  // console.log('keyname',this.orderInfo.keyname)

        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 } = this.orderInfo
  		  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=2&isPay=1`,
  		          })
  		        },
  		        fail: (res) => {
  		          // 支付失败
  		          uni.showModal({
  		            content: '支付失败',
  		            showCancel: false,
  		          })
  		          // 跳转订单详情页->刷新本页面
  				  uni.redirectTo({
  				  	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
  				  })
  		        },
  		        complete: () => {
  		          uni.hideLoading()
  		        },
  		      })
  		    } else {
  		      uni.showModal({
  		        content: '支付失败',
  		        showCancel: false,
  		      })
  		      console.log('支付失败')
  		      uni.hideLoading()
  			  uni.redirectTo({
  				url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
  			  })
  		    }
  		  })

  		
  		//修改订单状态 待付款==>待收货
  		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((res)=>{
  			if(res.data.code === 1){
  				uni.showToast({
  					title:'已确认',
  					mask:true,
  					duration:1500,
  					icon:'success'
  				})
  			}else{
  				uni-uni.showToast({
  					title: '服务器错误，确认失败!',
  					mask:true
  				});
  			}
  			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>