<template>
  <div class="order-detail-con">
    <div
      class="header flex-default"
      :style="{ 'background-color': headerBgColor }"
    >
      <m-icon icon="icon-back-light" :size="18" @click="goBack" />
    </div>
    <div class="detail-scroll" scroll-y @scroll="handleScroll">
      <div class="scroll-content">
        <div class="status-con flex-default">
          <div class="status flex-default">
            <m-icon :icon="statusObj.icon || ''" :size="20" className="icon" />
            <div class="text">{{ statusObj.label }}</div>
          </div>
        </div>
        <div class="express common flex-default" @click="handleExpress">
          <m-icon icon="icon-express" :size="20" className="icon" />
          <span class="info">{{ expressLabel }}</span>
          <m-icon icon="icon-more" :size="10" />
        </div>
        <div class="addr common flex-default">
          <m-icon icon="icon-addr" :size="20" />
          <div class="info">
            <div class="name-and-phone">
              {{ data.uname }}&nbsp;&nbsp;&nbsp;{{ data.phone }}
            </div>
            <div class="detail">地址：{{ data.address }}</div>
          </div>
        </div>
        <goods-list :data="data" isDelivery />
        <order-info :data="data" isDelivery />
        <div class="empty" />
      </div>
    </div>
    <div class="bottom flex-default">
      <van-button
        v-for="(item, index) of btnList"
        :key="`button-item-${index}`"
        class="bottom-btn"
        :type="btnMap[item].type"
        size="small"
        :plain="btnMap[item].plain"
        @click="btnMap[item].click"
        round
      >
        {{ btnMap[item].label }}
      </van-button>
    </div>
  </div>
</template>

<script>
import GoodsList from "./goods-list.vue";
import OrderInfo from "./order-info.vue";
import {
  DeliveryStatus,
  DeliveryStatusObj,
  OrderType,
  OrderTypeObj,
} from "@/enums";
import { DeliveryMixin } from "@/mixins";
export default {
  mixins: [DeliveryMixin],
  components: { GoodsList, OrderInfo },
  computed: {
    headerBgColor() {
      let o = this.scrollTop > 60 ? 1 : this.scrollTop / 60;
      return `rgba(221, 46, 65, ${o})`;
    },
    statusObj() {
      let state = this.data.deliveryState;
      let val = DeliveryStatusObj[state];

      return val || {};
    },
    expressLabel() {
      if (this.data && this.data.expressDetail) {
        let { ret_code, data } = JSON.parse(this.data.expressDetail);
        if (ret_code == 0) {
          return data[0].context;
        }
      }
      return "暂无物流信息";
    },
  },
  data() {
    return {
      DeliveryStatus,
      DeliveryStatusObj,
      deliveryId: "",
      type: OrderType.DELIVERY,

      scrollTop: 0,
      data: {},
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
    handleExpress() {
      let query = {oid: this.deliveryId, status: this.data.deliveryState}
      this.$router.push({name: "delivery-express-detail", query})
    },

    requestData() {
      let apiName = OrderTypeObj[this.type].detailApi;

      this.$showLoading();
      this.$api({
        apiName,
        postData: this.deliveryId,
        success: (res) => {
          this.$hideLoading();
          this.data = res;
        },
      });
    },
  },
  mounted() {
    this.deliveryId = this.$route.params.deliveryId;
    this.requestData();
  },
};
</script>

<style lang="less">
@import "../components/detail.less";
</style>

