<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="handleScroll">
      <div class="scroll-content">
        <div class="status-con flex-default">
          <div class="status flex-default">
            <m-icon :icon="detail.statusIcon" :size="20" className="icon" />
            <div class="text">{{ detail.statusLabel }}</div>
          </div>
          <template v-if="data.orderState == OrderStatus.UN_PAY">
            <van-count-down
              class="left-time"
              :time="leftTime"
              format="剩余mm分ss秒"
              @finish="handlerTimeFinsih"
            />
            <van-button class="pay-btn" @click="handlePay" round>
              去支付
            </van-button>
          </template>
        </div>
        <goods-list :data="data" />
        <order-info :data="data" />
        <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 { OrderMixin } from "@/mixins";
import { OrderStatus, OrderStatusObj, OrderType, OrderTypeObj } from "@/enums";
import { formatTime } from "@/utils";
export default {
  mixins: [OrderMixin],
  components: { GoodsList, OrderInfo },
  computed: {
    headerBgColor() {
      let o = this.scrollTop > 60 ? 1 : this.scrollTop / 60;
      return `rgba(44, 102, 245, ${o})`;
    },
    isOrder() {
      return this.type == OrderType.ORDER;
    },
    statusObj() {
      return OrderStatusObj[this.data.orderState] || {};
    },
    detail() {
      let order1st = this.data.orders ? this.data.orders[0] : {};
      return {
        ...this.data,
        order1st,
        statusLabel: this.statusObj.label,
        statusIcon: this.statusObj.icon || "",
      };
    },
  },
  data() {
    return {
      OrderStatus,
      OrderStatusObj,
      oid: "",
      type: OrderType.ORDER,

      scrollTop: 0,
      data: {},
      leftTime: 0,
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },

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

      this.$showLoading();
      this.$api({
        apiName,
        postData: this.oid,
        success: (res) => {
          this.$hideLoading();
          this.data = res;
          let timeOut = res.createTime + 3 * 60 * 1000;
          let timeNow = +new Date();
          this.leftTime = timeOut > timeNow ? timeOut - timeNow : 0;
        },
      });
    },
    handlerTimeFinsih(){
      this.data.orderState = OrderStatus.CLOSE
    }
  },
  mounted() {
    this.oid = this.$route.params.oid;
    this.requestData();
  },
};
</script>

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

