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

  <template>

    <view class="content">
      <view
        class="headerBanner"
        v-if="status == '2'||'3'"
      >
        <view class="bannerLeft">
          <view class="T1">订单已完成</view>
        </view>
        <image
          src="../../static/car.png"
          mode="aspectFill"
        ></image>
      </view>
      <!-- 待付款 -->
      <view
        class="order-time"
        v-if="status == '0'"
      >
        <text>请在</text>
        <uni-countdown
          color="#EC5D3B"
          splitor-color="#EC5D3B"
          :show-day="false"
          :hour="0"
          :second="getLeftTime"
          @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.name}}</text>
            <text class="p2">{{orderAddressInfo.mobile}}</text>

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

            <text class="p3">{{orderAddressInfo.address}}</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>

              <template v-if="orderInfoList.length === 1">
                <view
                  class="p2"
                  style="margin: 0;"
                >
                  {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}}
                </view>
              </template>

              <view class="infoText-bottom">

                <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</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">￥{{Number(totalPrice)/100}}</text>

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

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

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

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

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

            <button open-type="contact">联系客服</button>

          </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
        class="order-confim"
        v-if="status == '2'"
      >
        <button
          class="b2"
          @click="toDetail"
        >再次购买</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,
        totalPrice: 0,

        index: 0,

      }

    },

    async onLoad ({ payId, status, isPay }) {

      this.payId = payId

      this.status = status

      this.isPay = isPay

      // console.log('++++++++++++++++++',this.status)

      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,
      })

      const { list } = this.orderInfo.order_info
      for (let index = 0; index < list.length; index++) {
        await store.dispatch('orderRead/goodDetails', {
          pid: list[index].pid,
          skId: list[index].sk_id,
        })
      }

      this.totalPrice = this.orderInfo.total_fee

    },

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

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

        uni.switchTab({

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

      }
    },

    computed: {

      // 规格列表
      skuList () {
        return this.$store.state.orderRead.skuList
      },

      orderInfo() {
        return this.$store.state.orderRead.orderInfo
      },
      orderInfoList () {
        return this.orderInfo.order_info ? this.orderInfo.order_info.list : null

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

      orderAddressInfo () {
        return this.orderInfo.order_info ? this.orderInfo.order_info.address : null

      },
      // 订单付款时间

      getLeftTime () {
        return this.orderInfo.order_info ? this.orderInfo.order_info.lefttime : 1800

      },
      // 计算总优惠额

      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: {
      // 再次购买  暂时只支持跳转第一个商品
      toDetail() {
        const pid = this.orderInfo.order_info.list[0].pid
        uni.navigateTo({
          url: '../details/details?pid=' + pid,
          fail: (res) => { console.log(res) },
        })
      },

      // 取消订单

      timeup() {

        this.cancleOrder()

      },

      cancleOrder() {

        const uid = this.uid
        const openid = this.openid
        const keyname = this.orderInfo.order_info.keyname
        const that = this
        // 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,
              }).then(() => {
                if (that.isPay === '1') {
                  console.log('lalallala-1')
                  uni.switchTab({
                    url: '/pages/index/index',
                  })
                } else {
                  console.log('lalallala-2')
                  uni.navigateBack({
                    delta: 1,
                  })
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消', that.isPay)
            }
          },
        })

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

        line-height: 70rpx;

      }
    }
  }
  
  .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;

            margin-left: 0;

          }

        }
      }
    }
    // .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;
      }

      button {

        // font-family: PingFangSC-Regular;

        border: none;
        border-radius: 0;
        text-align: left;

        margin-left: 20rpx;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;

        background-color: #fff;
        padding: 0;
        &::after {
          border: 0;
        }

      }
    }
  }

  .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>