<!-- 订单待付款  待收货 -->
<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">{{orderInfo.trans_price}}</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[0].total_fee}}</text>
        </text>
        <text class="order-info-num">
          <text>订单号：{{payId}}</text>
        </text>
        <text class="order-info-time">
          <text>下单时间：{{orderInfo.order_info[0].pay_time}}</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 {
      // orderInfo:{},
      payId: '',
      status: '',
      uid: '',
      openid: '',
      lefttime: 0

    }
  },
  onLoad: function (option) {
    console.log(option)
    this.payId = option.payId
    this.status = option.status
    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
  },
  computed: {
    // 获取订单详细信息
    orderInfo () {
      console.log(this.$store.state.orderRead.orderInfo)
      return this.$store.state.orderRead.orderInfo || {}
    },
    orderInfoList () {
      const orderInfoList = this.orderInfo.order_info[0].list
      // console.log(this.orderInfo.order_info[0].list.p_name + 'sssss')
      return orderInfoList
    },
    // 获取订单地址信息
    orderAddressInfo () {
      return this.orderInfo.order_info[0].address
    },
    // 订单付款时间
    getTime () {
      return this.orderInfo.order_info[0].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)
      )
    }
  }
}
</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>
