<template>
  <view class="order-card">
    <view class="confirm-state">
      <view class="state-title">当前订单状态</view>
      <view
        class="state-txt"
        :class="
          orderData.orderStatusText === '已完成' || orderData.orderStatusText === '交易关闭'
            ? 'color-gray'
            : orderData.orderStatusText === '售后中'
            ? 'state-txt'
            : ''
        "
      >
        {{ orderData.orderStatusText }}
      </view>
    </view>
    <view class="confirm-goods-box">
      <view
        v-for="(item, inx) in orderData.skuList"
        :key="inx"
        class="confirm-goods"
        @click="goodsDealer"
      >
        <image class="confirm-goods-left" mode="aspectFit" :src="item.imageUrl" />
        <view class="confirm-goods-middle">
          <text class="Cg-middle-name">{{ item.skuName || "" }}</text>
        </view>
        <view class="confirm-goods-right">
          <view class="gR-top">
            <text>¥{{ item.salePrice || "0.00" }}</text>
            <text>{{ item.count }}件</text>
          </view>
          <view
            v-if="
              item.havingService && (orderData.orderStatus == 31 || orderData.orderStatus == 41)
            "
            class="gR-bottom"
          >
            <button @click.stop="toAftersale(item)">
              售后中
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="confirm-sum">
      <!-- <text>总价¥{{ orderData.originalFee || 0 }},</text> -->
      <!-- <text>优惠¥{{ orderData.reduceFee || 0 }},</text> -->
      <text v-if="orderData.orderStatus == 11" class="stress"
        >待付款 ¥{{ orderData.totalFee || 0 }}</text
      >
      <text v-else class="stress">实付款 ¥{{ orderData.totalFee || 0 }}</text>
    </view>
    <view v-if="[11, 21, 31, 41].indexOf(orderData.orderStatus) > -1" class="confirm-status">
      <text class="confirm-status-left Cs-left-orange" />
      <!-- 等待买家付款 -->
      <view v-if="orderData.orderStatus == 11" class="confirm-status-right">
        <button class="Cs-right_grey" @click="handleOptionClick('cancel')">
          取消订单
        </button>
        <button class="Cs-right_red" @click="handleOptionClick('pay')">付款</button>
      </view>
      <!-- 等待卖家发货 -->
      <view v-else-if="orderData.orderStatus == 21" class="confirm-status-right">
        <!--  isShowRefund===1 && isShowRefundAudit===1 展示审核中 -->
        <!-- isShowRefund===1 && isShowRefundAudit===0 展示申请退款 -->
        <view v-if="orderData.isShowRefund">
          <button v-if="orderData.isShowRefundAudit" class="Cs-right_grey" disabled>
            审核中
          </button>
          <template v-else>
            <button
              v-if="$config('yxm')"
              class="Cs-right_grey"
              @click="handleOptionClick('refund')"
            >
              申请退款
            </button>
          </template>
        </view>

        <button class="Cs-right_grey" @click="handleOptionClick('notify')">提醒发货</button>
      </view>
      <!-- 卖家已发货 31 -->
      <view v-else-if="orderData.orderStatus == 31" class="confirm-status-right">
        <!-- <button
          v-if="orderData.isShowRefund"
          class="Cs-right_grey"
          @click="handleOptionClick('refund')"
        >
          申请退款
        </button> -->
        <button
          v-if="orderData.isShowLogistics"
          class="Cs-right_grey"
          @click="handleOptionClick('logis')"
        >
          查看物流
        </button>
        <button
          v-if="!orderData.isShowRemindCancel"
          class="Cs-right_red"
          @click="handleOptionClick('confirm')"
        >
          确认收货
        </button>
      </view>
      <!-- 交易完成 -->
      <view v-else-if="orderData.orderStatus == 41" class="confirm-status-right">
        <button
          v-if="orderData.isShowLogistics"
          class="Cs-right_grey"
          @click="handleOptionClick('logis')"
        >
          查看物流
        </button>
        <!-- <button class="Cs-right_red" :data-id="skuNo" @click="handleOptionClick('again')">再次购买</button> -->
      </view>
    </view>
  </view>
</template>
<script>
import config from "@/config/index";
// import { kaGetNextUrl } from "@/api/ka.api";
import { REFUND_TYPE } from "../constants/refunnd";
export default {
  props: {
    idx: [Number, String],
    orderData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      REFUND_TYPE
    };
  },
  computed: {
    orderNo() {
      return this.orderData.orderNo;
    }
  },
  methods: {
    handleOptionClick(eventType) {
      const { idx, orderData } = this;
      this.$emit("option-click", eventType, idx, orderData);
    },
    goodsDealer() {
      let shipping = false;
      if (this.orderData.orderStatusText == "卖家发货中") {
        shipping = true;
      }
      uni.navigateTo({
        url: `/pages/order/orderDetail?orderNo=${this.orderNo}&shipping=${shipping}`
      });
    },
    toAftersale(info) {
      let { afterServiceType, serviceStatus } = info;
      const url = config.MALL_URL;
      const vccToken = uni.getStorageSync("token") || "";
      const vccChannel = uni.getStorageSync("vccChannel") || "";
      const urlpj = `vccChannel=${vccChannel}&vccToken=${vccToken}&orderSkuId=${info.orderSkuId}&orderNo=${this.orderNo}`;
      let refundUrlName = "";
      // if ([REFUND_TYPE.AUDITING, REFUND_TYPE.REFUNDING].includes(+info.serviceStatus)) {
      //   refundUrlName = "refundOnlyDetail";
      // } else if ([REFUND_TYPE.AUDIT_PASS, REFUND_TYPE.POSTING].includes(+info.serviceStatus)) {
      //   refundUrlName = "refundDetail";
      // } else {
      //   refundUrlName = "refundType";
      // }

      // afterServiceType 售后类型 1-仅退货 2-退货退款
      // 已经取消售后或者商家拒绝售后   重新走售后流程
      let isRefund = [REFUND_TYPE.CANCEL, REFUND_TYPE.UN_ACCEPT, REFUND_TYPE.AUDIT_REFUSE].includes(
        +serviceStatus
      );
      if (+afterServiceType === 1 && !isRefund) {
        refundUrlName = "refundOnlyDetail";
      } else if (+afterServiceType === 2 && !isRefund) {
        refundUrlName = "refundDetail";
      } else {
        refundUrlName = "refundType";
      }
      const urlDetail = `${url}/${refundUrlName}?${urlpj}`;
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(urlDetail))}`
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.confirm-state {
  display: flex;
  justify-content: space-between;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1rpx solid rgba(216, 216, 216, 0.3);
  background: #fff;
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #999;
  border-radius: 12rpx 12rpx 0 0;
}
.state-txt {
  color: #ec1500;
}
.color-gray {
  color: #999999;
}
.color-orange {
  color: #faab0c;
}
.order-card {
  // font-size: 0;
  .confirm-title {
    display: inline-block;
    padding: 20rpx 20rpx 0;
    border-radius: 12rpx 12rpx 0 0;
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
    background: #fff;
    width: 100%;
  }
  .confirm-goods-box {
    .confirm-goods:last-child {
      padding-bottom: 20rpx;
    }
  }
  .confirm-goods {
    display: flex;
    padding: 20rpx 20rpx 0;
    background: #fff;
    &_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 {
        button {
          margin: 0;
          width: 144rpx;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 24rpx;
          border-radius: $border-radius-2;
          background: $white;
          color: #faab0c;
          border: $border-sm solid #faab0c;
        }
      }
    }
  }
  .confirm-sum {
    padding: 20rpx;
    width: 100%;
    height: 70rpx;
    font-size: 26rpx;
    line-height: 38rpx;
    color: #999;
    text-align: right;
    background: $white;
    border-top: 1rpx solid rgba(216, 216, 216, 0.3);
    border-radius: 0 0 12rpx 12rpx;
    text.stress {
      color: #333333;
    }
    text {
      margin-left: 12rpx;
      display: inline;
    }
  }
  .confirm-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
    height: 100rpx;
    background: $white;
    border-radius: 0 0 12rpx 12rpx;
    &-left {
      font-size: 26rpx;
    }
    .Cs-left_grey {
      color: #999999;
    }
    .Cs-left-orange {
      color: $text-color-orange;
    }
    &-right {
      display: flex;
      button {
        margin: 0;
        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-left: 10rpx;
        }
      }
      .Cs-right_grey {
        border: $border-sm solid $border-gray;
        /* color: $text-color-n3; */
        color: $text-color-n5;
      }
      .Cs-right_red {
        border: $border-sm solid $border-color-search;
        color: $font-color-search;
      }
    }
  }
}
</style>
