<template>
  <div class="only" :class="{ bgLanger: statusNote }">
    <div class="only-process only-card">
      <div class="only-process-title">{{ statusInfo.statusDesc }}</div>
      <div class="only-process-message">
        <template v-if="statusInfo.statusNote">
          {{ statusInfo.statusNote ? statusInfo.statusNote : '' }}
        </template>
        <template v-if="time">
          <span class="only-card-time">
            还剩 <cr-count-down :time="handelTime()" format="{d}天{h}时{m}分{s}秒" />
          </span>
        </template>
      </div>
      <!-- 倒计时 -->
      <!-- <div v-show="time" class="only-card-time">
        还剩 <cr-count-down :time="handelTime()" format="{d}天{h}时{m}分{s}秒" />
      </div> -->
      <div class="only-card-refund">
        <process-refund :node-list="nodeList" />
      </div>
    </div>
    <div v-if="statusNote" class="only-tip only-card">
      <div class="only-tip-title">{{ statusNote.text }}</div>
      <!-- <div class="only-tip-message" v-html="(statusNote.content || '').replace('\n', '<br />')" /> -->
      <div class="only-tip-message">{{ statusNote.content }}</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>
    <!-- <cr-cell class="only-history only-card" is-link title="协商历史" /> -->

    <div class="order only-card">
      <div class="order-shop">
        <div class="order-shop-image">
          <cr-image width="100%" height="100%" :src="skuInfo.imageUrl" />
        </div>
        <div class="order-shop-info">
          <div class="order-shop-info__title">{{ skuInfo.skuName }}</div>
          <div class="order-shop-info__spec">{{ skuInfo.skuAtts }}</div>
        </div>
        <div class="order-shop-price">
          <div class="order-shop-price__text">¥{{ skuInfo.salePrice }}</div>
          <div class="order-shop-price__count">{{ skuInfo.count }}件</div>
        </div>
      </div>
      <ul class="order-list">
        <template v-for="(item, index) in refundConfig">
          <li v-if="refundInfo[index] !== undefined" :key="index" class="order-list-item">
            <span class="order-list-item__label">{{ item }}：</span>
            <span class="order-list-item__value">{{ refundInfo[index] }}</span>
          </li>
        </template>
        <li class="order-list-item">
          <span class="order-list-item__label">退款编号：</span>
          <span class="order-list-item__value">{{ serviceNo }}</span>
          <span class="order-list-item__copy" @click="copyOrderNo(serviceNo)">复制</span>
        </li>
      </ul>

      <div class="order-button">
        <cr-button
          v-if="buttonInfo.showCancelButton"
          size="small"
          plain
          hairline
          shape="circle"
          @click="cancelRefundOnly"
        >
          撤销申请
        </cr-button>
        <cr-button
          v-if="buttonInfo.showUpdateButton"
          type="danger"
          size="small"
          plain
          hairline
          shape="circle"
          @click="updateRefundOnly"
        >
          修改申请
        </cr-button>
      </div>
    </div>

    <div class="only-customer">
      <cr-button type="default" hairline shape="circle" block @click="goToCustomer">
        联系客服
      </cr-button>
    </div>
  </div>
</template>
<script>
import orderApi from '@/api/order.api';
import ProcessRefund from './components/processRefund.vue';
import clipTextMixins from '@/mixins/clipText.mixins';
import localStorage from '@/service/localStorage.service';
export default {
  components: {
    ProcessRefund
  },
  mixins: [clipTextMixins],
  data() {
    return {
      type: '',
      refundConfig: {
        refundReason: '退款原因',
        refundAmount: '退款金额',
        payee: '收款姓名',
        receiptAccount: '收款账户',
        applyCount: '退款份数',
        applyTime: '申请时间'
      },

      statusInfo: {},
      nodeList: [],
      serviceNo: '',
      skuInfo: {},
      refundInfo: {},
      statusNote: null,
      buttonInfo: {},
      serviceUrl: '',
      time: false
    };
  },
  created() {
    this.getAfterV2Detail();
  },
  methods: {
    handelTime() {
      // 倒计时根据 接口返回值
      let nextTime = new Date(this.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;
    },
    async getAfterV2Detail() {
      const { orderSkuId, serviceNo } = this.$route.query;
      const params = { orderSkuId };
      if (serviceNo) {
        params.serviceNo = serviceNo;
      }
      const [res, error] = await orderApi.afterV2Detail(params);
      if (!error) {
        this.statusInfo = res?.statusInfo || {};
        this.nodeList = res?.nodeList || [];
        this.serviceNo = res?.serviceNo || '';
        this.statusNote = res?.statusNote || null;
        this.skuInfo = res?.skuInfo || {};
        this.refundInfo = res?.refundInfo || {};
        this.buttonInfo = res?.buttonInfo || {};
        this.serviceUrl = res?.serviceUrl;
        this.type = res?.type;
        console.log(res);
      }
    },

    copyOrderNo(info) {
      this.setClipboardData({
        data: info,
        success: () => {
          this.$toast.success('已复制');
        }
      });
    },
    cancelRefundOnly() {
      this.$dialog({
        message: '您将撤销本次售后申请，请问确认取消售后申请么？',
        confirmButtonColor: '#EE0A24',
        onConfirm: () => {
          this.applyCancel();
        }
      });
    },
    async applyCancel() {
      await orderApi.applyCancel({ serviceNo: this.serviceNo });
      this.$toast.success('取消成功');
      this.getAfterV2Detail();
    },
    updateRefundOnly() {
      this.$router.push({
        name: 'refund',
        query: {
          type: this.type,
          orderSkuId: this.skuInfo.orderSkuId,
          serviceNo: this.serviceNo,
          vccToken: localStorage.get('vccToken')
        }
      });
    },
    goToCustomer() {
      window.location.href = this.serviceUrl;
    },
    goToChangeHistory() {
      this.$router.push({
        name: 'refundConsultHistory',
        params: {
          serviceNo: this.serviceNo
        },
        query: {
          vccToken: localStorage.get('vccToken')
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.reset-after-button {
  .cr-button--default {
    color: @black;
  }
}
.order {
  padding-bottom: 0 !important;
  &-shop {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    &-image {
      width: 85px;
      height: 85px;
      border-radius: 8px;
      overflow: hidden;
    }
    &-info {
      flex: 1;
      padding-left: 8px;
      padding-right: 10px;
      box-sizing: border-box;
      &__title {
        .text-size(13);
        line-height: 20px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      &__spec {
        .text-size(12);
        color: @gray-4;
        margin-top: 10px;
      }
    }
    &-price {
      .text-size(13);
      text-align: right;
      &__count {
        color: @gray-4;
      }
    }
  }
  &-list {
    .text-size(12);
    &-item {
      height: 36px;
      line-height: 36px;
      position: relative;
      &__label {
        color: @gray-4;
      }
      &__value {
        color: @gray-5;
      }
      &__copy {
        position: absolute;
        right: 0;
        color: #ec1500;
      }
    }
  }
  &-button {
    text-align: right;
    .reset-after-button();
    @{deep} .cr-button {
      margin: 12px 0 12px 8px;
    }
  }
}

.only {
  color: @black;
  width: 100%;
  height: 100%;
  padding: 12px 12px 0 12px;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    height: 157px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    z-index: -1;
  }

  &.bgLanger {
    &::before {
      height: 203px;
    }
  }
  &-card {
    background: @white;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    margin-top: 12px;
    &-refund {
      margin-top: 16px;
    }
    &-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;
    &-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;
    }
    &-message {
      .text-size(11);
      color: @gray-4;
      line-height: 16px;
      padding-top: 8px;
      white-space: pre-line;
    }
  }
  &-history {
    .text-size(14);
    display: flex;
    align-items: center;
    justify-content: space-between;

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

  &-customer {
    padding: 0 8px 20px 8px;
    box-sizing: border-box;
    margin-top: 42px;
    .reset-after-button();
    @{deep} .cr-button {
      height: 40px;
      line-height: 40px;
      background: transparent;
    }
  }
}
</style>
