<template>
  <div class="refund-express common uni-flex" v-show="isShow">
    <template v-if="isReviewSuccess">
      <div class="left write-info">
        <div class="title">我已寄出</div>
        <div class="text">点击填写物流单号</div>
      </div>
      <van-button
        size="small"
        round
        type="primary"
        class="right-btn"
        @click="handleExpress"
      >
        填写单号
      </van-button>
    </template>
    <template v-if="isRefundExpress">
      <div class="left express-info" @click="handleDetail">
        <div class="title">退货物流：{{ data.expressName }}</div>
        <div class="text">{{ expressLabel }}</div>
      </div>
      <m-icon icon="icon-more-light" :size="10" />
    </template>
  </div>
</template>

<script>
import { DeliveryRefundStatus } from "@/enums";
export default {
  props: ["oid", "status", "data"],
  data() {
    return {};
  },
  computed: {
    isShow() {
      return this.isReviewSuccess || this.isRefundExpress;
    },
    isReviewSuccess() {
      return this.status == DeliveryRefundStatus.REVIEW_SUCCESS;
    },
    isRefundExpress() {
      return this.status == DeliveryRefundStatus.EXPRESS;
    },
    expressInfo() {
      if (!this.data.express) {
        return {};
      } else {
        return JSON.parse(this.data.express);
      }
    },
    expressLabel() {
      if (this.expressInfo.ret_code != 0) {
        return "暂未查询到物流信息";
      } else {
        return this.expressInfo.data[0].context;
      }
    },
  },
  methods: {
    handleExpress() {
      let { oid } = this;
      this.$router.push({ name: "apply-refund-express", query: { oid } });
    },
    handleDetail() {
      let { oid, status } = this;
      this.$router.push({
        name: "refund-express-detail",
        query: { oid, status },
      });
    },
  },
};
</script>

<style lang="less">
.refund-express {
  justify-content: space-between;
  align-items: center;
  .left {
    flex: 1;
  }
  .right-btn {
    background: linear-gradient(270deg, #f07c5b 0%, #dd2e41 100%);
    height: 28px;
    padding: 0 16px;
  }
  .left .title {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #010101;
  }
  .express-info {
    .title {
      color: #FA9F37;
    }
  }
  .left .text {
    color: #aeaeae;
    line-height: 14px;
    font-size: 12px;
    overflow: hidden;
    width: 300px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .write-info .text {
    width: fit-content;
  }
}
</style>
