<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) in orderInfoList" :key="orderInfo">
				<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
			}
		},
		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 openid = uni.getStorageSync('openid')
			  const uid = this.order.uid;
			  //先从订单详情中拿到keyname
			  await store.dispatch('orderRead/getOrderInfo', {
			    pay_id: this.order.pay_id,
			    uid: uid,
			    openid: openid
			  }).then((res)=>{
				  const keyname = res.order_info.keyname
				  uni.showModal({
				    title: "提示",
				    content: "现在取消，订单不可恢复哦，确认取消吗？",
				    success: function(res) {
				      if (res.confirm) {
				        store.dispatch("cancelOrder/cancel", {
				          keyname: keyname,
				          uid: uid,
				          openid: openid
				        }).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>