<template>
  <view class="content">
	<z-nav-bar title="订单详情" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>

  <view class="orderList" v-if="consigneeShow">
	<view class="orderItem">
	  <view class="" style="position: relative; height: 60rpx">
		<text
		  class="orderState orderState0"
		  v-if="orderContet.orderStatus == 0">待支付</text>
		<text
		  class="orderState orderState1"
		  v-if="orderContet.orderStatus == 1">待发货</text>
		<text
		  class="orderState orderState2"
		  v-if="orderContet.orderStatus == 2">待收货</text>
		<text
		  class="orderState orderState3"
		  v-if="orderContet.orderStatus == 3">已完成</text>
		<text
		  class="orderState orderState5"
		  v-if="orderContet.orderStatus == 5">已超时</text>
	  </view>
	  
	  <view
	    class="orderContent"
	    v-for="(item, index) in goodsList"
	    :key="index"
	    @click="goDetail(item.productId, item)"
	    v-if="goodsList.length > 0"
		style=" display: flex; align-items: center; justify-content: center;"
	  >
	    <view class="feng" style="position: relative">
	      <view v-if="item.delFlag == -1" class="delisted">已下架</view>
	      <image
	        style="width: 100%; height: 100%"
	        v-if="item.productImages"
	        :src="item.productImages"
	        mode="aspectFit"
	      ></image>
	      <view
	        v-else style="
	          color: #c0c4cc;
	          font-size: 22rpx;
	          line-height: 140rpx;
	          text-align: center;">暂无封面图</view>
	    </view>
	  
	    <view class="goods_info">
	      <view class="flexbox itemJian">
	        <view class="booknameleft">
	          <text :style="`${item.delFlag == -1 ? 'color:#c0c4cc;' : ''}`">{{ item.productName }}</text>
	        </view>
	        <view style="color: #c0c4cc; font-size: 26rpx; font-weight: 700">
	          ×{{ item.quantity ? item.quantity : "" }}
	  				</view>
	      </view>
	    </view>
	    <br clear="both" />
	  </view>
	  
	  <view class="orderContent" v-if="orderContet.orderType == 'aiVip'||orderContet.orderType == 'upgradeAiVip'" style=" display: flex; align-items: center; justify-content: center;">
		<image src="/static/icon/order_vip.png" mode="aspectFill" style="width: 100rpx; height: 100rpx; flex-shrink: 0;"></image>
		<view class="itemJian">
		  <view class="orderTitle" style="line-height: 46rpx; margin-bottom: 0;">
			{{ orderContet.aiBuyConfig.title }}<span style=" color: red;">（{{ orderContet.aiBuyConfig.count }}次）<span v-if="orderContet.orderType=='upgradeAiVip'">（VIP升级）</span></span>
		  </view>
		</view>
	  </view>
	  
	  <view class="orderContent" v-if="orderContet.orderType == 'vip'" style=" display: flex; align-items: center; justify-content: center;">
	  		<image src="/static/icon/order_vip.png" mode="aspectFill" style="width: 100rpx; height: 100rpx; flex-shrink: 0;"></image>
	  		<view class="itemJian">
	  		  <view class="orderTitle" style="line-height: 46rpx; margin-bottom: 0;">
	  			{{ orderContet.vipBuyConfigEntity.title }}<text class="vip_year" v-if="orderContet.vipBuyConfigEntity.year">({{ orderContet.vipBuyConfigEntity.year }}年)</text>
	  		  </view>
	  		</view>
	  </view>
	  
	  <view class="orderContent" v-if="orderContet.orderType == 'point'" style=" display: flex; align-items: center; justify-content: center;">
		<image
		  src="/static/icon/pay_3.png"
		  mode="aspectFill"
		  style="width: 100rpx; height: 100rpx; flex-shrink: 0;"
		></image>
		<view class="itemJian">
		  <view class="orderTitle" style="line-height: 100rpx">
			<text>充值 {{ orderContet.bookBuyConfigEntity.money }}天医币</text>
		  </view>
		</view>
	  </view>
	  
	  <view class="orderContent" v-if="orderContet.orderType == 'relearn'" style=" display: flex; align-items: center; justify-content: center;">
	    <image
	      src="/static/icon/fugou.png"
	      mode="aspectFill"
	      style="width: 100rpx; height: 100rpx; flex-shrink: 0;"
	    ></image>
	    <view class="itemJian">
	      <view class="orderTitle" style="line-height: 60rpx">
	        <text>{{ orderContet.remark }}</text>
	      </view>
	      <view class="orderPrice">
	        <text style="font-weight: bold">&nbsp;</text>
	      </view>
	      <br clear="both" />
	    </view>
	    <br clear="both" />
	  </view>

	  <view class="order_item">
		<view class="orderallpri">
		  <span style="color: #666; margin-right: 10rpx; float: left">商品总价 :
		  </span>
		  <span>￥</span>
		  <text v-if="orderContet.orderType=='upgradeAiVip'&&orderContet.districtMoney>0">{{Number(orderContet.aiBuyConfig.fee)-Number(orderContet.districtMoney)}}</text>
		  <text v-else>{{ orderContet.orderMoney }}</text>
		</view>
		<view class="orderReal" v-if="orderContet.jfDeduction > 0">
			<span style="color: #666; margin-right: 10rpx; float: left">积分抵扣:</span>
			<span style="color: red" v-if="orderContet.jfDeduction > 0">-</span>
			<span style="color: red"> {{ orderContet.jfDeduction }}</span>
		</view>
		<view
		  class="orderReal"
		  v-if="orderContet.paymentMethod == 4 && orderContet.realMoney > 0"
		>
		  <span style="color: #666; margin-right: 10rpx; float: left">天医币抵扣:</span>
		  <span style="color: red">-</span>
		  <span style="color: red">￥{{ orderContet.realMoney }}</span>
		</view>
		
		<view class="orderReal" v-if="orderContet.orderStatus != 0">
		  <span style="color: #666; margin-right: 10rpx; float: left">
			  实付款:
		  </span>
		  <b v-if="orderContet.orderType == 'point'" style="color: red">￥ {{ orderContet.bookBuyConfigEntity.realMoney }}</b>
		  <b style="color: red" v-else>
			<template v-if="orderContet.realMoney">
			  ￥{{ orderContet.realMoney }}
		  
				  <text style="font-size: 24rpx;margin-left: 10rpx;">
					<span
					  style=""
					  v-if="orderContet.paymentMethod == 1"
					  >微信支付</span
					>
					<span
					  style=""
					  v-if="orderContet.paymentMethod == 2"
					  >支付宝支付</span
					>
					<span
					  style=""
					  v-if="orderContet.paymentMethod == 3"
					  >苹果支付</span
					>
					<span
					  style=""
					  v-if="orderContet.paymentMethod == 4"
					>
					  天医币支付
					</span>
				</text>
			</template>
			<template v-if="orderContet.realMoney == 0&&orderContet.jfDeduction==0">￥0</template>
			<text
			  style="margin: 0 4rpx"
			  v-if="
				orderContet.realMoney > 0 && orderContet.jfDeduction > 0
			  "
			>
			  +
			</text>
		  
			<text v-if="orderContet.jfDeduction > 0"
			  >{{ orderContet.jfDeduction }} 积分</text
			>
			</b>
		</view>
		<view class="orderReal" v-if="orderContet.remark">
			<span style="color: #666; margin-right: 10rpx; float: left">
			 备注 :
			</span>
			<text style="color: #666; line-height: 36rpx; display: inline-block; max-width: 80%;">{{ orderContet.remark }}</text>
		</view>
	  </view>
	  <view class="order_item">
		<view class="orderYunf">
		  <span style="color: #666; float: left">订单编号 : </span>
		  <text style="font-size: 24rpx; color: #666">{{ orderContet.orderSn }}
		  </text>
		  <u-tag
			@click="handleCopy(orderContet.orderSn, '订单编号')"
			borderColor="#5188e5"
			color="#5188e5"
			text="复制"
			plain
			style="float: right; margin-left: 15rpx;"
			size="mini"
			type="success"
		  ></u-tag>
		</view>
		<view class="orderReal" style="    width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;">
		  <span style="color: #666; margin-right: 10rpx; float: left">
			  创建时间 :
		  </span>
		  <text style="font-size: 24rpx; color: #666">{{orderContet.createTime}}</text>
		</view>
		<view
		  class="orderReal"
		  v-if=" orderContet.orderStatus >= 1 && orderContet.orderStatus != 5 &&orderContet.paymentDate">
		  <span style="color: #666; margin-right: 10rpx; float: left">
			  付款时间 :
		  </span>
		  <text style="font-size: 24rpx; color: #666">{{orderContet.paymentDate}}</text>
		</view>
	  </view>
	</view>
  </view>
  
	<view class="goods_nav_box">
	  <common-goods-nav
		:iconList="iconList"
		:customButton="customButton"
		@submit="goBuyJie"
		@clickIcon="clickIcon"
	  >
		<!-- leftSlot -->
		<template slot="leftSlot" slot-scope="slotProps">
		  <view
			class="price_box order_bottom_box"
			v-if="orderContet.orderStatus == 0"
		  >
			<text class="price">
				合计:
			  <text class="total">￥{{ orderContet.realMoney }}</text>
			</text>
		  </view>
		</template>
	  </common-goods-nav>
	</view>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { setPay, setPayAssign, setWXPay } from "@/config/utils";
import { mapState } from "vuex";
export default {
  data() {
    return {
      iconList: [
        {
          text: "联系客服",
          iconType: 1,
          icon: "server-fill",
          infoColor: "#666",
        },
      ],
      userRecordid: null, // 用户的评价状态
      playData: {},
      title: "Hello",
      logisticsData: [], // 快递信息列表
      titleStat: "",
      orderID: 0,
      orderSn: "",
      orderType: "",
      orderContet: {},
      sheetList: [], // 面单数据
      consigneeShow: false,
      customButton: [],
	  goodsList: [],
    };
  },
  onLoad(e) {
    this.windowWidth = uni.getSystemInfoSync().windowWidth;
    this.orderID = e.orderId;
    this.orderType = e.orderType;
    this.orderSn = e.orderSn;
  },
  onHide() {
    this.sheetList = [];
  },
  onShow() {
    this.getOrderList();
  },
  computed: {
    ...mapState(["userInfo"]),
  },

  methods: {
    async goBuyJie(data) {
      if (data.text == "继续付款") {
        this.goPay(this.orderContet);
      } else if (data.text == "取消订单") {
        this.canceOrder();
      }
    },
	//联系客服
    async clickIcon(data) {
      if (data.text == "联系客服") {
        this.kefu();
      }
    },
    //联系客服
    kefu() {
      uni.showModal({
        title: "提示",
        content: "微信号：yilujiankangkefu",
      });
    },
	//复制
    handleCopy(value, title) {
      this.$commonJS.handleCopy(value, title);
    },
    onPageJump(item) {
      uni.navigateTo({
        url: "./deliverDetail?objId=" + item,
      });
    },
    //获取订单详情
    getOrderList() {
      this.$http
        .request({
          url: "common/buyOrder/commonOrderDetail",
          method: "POST",
          data: {
            orderId: this.orderID,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          this.customButton = [];
          this.orderContet = res.data.buyOrder;
          this.goodsList = res.data.productInfo;
          this.consigneeShow = true;
          if (
            this.orderContet.orderStatus == 2 &&
            this.sheetList.length > 0 &&
            this.orderContet.orderStatus != 5
          ) {
            this.customButton.push({
              width: "160rpx",
              text: "查看物流",
              color: "#333",
              backgroundColor: "#f0f0f0",
            });
          }
          if (this.orderContet.orderStatus == 2) {
            this.customButton.push({
              width: "160rpx",
              text: "确认收货",
              color: "#fff",
            });
          }
          if (this.orderContet.orderStatus == 0) {
            this.customButton.push({
              width: "160rpx",
              text: "继续付款",
            });
          }
          if (this.orderContet.orderStatus == 0) {
            this.customButton.push({
              width: "160rpx",
              text: "取消订单",
              color: "#333",
              backgroundColor: "#f0f0f0",
            });
          }
          if (this.orderContet.orderStatus == 0) {
            this.titleStat = "待支付";
          } else if (this.orderContet.orderStatus == 1) {
            this.titleStat = "待发货";
          } else if (this.orderContet.orderStatus == 2) {
            this.titleStat = "待收货";
          } else if (this.orderContet.orderStatus == 3) {
            this.titleStat = "已完成";
          }
          if (
            this.orderContet.orderStatus >= 2 &&
            this.orderContet.orderType == "order" &&
            this.orderContet.expressOrders
          ) {
            this.sheetList = this.orderContet.expressOrders;
          } else {
            this.sheetList = [];
          }
          console.log(this.orderContet, "订单详情");
        });
    },

    //取消订单
    canceOrder() {
      uni.showModal({
        title: "提示",
        content: "确定要取消订单吗？",
        confirmText: "取消订单",
        cancelText: "考虑一下",
        confirmColor: "#c96713",
        cancelColor: "#555",
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post(
                "book/buyOrder/appDelete?orderId=" + this.orderContet.orderId
              )
              .then((res) => {
                uni.showToast({
                  icon: "none",
                  title: "取消订单成功",
                });
                uni.switchTab({
                  url: "./orderList",
                });
              });
          }
        },
      });
    },

    //支付
    goPay(payItem) {
      if (payItem.paymentMethod == 2) {
        console.log("阿里支付");
        setPay(
          {
            typePay: "alipay",
            subject: "order",
            totalAmount: payItem.realMoney,
            type: 2,
            relevanceoid: payItem.orderSn,
            customerId: this.userInfo.id,
          },
          (res) => {
            if (res.success) {
              uni.showToast({
                title: "支付成功",
              });
            } else {
              uni.showToast({
                title: "支付失败",
                icon: "none"
              });
            }
            this.getOrderList();
          }
        );
      } else if (payItem.paymentMethod == 1) {
        console.log("微信支付");
        if (this.isAndorid == false) {
          uni.showModal({
            title: "提示",
            content: "很抱歉，苹果系统暂不支持微信支付",
            showCancel: false,
          });
          return false;
        } else {
          let data1 = {
            orderSn: payItem.orderSn,
            buyOrderId: null,
            totalAmount: payItem.realMoney,
          };
          console.log(data1, "data1");
          setWXPay(data1, (res) => {
            if (res.success) {
              uni.showToast({
                title: "支付成功",
              });
            } else {
              console.log(res);
              if (res.data.errMsg.indexOf("User canceled") != -1) {
                uni.showToast({
                  title: "用户取消支付",
                  icon: "none"
                });
              } else {
                uni.showToast({
                  title: "支付失败",
                  icon: "none"
                });
              }
            }
          });
        }
      } else if (payItem.paymentMethod == 3) {
        // 苹果充值
        console.log("苹果二次支付");
        if (this.isAndorid) {
          uni.showModal({
            title: "提示",
            showCancel: false,
            content:
              "很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单",
          });
        } else {
          this.iphonepay(payItem);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";
@import "@/static/common.scss";
view,uni-view {
  font-size: 28rpx;
}
.expresslist {
  font-size: 28rpx;
  color: #666;
  .title {
    text-align: center;
  }
  .item {
    padding: 30rpx;
    border-bottom: 1px solid #eee;
  }
}
.orderState {
  color: #fff;

  position: absolute;
  left: 0;
  top: 0rpx;
  padding: 6rpx 10rpx;
  border-radius: 0 24rpx 24rpx 0;
  font-size: 26rpx;
  // font-weight: bold;
  color: #fff;
}
.orderState0 {
  background-color: #e6a23c;
}
.orderState1 {
  background-color: #409eff;
}
.orderState2 {
  background-color: #f56c6c;
}
.orderState3 {
  background-color: #5188e5;
}
.orderState5 {
  background-color: #787878;
}
.guoqi {
  font-size: 28rpx;
  align-items: center;
  color: red;
  float: right;
  line-height: 40rpx;
}
.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10rpx;
}
.mb30 {
  margin-bottom: 30rpx;
  overflow: hidden;
}
.tanchu {
  padding: 40rpx 30rpx 40rpx 30rpx;
  position: relative;

  .dp_title {
    font-size: 32rpx;
    margin-bottom: 50rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
  }

  .dp_add {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    font-size: 22rpx;
    background-color: #fd6004;
    color: #fff;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;

    .u-icon {
      display: inline-block;
      margin-right: 5rpx;
    }
  }

  .addressItem {
    border: 2px dashed #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;

    .addrContent {
      margin-left: 40rpx;
      flex: 1;

      .addrContentTop {
        display: flex;
        align-items: flex-end;
        margin: 0 0 15rpx 0;
        position: relative;

        .userName {
          font-size: 35rpx;
          font-weight: bold;
          margin-right: 30rpx;
        }

        .userTel {
          font-size: 25rpx;
          color: #888;
        }

        .userMoren {
          border: 1px solid #fd6004;
          color: #fd6004;
          padding: 3rpx 10rpx;
          font-size: 22rpx;
          border-radius: 10rpx;
          margin: 0 0 0 20rpx;
        }

        .chooseCheck {
          position: absolute;
          top: 3rpx;
          right: 6rpx;
        }
      }

      .addrContentBottom {
        font-size: 32rpx;
      }
    }
  }

  .addressItem.addItem_style {
    border-color: #fd6004;
  }

  .youhuiItem {
    border: 1px solid #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;
    font-size: 30rpx;
  }

  .youhuiItem > view {
    float: left;
  }

  .youhuiItem.youItem_style {
    border-color: #fd6004;
  }
}
.opShou {
  border-color: $uni-color-success !important;
}

.adDefault {
  padding: 30rpx 50rpx 30rpx 100rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 2px dashed #b2e9d7;
  margin: 0 0 5rpx 0;
  position: relative;

  .defalTop {
    .userName {
      font-size: 35rpx;
      font-weight: bold;
      margin-right: 30rpx;
    }

    .userTel {
      font-size: 25rpx;
      color: #888;
    }
  }

  .defalBottom {
    .userAddress {
      font-size: 32rpx;
      line-height: 40rpx;
    }
  }

  .defalLeft {
    position: absolute;
    left: 30rpx;
    top: 55rpx;
  }
}

.orderList {
	margin: 30rpx;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
	border-radius: 10rpx;

  .orderItem {
    padding: 30rpx 0rpx;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 30rpx;

    .orderContent {
      padding: 20rpx;
      margin-bottom: 20rpx;

      image {
        width: 150rpx;
        height: 180rpx;
        margin-right: 20rpx;
        float: left;
      }
      .goods_info {
        float: left;
        width: calc(100% - 180rpx) !important;
        justify-content: space-between;
      }
      .itemJian {
        width: 100%;
        justify-content: space-between;
        .orderTitle {
          font-weight: bold;
          font-size: 30rpx;
          float: left;
          width: 540rpx;
        }

        .orderPrice {
          font-size: 28rpx;
          float: right;
          width: 60rpx;
          text-align: right;
          line-height: 40rpx;
        }
      }
    }

    .orderallpri {
      text-align: right;
      margin: 10rpx 0;
      font-size: 28rpx;
    }

    .orderReal {
      text-align: right;
      font-size: 28rpx;
      margin: 10rpx 0;
	  overflow: hidden;
	}

    .orderYunf {
      text-align: right;

      font-size: 28rpx;
    }

    .orderOper {
      text-align: right;
      margin: 40rpx 20rpx 0 0;

      view {
        margin-left: 20rpx;
        padding: 10rpx 0;
        display: inline-block;
        width: 160rpx;
        font-size: 25rpx;
        text-align: center;
      }

      .opFix {
        color: #555;
        border: 1px solid #ddd;
        border-radius: 30rpx;
      }

      .opCan {
        color: #c96713;
        border: 1px solid #eba00b;
        border-radius: 30rpx;
      }
      .kefu {
        float: left;
      }
    }
  }
}
.copyCode {
  display: inline-block;
  margin-left: 20rpx;
}
.deliverCntent {
  padding: 32rpx;
  position: relative;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-top: 1px solid #eee;
  font-size: 28rpx;
}

.flexbox {
  display: flex;
}

.img_icon {
  padding-right: 5px;
}

.moreBtnF {
  align-items: center;
  padding: 30rpx;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
}

.wuliu {
  .time {
    color: #888;
  }

  .moreBtn {
    display: inline-block;
    width: 50px;
  }
}
.address_box {
  background-color: #fff;
  display: flex;
  align-items: center;
  .order_top {
    background-color: #fff;
  }

  .user_info {
    width: 100%;
    float: left;
    display: flex;
    align-items: center;

    .name {
      color: #838282;
      margin-right: 10rpx;
    }

    .tel {
      color: #838282;
    }
  }

  .curriulum_title {
    width: auto;
    font-size: 30rpx;
    font-weight: 700;
    float: left;
    margin-right: 10rpx;
    color: #333;
    line-height: 40rpx;
    letter-spacing: 2rpx;
  }

  .normal_box {
    margin-left: 5rpx;
    width: calc(100% - 120rpx);
  }

  .goods_box {
    padding: 20rpx 20rpx;
    display: flex;
    align-items: center;
  }

  .rightArrow {
    margin-left: 40rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
.feng {
  background-color: #fafafa;
  margin: 0rpx 22rpx 0 0;
  height: 140rpx !important;
  width: 140rpx !important;
  float: left;
  border-radius: 14rpx;
  // border: 1rpx solid #e9e9e9;
}
.booknameleft {
  font-size: 32rpx;
  width: calc(100% - 100rpx);
  color: #070707;
  letter-spacing: 0.5rpx;
  font-weight: 600;
}
.order_item {
  padding: 20rpx 20rpx;
  border-top: 1px solid #eee;
}
/deep/.goods_nav_box {
  .left {
    margin-top: -10rpx;
    width: auto;
    height: auto;
    position: relative;
    // overflow: hidden;
  }
}
.delisted {
  background-color: red;
  color: #fff;
  // padding: 2rpx 4rpx;
  position: absolute;
  border-radius: 4rpx;
  font-size: 22rpx;
  width: 100rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  left: calc((100% - 100rpx) / 2);
  top: calc((100% - 40rpx) / 2);
}
.order_bottom_box {
  margin-left: 20rpx;

  .number {
    font-size: 28rpx;
    margin-right: 15rpx;
    margin-top: 5rpx;
  }

  .price {
    .total {
      font-size: 38rpx;
      color: red;
    }
  }
}
.vip_year{
	padding-left: 20rpx;
	color: #f5342b;
	font-size: 30rpx;
}
</style>
