<template>
  <view>
    <view
      class="card"
      v-if="current == status"
    >
      <view class="cardHeader">
        <text
          class="orderId"
          v-if="status == '0'||status == '1'"
        >订单号：{{order.pay_id}}</text>
        <text
          class="orderId"
          v-if="status == '2'||status == '3'"
        >下单时间：{{order.pay_time}}</text>
        <text
          class="orderType"
          v-if="status=='0'"
        >待付款</text>
        <text
          class="orderType"
          v-if="status=='1'"
        >待收货</text>
        <text
          class="orderType"
          v-if="status == '2'||status == '3'"
        >已完成</text>
        <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
      </view>
      <view
        class="orderCardInfo"
        @click="toOrderInfo(status,order.pay_id)"
        v-for="(orderInfo, index) in orderInfoList"
        :key="index"
      >
        <image
          :src="orderInfo.imgUrl"
          mode="aspectFill"
        ></image>
        <view class="infoText">
          <view class="orderName">{{orderInfo.p_name}}</view>
          <view class="orderDescrib">{{orderInfo.p_name}}</view>
          <view class="infoText-bottom">
            <view class="markPrice">¥{{orderInfo.nowPrice}}</view>
            <view class="buy-num">X {{orderInfo.num}}</view>
          </view>
        </view>
      </view>
      <view class="payPrice">实付：<text class="priceNum">¥{{order.total_fee}}</text> </view>
      <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
      <view
        class="btns"
        v-if="status == '0'"
      >
        <view
          class="btn-type1"
          @click="cancleOrder"
        >取消订单</view>
        <view
          class="btn-type2"
          @click="paylog"
        >去支付</view>
      </view>
      <view
        class="btns"
        v-if="status == '1'"
      >
        <view class="btn-type2">确认收货</view>
      </view>
      <view
        class="btns"
        v-if="status == '2'"
      >
        <view
          class="btn-type2"
          @click="toDetail(order.order_info[0].pid)"
        >再次购买</view>
      </view>
      <!--   <view class="btns" v-if="status == '3'">
        <view class="btn-type2">再次购买</view>
      </view> -->
    </view>
    <view
      class="card"
      v-if="current == '10'"
    >
      <view class="cardHeader">
        <text
          class="orderId"
          v-if="status == '0'||status == '1'"
        >订单号：{{order.pay_id}}</text>
        <text
          class="orderId"
          v-if="status == '2'||status == '3'"
        >下单时间：{{order.pay_time}}</text>
        <text
          class="orderType"
          v-if="status=='0'"
        >待付款</text>
        <text
          class="orderType"
          v-if="status=='1'"
        >待收货</text>
        <text
          class="orderType"
          v-if="status == '2'||status == '3'"
        >已完成</text>
        <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
      </view>
      <view
        class="orderCardInfo"
        @click="toOrderInfo(status,order.pay_id)"
        v-for="(orderInfo, index) in orderInfoList"
        :key="index"
      >
        <image
          :src="orderInfo.imgUrl"
          mode="aspectFill"
        ></image>
        <view class="infoText">
          <view class="orderName">{{orderInfo.p_name}}</view>
          <view class="orderDescrib">{{orderInfo.p_name}}</view>
          <view class="infoText-bottom">
            <view class="markPrice">¥{{orderInfo.nowPrice}}</view>
            <view class="buy-num">X {{orderInfo.num}}</view>
          </view>
        </view>
      </view>
      <view class="payPrice">实付：<text class="priceNum">¥{{order.total_fee}}</text> </view>
      <view
        class="btns"
        v-if="status == '0'"
      >
        <view
          class="btn-type1"
          @click="cancleOrder"
        >取消订单</view>
        <view
          class="btn-type2"
          @click="paylog"
        >去支付</view>
      </view>
      <view
        class="btns"
        v-if="status == '1'"
      >
        <view class="btn-type2">确认收货</view>
      </view>
      <view
        class="btns"
        v-if="status == '2'||status == '3'"
      >
        <view
          class="btn-type2"
          @click="toDetail(order.order_info[0].pid)"
        >再次购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import MD5Util from '../../../utils/md5'
import store from '@/store'
export default {
  data() {
    return {

    }
  },
  props: {
    /**
       * 订单数据
       */
    order: {},
    /**
       * 当前选择
       */
    current: Number,

  },
  created() {
    console.log('order', this.order)
    // console.log(this.order.status );
    // console.log(this.current);
  },
  computed: {
    status() {
      return this.order.status
    },
    orderInfoList() {
      return this.order.order_info.list
    },
  },
  methods: {
    async paylog() {
      const openid = uni.getStorageSync('openid')
      const uid = this.order.uid
      // 先拿订单详情
      await store.dispatch('orderRead/getOrderInfo', {
        pay_id: this.order.pay_id,
        uid: uid,
        openid: openid,
      }).then((res) => {
        // console.log(res)
        const { data, exKeyName: keyName } = res.order_info
        const timeStamp = new Date().getTime().toString()
        const total_fee = res.total_fee
        const payId = res.pay_id
        const nonceStr = 'asfafasfasfasfasf'
        // 支付参数
        const fieldSet = {
          openid: openid,
          uid: uid,
          shopid: 0,
          payCate: 2020,
          payMoney: total_fee,
          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: total_fee,
              package: `prepay_id=${data.prepay_id}`,
              signType: 'MD5',
              paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
              success: (res) => {
                // 支付成功
                uni.showModal({
                  content: '支付成功',
                  showCancel: false,
                })
                // //修改订单状态 待付款==>待收货
                // store.dispatch("statusConfirm/confirm", {
                //     uid: this.uid,
                //     openid: this.openid,
                //     oldway: "0",
                //     way: "1",
                //     pay_id: payId,
                //     judgeContent: "",
                //     orderInfo: this.orderInfo.order_info
                //   })
              },
              fail: (res) => {
                // 支付失败
                uni.showModal({
                  content: '支付失败',
                  showCancel: false,
                })
              },
              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
        //   })
      })
    },

    async cancleOrder(e) {
      const { keyname } = this.order.order_info
      console.log('keyname', keyname)

      uni.showModal({
        title: '提示',
        content: '现在取消，订单不可恢复哦，确认取消吗？',
        success: function(res) {
          if (res.confirm) {
            store.dispatch('cancelOrder/cancel', {
              keyname: keyname,
            }).then((res) => {
              console.log(res)
              if (res.code === 1) {
                store.dispatch('myOrder/getList', {
                  way: '',
                })
              } else {
                uni.showToast({
                  title: '取消失败，服务器错误!',
                  icon: 'none',
                })
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    toDetail(pid) {
      console.log('pid', pid)
      uni.navigateTo({
        url: '../details/details?pid=' + pid,
        fail: (res) => { console.log(res) },
      })
    },
    toRefundment() {
      uni.navigateTo({
        url: '../refundment/refundment',
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
    toOrderInfo(status, payId) {
      console.log(status, payId)
      switch (status) {
        // 0待付款  1待收货  2已收货 3 已评价
        case '0':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })
          break
        case '1':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })

          break
        case '2' || '3':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })
          break
        default:
          break
      }
    },
  },
}

</script>

<style lang="scss">
.card {
  width: 670rpx;
  // height: 478rpx;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
  border-radius: 8px;
  border-radius: 8px;
  margin-top: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  .cardHeader {
    width: 100%;
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .orderId {
      font-size: 12px;
      color: #999999;
    }
    .orderType {
      font-size: 14px;
      color: #ff6b4a;
    }
  }
  .orderCardInfo {
    width: 100%;
    height: 188rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
    image {
      height: 188rpx;
      width: 188rpx;
      margin-right: 24rpx;
    }
    .infoText {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      height: 188rpx;
      width: 368rpx;
    }
    .orderName {
      font-size: 14px;
      color: #333333;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .orderDescrib {
      font-size: 12px;
      color: #999999;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .infoText-bottom {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      .markPrice {
        font-size: 14px;
        color: #ff6b4a;
        margin-right: 20rpx;
      }
      .buy-num {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .payPrice {
    text-align: right;
    margin: 20rpx 0;
    font-size: 14px;
    color: #333333;
    .priceNum {
      font-size: 14px;
      color: #ff6b4a;
    }
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn-type1 {
      height: 48rpx;
      width: 156rpx;
      border: 1px solid #ff6b4a;
      border-radius: 12px;
      border-radius: 12px;
      text-align: center;
      line-height: 48rpx;
      font-size: 12px;
      color: #ff6b4a;
    }
    .btn-type2 {
      height: 48rpx;
      width: 140rpx;
      background: #ff6b4a;
      border-radius: 12px;
      border-radius: 12px;
      text-align: center;
      line-height: 48rpx;
      font-size: 12px;
      color: #ffffff;
      margin-left: 20rpx;
    }
  }
}
</style>