<template>
  <div class="refundDetail only" :class="{ bgLanger: statusNote }">
    <div class="only-process only-card">
      <div class="only-process-title">{{ afterInfo.statusInfo.statusDesc }}</div>
      <div class="only-process-message">
        <template v-if="time">
          <span class="only-card-time">
            还剩 <cr-count-down :time="handelTime()" format="{d}天{h}时{m}分{s}秒" />
          </span>
        </template>
        <template v-else>
          {{ afterInfo.statusInfo.statusNote || '' }}
        </template>
      </div>
      <cr-button
        v-if="afterInfo.statusInfo && afterInfo.statusInfo.serviceStatus == 20"
        class="only-button"
        type="danger"
        plain
        hairline
        shape="circle"
        @click="refundNum"
      >
        填写单号
      </cr-button>
      <cr-button
        v-if="afterInfo.statusInfo && afterInfo.statusInfo.serviceStatus == 40"
        class="only-button"
        type="danger"
        plain
        hairline
        shape="circle"
        @click="toExpress"
      >
        查看物流
      </cr-button>

      <cr-button
        v-if="
          afterInfo.statusInfo &&
            afterInfo.statusInfo.serviceStatus == 30 &&
            afterInfo.statusInfo.canAppeal
        "
        class="only-button"
        type="default"
        plain
        hairline
        shape="circle"
        @click="refundBe"
      >
        申诉
      </cr-button>
      <cr-button
        v-if="afterInfo.statusInfo && afterInfo.statusInfo.canRemind"
        class="only-button"
        type="default"
        plain
        hairline
        shape="circle"
        @click="afterReminder"
      >
        催办
      </cr-button>
      <cr-button
        v-if="afterInfo.statusInfo && afterInfo.statusInfo.isReminded"
        type="default"
        plain
        hairline
        shape="circle"
        class="only-button"
      >
        已催办
      </cr-button>
      <div class="refundDetail_process">
        <process-refund :node-list="afterInfo.nodeList" />
      </div>
    </div>
    <div v-if="afterInfo.statusNote || afterInfo.expressInfo" class="only-tip only-card">
      <div v-if="afterInfo.statusNote" class="only-tip-title">{{ afterInfo.statusNote.text }}</div>
      <div v-if="afterInfo.statusNote" class="only-tip-message">
        {{ afterInfo.statusNote.content }}
      </div>
      <div v-if="afterInfo.expressInfo" class="only-tip-title marginTop">
        寄件地址
        <div
          class="copy"
          @click="
            copyOrderNo(
              afterInfo.expressInfo &&
                afterInfo.expressInfo.receiverName +
                  afterInfo.expressInfo.receiverPhone +
                  afterInfo.expressInfo.receiveAddress
            )
          "
        >
          复制
        </div>
      </div>
      <div v-if="afterInfo.expressInfo" class="only-tip-color">
        {{ afterInfo.expressInfo && afterInfo.expressInfo.receiverName }}
        {{ afterInfo.expressInfo && afterInfo.expressInfo.receiverPhone }}
      </div>
      <div v-if="afterInfo.expressInfo" class="only-tip-color">
        {{ afterInfo.expressInfo && afterInfo.expressInfo.receiveAddress }}
      </div>
    </div>
    <div class="only-history only-card" :class="{ mtop: !statusNote }" @click="goToChangeHistory">
      <span class="only-history-text">协商历史</span>
      <cr-icon type="arrow" color="#c8c9cc" size="16px" />
    </div>

    <div v-if="afterInfo && afterInfo.skuInfo" class="refundDetail_item">
      <div class="Ol__body">
        <div class="Ol__body-item">
          <cr-image
            :src="afterInfo.skuInfo.imageUrl"
            width="2.266667rem"
            height="2.266667rem"
            class="Ol__body-img"
          />
          <div class="Ol__body-content">
            <div class="Ol__body-row">
              <span class="Ol__body-title">
                {{ afterInfo.skuInfo.skuName }}
              </span>
              <span v-if="afterInfo.skuInfo.salePrice" class="Ol__body-salePrice">
                <span class="Ol__body-skus">¥{{ afterInfo.skuInfo.salePrice }}</span>
                <span class="Ol__body-count">{{ afterInfo.skuInfo.count }}件</span>
              </span>
            </div>
            <div class="thali">{{ afterInfo.skuInfo.skuAtts }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="afterInfo.refundInfo" class="refundDetail_info">
      <div class="refundDetail_info_top">
        <div class="refundDetail_info_content">
          <div class="refundDetail_info_content_left">
            <span>退款原因：</span>
            <span>{{ afterInfo.refundInfo.refundReason }}</span>
          </div>
        </div>
        <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_bottom_left">
            <span>退款金额：</span>
            <span>￥{{ afterInfo.refundInfo.refundAmount }}</span>
          </div>
        </div>
        <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_bottom_left">
            <span>退款份数：</span>
            <span>{{ afterInfo.refundInfo.applyCount }}</span>
          </div>
        </div>
        <!-- <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_bottom_left">
            <span>收款姓名：</span>
            <span>{{ afterInfo.refundInfo.payee }}</span>
          </div>
        </div>
        <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_bottom_left">
            <span>收款账户：</span>
            <span>{{ afterInfo.refundInfo.receiptAccount }}</span>
          </div>
        </div> -->
        <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_bottom_left">
            <span>申请时间：</span>
            <span>{{ afterInfo.refundInfo.applyTime }}</span>
          </div>
        </div>
        <div class="refundDetail_info_content padding_top">
          <div class="refundDetail_info_content_left">
            <span>退款编号：</span>
            <span>{{ afterInfo.serviceNo }}</span>
          </div>
          <div class="refundDetail_info_content_right" @click="copyOrderNo(afterInfo.serviceNo)">
            复制
          </div>
        </div>
        <div class="refundDetail_item_btn">
          <cr-button
            v-if="afterInfo.buttonInfo.showCancelButton"
            shape="circle"
            size="small"
            plain
            hairline
            type="default"
            @click="cancelRefundOnly"
            >撤销申请</cr-button
          >
          <cr-button
            v-if="afterInfo.buttonInfo.showUpdateButton"
            shape="circle"
            size="small"
            plain
            hairline
            type="primary"
            @click="updateRefundOnly"
            >修改申请</cr-button
          >
        </div>
      </div>
    </div>
    <div v-if="afterInfo.statusInfo" class="only-customer">
      <cr-button
        v-if="afterInfo.statusInfo && afterInfo.statusInfo.canRefundFreightFee"
        type="primary"
        hairline
        shape="circle"
        block
        @click="handelRefundFreight"
      >
        申请退运费
      </cr-button>
      <cr-button type="default" hairline shape="circle" block @click="handleToIm">
        联系客服
      </cr-button>
    </div>
  </div>
</template>
<script>
import clipTextMixins from '@/mixins/clipText.mixins';
import orderApi from '@/api/order.api';
import localStorage from '@/service/localStorage.service';
import historyRecordMixins from '@/mixins/historyRecord.mixins';
import ProcessRefund from './components/processRefund.vue';
export default {
  name: 'RefundDetail',
  // eslint-disable-next-line vue/name-property-casing
  components: {
    ProcessRefund
  },
  mixins: [historyRecordMixins, clipTextMixins],
  data() {
    return {
      orderInfo: {},
      goodsInfo: {},
      afterInfo: {
        statusInfo: {}
      },
      serviceNo: '',
      statusNote: null,
      time: false,
      buttonInfo: {},
      type: ''
    };
  },
  created() {
    this.afterDetail();
  },
  methods: {
    handelTime() {
      // 倒计时根据 接口返回值
      let nextTime = new Date(this.afterInfo.statusInfo.serviceTime).getTime();
      let nowTime = new Date().getTime();
      let time;
      if (nextTime > nowTime) {
        time = nextTime - nowTime;
        this.time = true;
      } else {
        time = null;
        this.time = false;
      }
      return time;
    },
    updateRefundOnly() {
      this.$router.push({
        name: 'refund',
        query: {
          type: 2,
          orderSkuId: this.$route.query.orderSkuId,
          serviceNo: this.afterInfo.serviceNo,
          vccToken: localStorage.get('vccToken')
        }
      });
    },
    cancelRefundOnly() {
      this.$dialog({
        message: '您将撤销本次售后申请，请问确认取消售后申请么？',
        confirmButtonColor: '#EE0A24',
        onConfirm: () => {
          this.applyCancel();
        }
      });
    },
    handelRefundFreight() {
      console.log(this.serviceNo);
      this.$router.push({
        name: 'refundFreight',
        params: {
          id: this.serviceNo
        },
        query: {
          refundFreightFeePaymentName: this.afterInfo.statusInfo.refundFreightFeePaymentName,
          vccToken: localStorage.get('vccToken'),
          orderNo: this.$route.query.orderNo,
          orderSkuId: this.$route.query.orderSkuId
        }
      });
    },
    goToChangeHistory() {
      this.$router.push({
        name: 'refundConsultHistory',
        params: {
          serviceNo: this.afterInfo.serviceNo
        },
        query: {
          vccToken: localStorage.get('vccToken')
        }
      });
    },
    async afterReminder() {
      await orderApi.afterReminder({ serviceNo: this.afterInfo.serviceNo });
      this.$toast.success('催办成功');
      this.afterDetail();
    },
    toExpress() {
      const url = this.afterInfo.statusInfo.logisticsUrl;
      window.location.href = this.formatUrl(url);
    },
    formatUrl(url) {
      const vccToken = localStorage.get('vccToken');
      return url?.replace(/\{token\}/g, vccToken);
    },
    toAfter() {
      this.$router.push({
        name: 'refundType',
        query: {
          vccToken: localStorage.get('vccToken'),
          orderNo: this.$route.query.orderNo,
          orderSkuId: this.$route.query.orderSkuId
        }
      });
    },
    async afterDetail() {
      const { orderSkuId, serviceNo } = this.$route.query;
      const params = { orderSkuId };
      if (serviceNo) {
        params.serviceNo = serviceNo;
      }
      const [res] = await orderApi.afterV2Detail(params);
      this.afterInfo = res;
      this.serviceNo = res.serviceNo;
      this.statusNote = res?.statusNote || res.expressInfo || null;
      this.buttonInfo = res?.buttonInfo || {};
      this.type = res?.type;
    },
    refundNum() {
      this.$router.push({
        name: 'logisticsNum',
        query: {
          serviceNo: this.afterInfo.serviceNo,
          vccToken: localStorage.get('vccToken'),
          orderSkuId: this.$route.query.orderSkuId
        }
      });
    },
    copyOrderNo(info) {
      this.setClipboardData({
        data: info,
        success: () => {
          this.$toast.success('已复制');
        }
      });
    },
    refundBe() {
      this.$dialog({
        message: `请拨打售后电话：${this.afterInfo.statusInfo.phoneNo} 进行申诉！`,
        confirmButtonText: '拨打电话',
        onConfirm: function() {
          const callEle = document.createElement('a');
          callEle.setAttribute('href', `tel:${this.afterInfo.statusInfo.phoneNo}`);
          callEle.click();
        }
      });
    },
    // cancel() {
    //   const that = this;
    //   this.$dialog({
    //     title: '您将撤销本次售后申请，请问确认取消售后申请么？',
    //     onConfirm: function() {
    //       that.applyCancel();
    //     }
    //   });
    // },
    async applyCancel() {
      await orderApi.applyCancel({
        serviceNo: this.afterInfo.serviceNo
      });
      this.$toast.success('取消成功');
      this.afterDetail();
    },
    handleToIm() {
      const serviceUrl = this.afterInfo.serviceUrl;
      window.location.href = serviceUrl;
    }
  }
};
</script>
<style lang="less" scoped>
.reset-after-button {
  .cr-button--default {
    color: @black;
  }
}
.refundDetail {
  .reset-after-button();
  // .refundDetail_process {
  //   background: @white;
  //   border-radius: 0 0 @border-radius-md @border-radius-md;
  //   padding: 0 12px 19px;
  // }
  &_top {
    // padding: @padding-lg @padding-xs+2;
    // padding: @padding-lg 0;
    padding-top: 6px;
    background: @white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: @border-radius-md @border-radius-md 0 0;
    &_left {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      div {
        display: flex;
        align-items: center;
        img {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          margin-right: 8px;
        }
        span {
          display: block;
          position: relative;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
      &_time {
        .text-size(12);
        margin-top: 6px;
        color: #969799;
        .cr-count-down {
          font-style: normal;
          color: #ec1500;
          display: inline-block;
        }
      }
    }
    button {
      font-size: 14px;
      text-align: center;
      width: 86px;
      height: 30px;
      border-radius: 20px;
      background: #fff;
    }
    &_right {
      border: 0.5px solid @border-red;
      color: @red;
      white-space: nowrap;
    }

    &_rightBe {
      border: 0.5px solid @gray-4;
      color: @gray-4;
    }
    &_rightIsBe {
      border: 0.5px solid @gray-2;
      color: @gray-2;
    }
  }
  &_item {
    .text-size(12);
    margin-top: @padding-sm;
    background: @white;
    border-radius: @border-radius-md @border-radius-md 0 0;
    .thali {
      font-size: 12px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      margin-top: 8px;
    }
  }
  &_info {
    .text-size(13);
    .refundDetail_item_btn {
      margin-top: 12px;
      text-align: right;
      button {
        margin-left: 8px;
      }
    }
    &_top {
      padding: @padding-lg @padding-xs+2;
      background: @white;
      border-radius: 0 0 @border-radius-md @border-radius-md;
    }
    &_bottom {
      padding: @padding-lg @padding-xs+2;
      background: @white;
      border-radius: @border-radius-md;
      margin-top: @padding-sm;
    }
    &_content {
      display: flex;
      justify-content: space-between;
      span:first-child {
        color: @gray-4;
      }
      span:last-child {
        color: @gray-5;
        width: 216px;
      }
      &_left {
        display: flex;
      }
      &_right {
        .text-size(12);
        width: 44px;
        height: 16px;
        line-height: 16px;
        // border: 2px solid @gray-4;
        border-radius: 16px;
        text-align: center;
        color: #ec1500 !important;
      }
    }
    .padding_top {
      padding-top: @padding-md + 2;
    }
  }
  &_bottom {
    margin-top: @padding-x*10;
    text-align: center;
    button {
      width: 335px;
      height: 40px;
      border-radius: 20px;
      .text-size(14);
    }
    &_apply {
      background: @gradient-red;
      color: @white;
    }
    &_service {
      background: inherit;
      border: 0.5px solid #999999;
      margin: @padding-lg+4 auto;
    }
  }
}
.Ol {
  &__body {
    &-item {
      padding: @padding-sm - 2 @padding-xs;
      display: flex;
      border-bottom: 1px solid @grey-border;
      &:last-child {
        border-bottom: 0;
      }
    }
    &-img {
      width: 85px;
      height: 85px;
    }
    &-content {
      margin-left: @padding-sm - 2;
      flex: 1;
    }
    &-row {
      display: flex;
      justify-content: space-between;
    }
    &-title {
      .text-size(13);
      color: @text-color;
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &-salePrice {
      .text-size(13);
      color: @text-color;
      width: 78px;
      text-align: right;
      .Ol__body-skus {
        display: block;
      }
    }
    &-count {
      .text-size(12);
      display: block;
      margin-left: auto;
      color: @text-grey;
    }
  }
}
.only {
  color: @black;
  width: 100%;
  height: 100%;
  padding: 12px 12px 0 12px;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    // height: 175px;
    height: 157px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    z-index: -1;
  }
  &-button {
    position: absolute;
    right: 12px;
    top: 19px;
    height: 30px;
    // width: 86px;
    display: flex;
    align-items: center;
  }
  &.bgLanger {
    &::before {
      height: 198px;
    }
  }
  &-card {
    background: @white;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    margin-top: 12px;
    &-time {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      display: flex;
      align-items: center;
      // margin-top: 8px;
      .cr-count-down {
        font-size: 12px;
        // font-style: normal;
        color: #ec1500;
        display: inline-block;
      }
    }
  }

  &-process {
    height: 133px;
    margin-top: 0;
    position: relative;
    &-title {
      .text-size(18);
      font-weight: bold;
      padding-top: 6px;
    }
    &-message {
      .text-size(12);
      color: @gray-4;
      height: 18px;
      line-height: 18px;
      padding-top: 6px;
      margin-bottom: 16px;
    }
  }

  &-tip {
    &-title {
      .text-size(14);
      font-weight: bold;
    }
    .copy {
      .text-size(12);
      width: 44px;
      height: 16px;
      line-height: 16px;
      // border: 2px solid @gray-4;
      border-radius: 16px;
      text-align: center;
      color: #ec1500 !important;
      display: inline-block;
      float: right;
    }
    &-message {
      .text-size(11);
      color: @gray-4;
      line-height: 16px;
      padding-top: 8px;
      white-space: pre-line;
    }
    .marginTop {
      margin-top: 13px;
      margin-bottom: 8px;
    }
    &-color {
      .text-size(13);
      color: @black;
    }
  }
  &-history {
    .text-size(14);
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.mtop {
      margin-top: 24px;
    }
  }

  &-customer {
    padding: 8px;
    box-sizing: border-box;
    margin-top: 42px;
    @{deep} .cr-button {
      height: 40px;
      line-height: 40px;
      margin-bottom: @padding-lg+4;
      &.cr-button--default {
        background: transparent;
      }
    }
  }
}
</style>
