<template>
  <likeGood ref="likeGood" :page-type="1">
    <view class="order-detail">
      <view class="order-detail-status">
        <view class="Od-status-desc">
          <text>{{ goodsInfo.orderStatusInfo.orderStatusText }}</text>
          <text>{{ goodsInfo.orderStatusInfo.text }}</text>
        </view>
        <!-- <image src="/static/images/order/obligation@2x.png"></image> -->

        <!-- 订单已发货 待收货31-->
        <image
          v-if="goodsInfo.orderStatusInfo.orderStatus == 31"
          class="order-delivered"
          src="https://img.lkbang.net/xcx/order-delivered.png"
        />
        <!-- 订单待付款 待付款11 -->
        <image
          v-else-if="goodsInfo.orderStatusInfo.orderStatus == 11"
          class="order-pay"
          src="https://img.lkbang.net/xcx/order-pay.png"
        />
        <!-- 订单待发货 待发货21-->
        <image
          v-else-if="goodsInfo.orderStatusInfo.orderStatus == 21"
          class="order-to-delivered"
          src="https://img.lkbang.net/xcx/order-to-delivered.png"
        />
        <!-- 订单已完成 已完成41-->
        <image
          v-else-if="goodsInfo.orderStatusInfo.orderStatus == 41"
          class="order-completed"
          src="https://img.lkbang.net/xcx/order-completed.png"
        />
        <!-- 订单关闭 已取消51-->
        <image
          v-else-if="goodsInfo.orderStatusInfo.orderStatus == 51"
          class="order-close"
          src="https://img.lkbang.net/xcx/order-close.png"
        />
      </view>
      <view
        v-if="goodsInfo.shipmentInfo && goodsInfo.shipmentInfo.promoterPhoneNo"
        class="order-detail-price"
      >
        <!-- 活动优惠金额 -->
        <view class="Od-price-statistic">
          <text>取货方式</text>
          <text>门店自提</text>
        </view>
        <!-- 优惠券抵扣金额 -->
        <view
          class="Od-price-statistic"
          :class="{
            'Od-notice-padding': goodsInfo.orderStatusInfo.orderStatus == 41
          }"
        >
          <text>推广员手机号</text>
          <text>{{ goodsInfo.shipmentInfo.promoterPhoneNo }}</text>
        </view>
        <view v-if="goodsInfo.orderStatusInfo.orderStatus == 41" class="Od-price-notice">
          您的取货方式为门店自提，请您线下联系推广员取货即可
        </view>
      </view>
      <template v-else>
        <view v-if="goodsInfo.receiverInfo" class="order-detail-area">
          <view class="Od-area-person">
            <text v-if="goodsInfo.receiverInfo.addrDefault == 1" class="desc-default">默认</text>
            <!-- <text>{{goodsInfo.receiverInfo.receiverName}}</text> -->
            <text
              >{{ goodsInfo.receiverInfo.receiverName
              }}{{ goodsInfo.receiverInfo.receiverPhoneNo }}</text
            >
          </view>
          <view class="Od-area-address">
            <!-- <text>{{goodsInfo.receiverInfo.provinceName}}, </text>
            <text>{{goodsInfo.receiverInfo.cityName}}, </text>
            <text>{{goodsInfo.receiverInfo.countyName}}, </text>
            <text>{{goodsInfo.receiverInfo.townName}}, </text> -->
            <view>{{ goodsInfo.receiverInfo.detail }}</view>
          </view>
        </view>
      </template>
      <!-- <order-card /> -->
      <view
        v-for="(item, inx) in goodsInfo.skuList"
        :key="inx"
        class="confirm-goods"
        @click="toDetail(item)"
      >
        <view style="display: flex">
          <image class="confirm-goods-left" mode="aspectFit" :src="item.imageUrl" />
          <view class="confirm-goods-middle">
            <text class="Cg-middle-name">{{ item.skuName }}</text>
            <text class="Cg-middle-param">{{ item.skuAtts }}</text>
          </view>
          <view class="confirm-goods-right">
            <view class="gR-top">
              <text>¥{{ item.salePrice || 0 }}</text>
              <text>{{ item.count || 0 }}件</text>
            </view>
            <!-- v-if="
                goodsInfo.orderStatusInfo.orderStatus == 31 ||
                  goodsInfo.orderStatusInfo.orderStatus == 41
              " -->
            <view v-if="item.afterServiceInfo.showAfsButton" class="gR-bottom">
              <!-- 青海移动不展示售后 按钮-->
              <button
                v-if="$config('yxm')"
                :class="
                  [
                    REFUND_TYPE.AUDITING,
                    REFUND_TYPE.AUDIT_PASS,
                    REFUND_TYPE.POSTING,
                    REFUND_TYPE.REFUNDING
                  ].includes(item.serviceStatus)
                    ? 'gR-bottom_red'
                    : 'gR-bottom_grey'
                "
                @click.stop="toAftersale(item, index)"
              >
                {{ item.afterServiceInfo.afsButtonText }}
              </button>
            </view>
          </view>
        </view>
        <view
          v-if="item.afterServiceInfo && item.afterServiceInfo.applyTimeLimitText"
          class="after-sale-date"
        >
          {{ item.afterServiceInfo.applyTimeLimitText }}
        </view>
      </view>
      <view v-if="$config('yxm')" class="order-detail-online" @click="navToCustomer()">
        <image class="order-detail-online-img" src="https://img.lkbang.net/comcuster.png" />
        <text>在线客服</text>
      </view>
      <view class="order-detail-price">
        <!-- 活动优惠金额 -->
        <view class="Od-price-statistic">
          <text>活动优惠</text>
          <text>¥{{ goodsInfo.feeInfo.activityDeductionFee || "0.00" }}</text>
        </view>
        <!-- 优惠券抵扣金额 -->
        <view class="Od-price-statistic">
          <text>优惠</text>
          <text>¥{{ goodsInfo.feeInfo.couponDeductionFee || "0.00" }}</text>
        </view>
        <!-- 现金券优惠 -->
        <view class="Od-price-statistic">
          <text>现金券</text>
          <text>¥{{ goodsInfo.feeInfo.cashCouponDeductionFee || "0.00" }}</text>
        </view>
        <!-- 礼品卡 -->
        <view v-if="goodsInfo.feeInfo.giftCardDeductionFee" class="Od-price-statistic">
          <text>礼品卡</text>
          <text>¥{{ goodsInfo.feeInfo.giftCardDeductionFee || "0.00" }}</text>
        </view>
        <!-- 运费优惠券抵扣金额 -->
        <view class="Od-price-statistic">
          <text>运费优惠</text>
          <text>¥{{ goodsInfo.feeInfo.freightDeductionFee || "0.00" }}</text>
        </view>
        <view class="Od-price-statistic">
          <text>运费</text>
          <!-- 订单运费总金额 -->
          <text>¥{{ goodsInfo.feeInfo.totalFreightFee || "0.00" }}</text>
        </view>
        <view v-if="$config('yxm')" class="Od-price-statistic">
          <text>支付优惠</text>
          <!-- 订单运费总金额 -->
          <text>¥{{ goodsInfo.feeInfo.payDeductionFee || "0.00" }}</text>
        </view>
        <view class="Od-price-statistic">
          <text v-if="goodsInfo.orderStatusInfo.orderStatus == 11">待付款</text>
          <text v-else>实付款</text>
          <!-- 订单总金额 -->
          <text class="Odp-statistic_bold">¥{{ goodsInfo.feeInfo.totalFee || "0.00" }}</text>
        </view>
      </view>
      <view class="order-detail-info">
        <view class="Odi-item">
          订单编号：<text class="color-deep">{{ goodsInfo.orderDetail.orderNo || "" }}</text>
          <text class="right-btn" @click="copyOrderNo">复制</text>
        </view>
        <view class="Odi-item">
          下单时间：<text class="color-deep">{{ goodsInfo.orderDetail.orderTime || "" }}</text>
        </view>
        <view v-if="goodsInfo.orderDetail.payTime" class="Odi-item">
          支付时间：<text class="color-deep">{{ goodsInfo.orderDetail.payTime || "" }}</text>
        </view>
        <view v-if="goodsInfo.payDetail.creditPayAmt" class="Odi-item">
          信用支付金额：<text class="color-deep">{{ goodsInfo.payDetail.creditPayAmt || "" }}</text>
        </view>
        <view v-if="goodsInfo.payDetail.wxPayAmt" class="Odi-item">
          微信支付金额：<text class="color-deep">{{ goodsInfo.payDetail.wxPayAmt || "" }}</text>
        </view>
        <view v-if="goodsInfo.orderDetail.payType" class="Odi-item">
          支付方式：<text class="color-deep">{{ goodsInfo.orderDetail.payType || "" }}</text>
        </view>
        <view v-if="goodsInfo.orderDetail.deliveryAt" class="Odi-item">
          发货时间：<text class="color-deep">{{ goodsInfo.orderDetail.deliveryAt || "" }}</text>
        </view>
        <view v-if="goodsInfo.orderDetail.orderCompleteTime" class="Odi-item">
          完成时间：<text class="color-deep">{{
            goodsInfo.orderDetail.orderCompleteTime || ""
          }}</text>
        </view>
      </view>

      <!-- 11-待付款 -->
      <view v-if="goodsInfo.orderStatusInfo.orderStatus == 11" class="order-detail-bottom">
        <button class="Od-bottom_grey" @click="open('reasonNowPopup')">
          取消订单
        </button>
        <button class="Od-bottom_red" @click="toPay()">付款</button>
      </view>
      <!-- 21-待发货 -->
      <view v-else-if="goodsInfo.orderStatusInfo.orderStatus == 21" class="order-detail-bottom">
        <!--  isShowRefund===1&&isShowRefundAudit===1 展示审核中 -->
        <!--  isShowRefund===1&&isShowRefundAudit===0 展示申请退款 -->
        <template v-if="goodsInfo.orderStatusInfo.isShowRefund">
          <button
            v-if="goodsInfo.orderStatusInfo.isShowRefundAudit"
            class="Od-bottom_grey"
            disabled
          >
            审核中
          </button>
          <template v-else>
            <button v-if="$config('yxm')" class="Od-bottom_grey" @click="refundPop('reasonPopup')">
              <!-- shipping代表是否发货中 已弃用--2021.11.18  -->
              <!-- {{ shipping ? "取消订单" : "申请退款" }} -->
              申请退款
            </button>
          </template>
        </template>

        <button class="Od-bottom_grey" @click="orderTips">提醒发货</button>
      </view>
      <!-- 31-待收货 -->
      <view v-else-if="goodsInfo.orderStatusInfo.orderStatus == 31" class="order-detail-bottom">
        <button
          v-if="goodsInfo.orderStatusInfo.isShowRefund"
          class="Od-bottom_grey"
          @click="refundPop('reasonPopup')"
        >
          取消订单
        </button>
        <button
          v-if="goodsInfo.orderStatusInfo.isShowRemindCancel"
          class="Od-bottom_grey"
          @click="remindCancel"
        >
          催促一下
        </button>
        <button
          v-if="goodsInfo.orderStatusInfo.isShowLogistics"
          class="Od-bottom_grey"
          @click="toOrderTimeLine()"
        >
          查看物流
        </button>
        <button
          v-if="!goodsInfo.orderStatusInfo.isShowRemindCancel"
          class="Od-bottom_red"
          @click="orderConfirm"
        >
          确认收货
        </button>
        <button
          v-if="goodsInfo.orderStatusInfo.isShowRemindCancel"
          class="Od-bottom_red"
          @click="cancelRevokeShowModal"
        >
          撤销申请
        </button>
      </view>

      <!-- 41-已完成 -->
      <view
        v-else-if="
          goodsInfo.orderStatusInfo.orderStatus == 41 && goodsInfo.orderStatusInfo.isShowLogistics
        "
        class="order-detail-bottom"
      >
        <button class="Od-bottom_grey" @click="toOrderTimeLine()">
          查看物流
        </button>
        <!-- <button class="Od-bottom_red">再次购买</button> -->
      </view>
      <!-- 51-已取消 -->
      <!-- <view class="order-detail-bottom" v-else-if="goodsInfo.orderStatusInfo.orderStatus == 51">
				<button class="Od-bottom_red">再次购买</button>
			</view> -->

      <!-- <custom-popup ref="reasonPopup"> -->
      <uni-popup ref="reasonPopup" type="bottom" :closeable="true">
        <template v-if="isSucc">
          <view class="img-succ">
            <image class="refund-succ" :src="iconAndTips.imageUrl" mode="widthFix" />
          </view>
          <view class="yuan">
            <text>¥{{ iconAndTips.amount }}</text>
          </view>
          <view class="yuan_detail">
            <text>{{ iconAndTips.title }}</text>
          </view>
          <view class="tips">
            <text> {{ iconAndTips.tips }} </text>
          </view>
          <view class="order-detail-reason refund-reason">
            <view @touchmove.stop.prevent="disabledScroll">
              <scroll-view scroll-y="true" class="scroll-Y">
                <radio-group @change="radioChange">
                  <label v-for="(item, index) in reasonList" :key="item" class="Od-reason-item">
                    <!-- <radio color="#EC1500" :value="index" :checked="index === current" />
              <text>{{ item }}</text> -->
                    <text>{{ item.cancelReason }}</text>
                    <radio :value="index" color="#EC1500" :checked="current === Number(index)" />
                  </label>
                </radio-group>
              </scroll-view>
            </view>
            <view class="Od-reason-button refund-reason-button">
              <button @click="orderClose">确定退款¥{{ iconAndTips.amount }}</button>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="radio-info">
            <view class="img">
              <image class="refund" :src="iconAndTips.imageUrl" mode="widthFix" />
            </view>
            <view class="refundSucc">
              <text>{{ iconAndTips.title }}</text>
            </view>
            <view class="refundSucc_detail">
              <text>{{ iconAndTips.tips }}</text>
            </view>
            <view class="radio-info__button">
              <button @click="handleConfirm">确定</button>
            </view>
          </view>
        </template>
      </uni-popup>

      <uni-popup
        ref="reasonNowPopup"
        type="bottom"
        :closeable="true"
        title="请选择原因"
        desc="订单一旦取消，无法恢复，金额/积分将原路返还"
      >
        <view class="order-detail-reason refund-reason">
          <radio-group @change="radioChange">
            <label v-for="(item, index) in reasonList" :key="item" class="Od-reason-item">
              <!-- <radio color="#EC1500" :value="index" :checked="index === current" />
              <text>{{ item }}</text> -->
              <text :class="{ active: current === Number(index) }">{{ item.cancelReason }}</text>
              <radio :value="index" color="#EC1500" :checked="current === Number(index)" />
            </label>
          </radio-group>
          <view class="Od-reason-button">
            <button @click="orderClose">提交</button>
          </view>
        </view>
      </uni-popup>
      <couponPop
        :info="refundInfo"
        :value="isNote"
        @child-event="showNote"
        @confirm="handleClick"
      />
      <tipModal :value="showTip" type="gzh" @change="changeTipStatus" />
    </view>
    <login-popup ref="loginPopup" type="center" title="用户授权登录" @change="loginChange" />
  </likeGood>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup";
// import customPopup from "@/components/customPopup.vue";
import authApi from "@/api/address.api";
import likeGood from "@/components/likeGood";
import tipModal from "@/components/tip-modal";
import config from "@/config/index";
import couponPop from "./components/couponPop.vue";
import loginPopup from "@/components/loginPopup";
import { debounce } from "@/utils";
import { paymentConfig } from "@/utils/mpConfig/types";
import { smTrackEvent } from "@/utils/shumei";
import { REFUND_TYPE } from "../../constants/refunnd";
// import { tdInit } from "@/utils/tongdun";
// import { saDeviceId } from "@/utils/sa";

const reasonList = [
  {
    cancelReasonType: 1,
    cancelReason: "收货地址填错了"
  },
  {
    cancelReasonType: 2,
    cancelReason: "忘记支付密码/余额不足"
  },
  {
    cancelReasonType: 3,
    cancelReason: "无法正常支付"
  },
  {
    cancelReasonType: 4,
    cancelReason: "不想买了"
  },
  {
    cancelReasonType: 5,
    cancelReason: "其他原因"
  }
];

export default {
  components: {
    uniPopup,
    // customPopup,
    // uniPopup,
    // uniPopupDialog,
    likeGood,
    tipModal,
    couponPop,
    loginPopup
  },
  data() {
    return {
      refundTipType: 0,
      REFUND_TYPE,
      showTip: false,
      goodsList: [],
      reasonList,
      current: -1,
      goodsInfo: {
        orderStatusInfo: {}
      },
      orderNo: "",
      queryNoteFrom: {
        orderNo: "",
        skuNo: ""
      },
      refundInfo: {
        contractInfoList: [],
        noteNeedContract: false,
        content: ""
      },
      orderSkuId: "",
      isNote: false,
      shipping: false,
      notMaskClick: true,
      isJumpAfterPage: false,
      userInfo: {
        nickname: "",
        hasLogin: false
      },
      iconAndTips: {},
      isSucc: true
    };
  },
  onLoad(options) {
    this.orderNo = options.orderNo;
    this.shipping = options.shipping; //是否发货中状态
    this.orderDealer(options);
    uni.$on("login", isLogin => {
      isLogin && this.orderDealer(options);
    });
    const token = uni.getStorageSync("token") || "";
    if (!token) {
      this.getRef("login-popup").open();
      return;
    }
  },
  onShow() {
    if (this.isJumpAfterPage) {
      this.orderDealer({
        orderNo: this.orderNo
      });
      this.isJumpAfterPage = false;
    }
  },
  methods: {
    //允许滚动
    disabledScroll() {
      return;
    },
    handleConfirm() {
      this.getRef("reasonPopup").close();
    },
    navToCustomer() {
      const customerH5Url = this.goodsInfo.customerConf.customerLink;
      const customerUrlEncode = `/pages/webview/webview?url=${encodeURIComponent(
        JSON.stringify(customerH5Url)
      )}`;
      uni.navigateTo({
        url: customerUrlEncode
      });
    },
    loginChange({ show }) {
      const token = uni.getStorageSync("token") || "";
      if (!show && !token) {
        this.loginModal();
      }
    },
    loginModal() {
      const vm = this;
      uni.showModal({
        title: "温馨提示",
        content: "查看订单详情需要您微信授权才能使用",
        cancelText: "不授权",
        confirmText: "重新授权",
        confirmColor: "#ec1500",
        success: function(res) {
          if (res.confirm) {
            vm.$refs["login-popup"].open();
          } else {
            uni.switchTab({
              url: "/pages/index/index"
            });
          }
        }
      });
    },
    cancelRevokeShowModal() {
      uni.showModal({
        content: "您的订单取消申请商家正在审核中，确认撤销取消订单申请吗？",
        confirmText: "确认",
        cancelText: "取消",
        confirmColor: "#EC1500",
        cancelColor: "#999999",
        success: res => {
          if (res.confirm) {
            this.cancelRevoke();
          }
        }
      });
    },
    async cancelRevoke() {
      const data = await authApi.cancelRevoke({
        orderNo: this.orderNo
      });
      if (data) {
        this.orderDealer({
          orderNo: this.orderNo
        });
        uni.showToast({ title: "取消成功", icon: "none" });
      }
    },
    async remindCancel() {
      const data = await authApi.orderRemindCancel({
        orderNo: this.orderNo
      });
      if (data) {
        console.log(data);
        this.orderDealer({
          orderNo: this.orderNo
        });
        uni.showToast({ title: "催办成功", icon: "none", duration: 2000 });
      }
    },
    handleClick() {
      // if (this.orderSkuId) {
      //   this.goURL("refundType", this.orderSkuId);
      // } else {
      //   this.getRef("reasonPopup").open();
      // }
      if (this.refundTipType === 0) {
        // 弹窗立即退款
        // this.getRef("reasonPopup").open();
        this.orderCancelListV2("reasonPopup");
        return;
      }

      if (this.orderSkuId && this.refundUrlName) {
        this.goURL(this.refundUrlName, this.orderSkuId);
      } else {
        this.showNote(false);
      }
    },
    showNote(val) {
      this.isNote = val;
    },
    goURL(url, orderSkuId) {
      if (orderSkuId) {
        const vccToken = uni.getStorageSync("token") || "";
        const vccChannel = uni.getStorageSync("vccChannel") || "";
        const urlpj = `vccChannel=${vccChannel}&vccToken=${vccToken}&orderSkuId=${orderSkuId}&orderNo=${this.orderNo}&fromXcxPage='detail'`;
        url = `${config.MALL_URL}/${url}?${urlpj}`;
      }
      this.isJumpAfterPage = true;
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(url))}`
      });
    },
    async orderQueryNote() {
      this.queryNoteFrom.orderNo = this.orderNo;
      const [res] = await authApi.orderQueryNote(this.queryNoteFrom);
      if (res) {
        this.refundInfo = { ...this.refundInfo, ...res };
      }
      this.isNote = true;
    },
    toAftersale(info) {
      const { orderSkuId, afterServiceInfo, afterServiceType } = info;
      this.orderSkuId = orderSkuId;
      let refundUrlName = "";
      //afterServiceType售后类型 1-仅退款 2-退货退款
      // 超过售后时间提示
      if (
        afterServiceInfo.cannotApplyAfsNote &&
        ![
          REFUND_TYPE.AUDITING,
          REFUND_TYPE.AUDIT_PASS,
          REFUND_TYPE.AUDIT_REFUSE,
          REFUND_TYPE.POSTING
        ].includes(+afterServiceInfo.serviceStatus)
      ) {
        uni.showModal({
          content: `${afterServiceInfo.cannotApplyAfsNote}`,
          confirmColor: "#EC1500",
          confirmText: "知道了",
          showCancel: false
        });
        return false;
      }
      // 已经取消售后或者商家拒绝售后   重新走售后流程
      let isRefund = [REFUND_TYPE.CANCEL, REFUND_TYPE.UN_ACCEPT, REFUND_TYPE.AUDIT_REFUSE].includes(
        +afterServiceInfo.serviceStatus
      );
      if (+afterServiceType === 1 && !isRefund) {
        refundUrlName = "refundOnlyDetail";
      } else if (+afterServiceType === 2 && !isRefund) {
        refundUrlName = "refundDetail";
      } else {
        refundUrlName = "refundType";
      }
      this.refundUrlName = refundUrlName;

      // if (afterServiceInfo.showCashCouponCancelNote && +afterServiceInfo.serviceStatus === 0) {
      if (
        afterServiceInfo.showCashCouponCancelNote &&
        [0, 90].includes(+afterServiceInfo.serviceStatus)
      ) {
        this.queryNoteFrom.skuNo = info.skuNo;
        this.refundInfo.cashCouponCancelNote = afterServiceInfo.cashCouponCancelNote;
        this.refundTipType = 1;
        this.orderQueryNote();
        return;
      }
      // if (
      //   (this.goodsInfo.orderStatusInfo.orderType == 5 ||
      //     this.goodsInfo.orderStatusInfo.orderType == 2) &&
      //   this.goodsInfo.orderStatusInfo.orderStatus == 31
      // ) {
      //   uni.showToast({
      //     title: "您购买的商品确认收货后才可申请售后哦！",
      //     icon: "none",
      //     duration: 2000
      //   });
      //   return;
      // }

      this.goURL(refundUrlName, orderSkuId);
    },
    tip() {
      this.showTip = true;
    },
    changeTipStatus() {
      this.showTip = false;
    },
    // 跳转商品详情
    toDetail(val) {
      debounce(
        uni.navigateTo({
          url: `/pages/product/goodDetail?skuNo=${val.skuNo}&count=${val.count}`
        }),
        300
      );
    },
    refundPop(ref) {
      const { showCashCouponCancelNote } = this.goodsInfo.orderStatusInfo;
      if (showCashCouponCancelNote) {
        this.refundInfo = this.goodsInfo.orderStatusInfo;
        this.orderQueryNote();
        return;
      } else {
        this.orderCancelListV2(ref);
        this.current = -1;
        // this.getRef(ref).open();
        // let tips = {
        //   content: cancelNote || "宝贝马上就要发货了，您真的要取消吗？",
        //   confirmText: "仍要取消",
        //   cancelText: "留下商品",
        //   confirmColor: "#EC1500",
        //   cancelColor: "#999999",
        //   success: res => {
        //     if (res.confirm) {
        //       this.orderCancelList();
        //       this.getRef(ref).open();
        //     }
        //   }
        // };
        // uni.showModal(tips);
      }

      // let tips = {
      //   content: cancelNote || "宝贝马上就要发货了，您真的要取消吗？",
      //   confirmText: "仍要取消",
      //   cancelText: "留下商品",
      //   confirmColor: "#EC1500",
      //   cancelColor: "#999999",
      //   success: res => {
      //     if (res.confirm) {
      //       this.orderCancelList();
      //       this.getRef(ref).open();
      //     }
      //   }
      // };
      // if (orderType === 5 || orderType === 6) {
      //   tips = {
      //     content: "该商品暂不支持取消，您可以在收货时直接拒收，钱款原路退回付款账户中",
      //     confirmText: "知道了",
      //     confirmColor: "#EC1500",
      //     cancelColor: "#999999",
      //     showCancel: false
      //   };
      // }
      // if (showCashCouponCancelNote) {
      //   this.refundInfo = this.goodsInfo.orderStatusInfo;
      //   this.orderQueryNote();
      //   // this.isNote = true;
      //   return;
      // }
      // uni.showModal(tips);
    },
    open(ref) {
      const { orderStatus, paymentInProgress } = this.goodsInfo.orderStatusInfo;
      if (orderStatus === 11 && paymentInProgress) {
        uni.showModal({
          content: "订单支付处理中，请稍后再试!",
          confirmColor: "#EC1500",
          confirmText: "知道了",
          showCancel: false
        });
        return;
      }
      if (ref == "reasonNowPopup") {
        this.current = -1;
        this.orderCancelList();
      }
      this.getRef(ref).open();
    },
    getRef(ref) {
      if (this.$refs[ref]) {
        return this.$refs[ref];
      } else {
        return this.$refs["likeGood"].$refs[ref];
      }
    },
    close(ref) {
      this.getRef(ref).close();
    },
    toPay() {
      const { orderStatus, paymentInProgress } = this.goodsInfo.orderStatusInfo;
      if (orderStatus === 11 && paymentInProgress) {
        uni.showModal({
          content: "支付中，请勿重复支付",
          confirmColor: "#EC1500",
          confirmText: "知道了",
          showCancel: false
        });
        return;
      }
      // 跳转支付
      uni.navigateTo({
        url: paymentConfig.payUrl
      });
    },
    orderClose() {
      if (this.current === -1) return uni.showToast({ title: "请至少选择一项", icon: "none" });
      const { orderStatus } = this.goodsInfo.orderStatusInfo;
      const obj = {
        orderNo: this.orderNo,
        cancelReason: this.reasonList[this.current].cancelReason,
        cancelReasonType: this.reasonList[this.current].cancelReasonType,
        agreeContract: true
      };
      this.close("reasonNowPopup");
      this.isSucc = false;
      if (orderStatus == 21 || orderStatus == 31) {
        this.orderUnfilledCancel(obj);
      } else {
        this.orderCancel(obj);
      }
    },
    radioChange(evt) {
      this.current = +evt.target.value;
    },
    copyOrderNo() {
      uni.setClipboardData({
        data: this.goodsInfo.orderDetail.orderNo,
        success: () => {
          /* #ifdef MP-ALIPAY */
          uni.showToast({
            title: "复制成功",
            icon: "none"
          });
          /* #endif */
        }
      });
    },
    orderTips() {
      uni.showToast({
        title: "已提醒卖家尽快发货！",
        icon: "none",
        duration: 2000
      });
    },
    toOrderTimeLine() {
      console.log(this.goodsInfo);
      let exp = this.goodsInfo.expressInfoList[0];
      uni.navigateTo({
        url: `/pages/order/orderStatus?deliveryOrderId=${this.orderNo}&expressCompanyCode=${exp?.expressCompanyCode}&deliveryNo=${exp?.deliveryNo}&orderNo=${this.orderNo}`
      });
    },
    async orderDealer(val) {
      //订单详情查询接口
      const [getData] = await authApi.orderDetail(val);
      if (getData) {
        this.goodsInfo = getData;
      }
    },
    async orderConfirm() {
      //用户订单确认收货接口
      const [getData] = await authApi.orderConfirm({
        orderNo: this.orderNo
      });
      if (getData) {
        this.orderDealer({
          orderNo: this.orderNo
        });
        uni.showToast({ title: "已确认收货！", icon: "none" });
      }
    },
    async orderUnfilledCancel(obj) {
      // 用户订单取消接口【已付款】
      const [getData, error] = await authApi.orderUnfilledCancelV2(obj);
      if (getData || error.msg === "取消成功") {
        this.iconAndTips = getData.iconAndTips;
        this.orderDealer({
          orderNo: this.orderNo
        });
      }
    },
    async orderCancel(obj) {
      // 用户订单取消接口【未付款】
      const [getData] = await authApi.orderCancel(obj);
      if (getData) {
        this.orderDealer({
          orderNo: this.orderNo
        });
        smTrackEvent({
          eventId: "cancelOrder",
          orderId: this.orderNo
        });
      }
    },
    async orderCancelList() {
      // 订单取消原因查询接口
      const obj = {
        orderNo: this.orderNo
      };
      const [getData] = await authApi.orderCancelList(obj);
      if (getData) {
        this.reasonList = getData.cancelReasonList;
      }
    },
    async orderCancelListV2(ref) {
      // 订单取消原因查询接口
      const obj = {
        orderNo: this.orderNo
      };
      const [getData, error] = await authApi.orderCancelListV2(obj);
      if (!error) {
        this.reasonList = getData.cancelReasonList;
        this.iconAndTips = getData.iconAndTips;
        this.refundTipType = 0;
        this.getRef(ref).open();
        return;
      }
      // console.log(error);
      uni.showModal({
        title: "温馨提示",
        content: error.msg || "",
        cancelText: "不授权",
        confirmText: "确定",
        confirmColor: "#ec1500",
        showCancel: false
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.radio-info__button {
  border-top: 1rpx solid #f2f3f5;
  padding: 16rpx 40rpx;
  button {
    background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    border-radius: 160rpx;
    height: 80rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    color: #fff;
  }
}
.close {
  position: absolute;
  right: 38rpx;
  top: 38rpx;
  .close-img {
    width: 44rpx;
    height: 44rpx;
  }
}
.yuan {
  font-size: 48rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 40rpx;
  text-align: center;
  margin-top: 24rpx;
}
.yuan_detail {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 40rpx;
  text-align: center;
  margin-top: 24rpx;
  margin-bottom: 48rpx;
}
.scroll-Y {
  height: 400rpx;
}
.refundSucc {
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 40rpx;
  margin-top: 34rpx;
  text-align: center;
}
.refundSucc_detail {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin-top: 8rpx;
  margin-bottom: 164rpx;
  text-align: center;
  padding: 0 108rpx;
}
.tips {
  width: 686rpx;
  height: 88rpx;
  background: #f7f8fa;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 88rpx;
  margin: 0 auto;
  text-align: center;
}
.img {
  padding-top: 84rpx;
}
.img-succ {
  padding-top: 100rpx;
}
.refund-succ {
  width: 240rpx;
  height: 240rpx;
  margin: 0 auto;
  display: block;
}
.refund {
  width: 334rpx;
  height: 334rpx;
  margin: 0 auto;
  display: block;
}
.refund-reason {
  padding-left: 32rpx;
  &-button {
    border-top: 0 !important;
  }
}
page {
  padding-bottom: 50rpx;
}
.color-deep {
  color: #666;
  display: inline-block !important;
}
.order {
  &-delivered {
    width: 198rpx;
    height: 132rpx;
  }
  &-pay {
    width: 186rpx;
    height: 172rpx;
  }
  &-to-delivered {
    width: 190rpx;
    height: 182rpx;
  }
  &-completed {
    width: 198rpx;
    height: 166rpx;
  }
  &-close {
    width: 194rpx;
    height: 156rpx;
  }
}
.confirm-goods {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  background: #fff;
  margin: 0 20rpx 0;
  border-radius: 12rpx 12rpx 0 0;
  &_failure {
    align-items: center;
  }
  &:first-child {
    border-radius: 12rpx 12rpx 0 0;
  }
  &:last-child {
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-radius: 0 0 12rpx 12rpx;
  }
  &-icon {
    margin-right: 10rpx;
    width: 56rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 16rpx;
    background: #979797;
    font-size: 20rpx;
    color: #ffffff;
  }
  &-left {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
  }
  &-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20rpx;
    .Cg-middle-name {
      /* #ifdef MP-ALIPAY */
      line-height: 36rpx;
      /* #endif */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 10rpx;
      overflow: hidden;
      font-size: 26rpx;
      color: #333333;
    }
    .Cg-middle-param {
      margin-bottom: 30rpx;
      font-size: 24rpx;
      color: #999999;
    }
    .Cg-middle-warn {
      display: flex;
      align-items: center;
      image {
        margin-right: 10rpx;
        width: 24rpx;
        height: 24rpx;
      }
      text {
        font-size: 26rpx;
        color: #ec1500;
      }
    }
    .Cg-middle_failure {
      text {
        color: #333333;
      }
    }
  }
  &-right {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    .gR-top {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 120rpx;
      text {
        &:first-child {
          margin-bottom: 10rpx;
          font-size: 26rpx;
          color: #333333;
        }
        &:last-child {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    .gR-bottom {
      .gR-bottom_red {
        border: 1px solid #faab0c;
        color: #faab0c;
      }
      .gR-bottom_grey {
        border: 1px solid #999999;
        color: #666666;
      }
      button {
        margin: 0;
        width: 170rpx;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        border-radius: $border-radius-2;
        background: $white;
      }
    }
  }
  .after-sale-date {
    padding-top: 5px;
    text-align: right;
    font-size: 22rpx;
    color: rgba(250, 171, 12, 1);
  }
}
.order-detail {
  ::v-deep .order-card {
    margin: 0 20rpx 20rpx;
  }
  &-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx;
    padding: 20rpx 110rpx;
    background: $white;
    border-radius: 12rpx;
    height: 236rpx;
    .Od-status-desc {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 20rpx;
      text {
        &:first-child {
          margin-bottom: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
        &:last-child {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    // image {
    // width: 200rpx;
    // height: 200rpx;
    // }
  }
  &-area {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background: $white;
    border-radius: 12rpx;
    .Od-area-person {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .desc-default {
        display: inline-block;
        margin-right: 20rpx;
        width: 72rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
        border-radius: 6rpx;
        font-size: 22rpx;
        color: #ffffff;
      }
      text {
        &:last-child {
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .Od-area-address {
      font-size: 24rpx;
      color: #666666;
    }
  }
  &-online {
    background-color: #fff;
    border-radius: 0px 0px 8rpx 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    text-align: center;
    white-space: nowrap;
    height: 80rpx;
    line-height: 80rpx;
    margin: 2rpx 20rpx 20rpx;
    &-img {
      margin-right: 4rpx;
      width: 40rpx;
      height: 40rpx;
      box-sizing: border-box;
    }
  }
  &-price {
    margin: 0 20rpx 20rpx;
    .Od-price-statistic {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;
      background: #fff;
      &:first-child {
        border-radius: 12rpx 12rpx 0 0;
      }
      &:last-child {
        padding-bottom: 20rpx;
        border-radius: 0 0 12rpx 12rpx;
      }
      text {
        font-size: 26rpx;
        &:first-child {
          color: #999999;
        }
        &:last-child {
          color: #333333;
        }
      }
      .Odp-statistic_bold {
        font-size: 30rpx !important;
        color: #ec3333 !important;
      }
    }
    .Od-price-notice {
      font-size: $uni-font-size-tiny;
      color: #ed6a0c;
      line-height: 24px;
      background-color: #fffbe8;
      padding: 0 20rpx;
      width: 100%;
      /* transform: translateX(-20rpx); */
      border-radius: 0 0 12rpx 12rpx;
    }
    .Od-notice-padding {
      padding-bottom: 20rpx;
    }
  }
  &-info {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    font-size: 26rpx;
    color: #999999;
    border-radius: 12rpx;
    background: $white;
    .Odi-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .right-btn {
        margin-left: auto;
        color: #ec1500;
        font-size: 24rpx;
      }
    }
  }
  &-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 120rpx;
    padding: 20rpx;
    background: $white;
    border-top: $border-sm solid $bg-color-g1;
    z-index: 2;
    .Od-bottom_grey {
      border: $border-sm solid #999999;
      color: #333333;
    }
    .Od-bottom_red {
      border: $border-sm solid #ec1500;
      color: #ec1500;
    }
    button {
      margin: 0;
      margin-right: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180rpx;
      height: 60rpx;
      font-size: $font-base;
      border-radius: $border-radius-2;
      background: $white;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  &-reason {
    padding-bottom: 134rpx;

    .Od-reason-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 23rpx 0;
      radio {
        margin-right: 20rpx;
        transform: scale(0.7);
      }
      text {
        font-size: 30rpx;
        color: #333333;
      }
      .active {
        color: #ec1500;
      }
    }
    .Od-reason-button {
      border-top: 1rpx solid #f2f3f5;
      position: fixed;
      left: 40rpx;
      right: 40rpx;
      bottom: 0;
      padding: $padding-md 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80rpx;
        font-size: $font-base;
        font-weight: bold;
        border-radius: $border-radius-2;
        &:first-child {
          border: $border-sm solid $border-red;
          background: $bg-color;
          color: $font-color-search;
        }
        &:last-child {
          color: $white;
          background-image: $background-primary;
        }
      }
    }
  }
}
</style>
