<!-- 订单待付款  待收货 -->
<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 () {
      const orderTime = new Date(this.orderInfo.pay_time.replace(/-/g, '/')).getTime()
      const nowTime = new Date().getTime()
      console.log('getLeftTime', 1800 - (nowTime - orderTime))
      return 1800 - (nowTime - orderTime) / 1000
    },
    // 计算总优惠额
    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>