<template>
  <div class="order-status">
    <div class="zy-step">
      <div class="zy-step-item" v-for="(status, i) in statusList" :key="status.id">
        <div class="zy-step-head">
          <div class="zy-step-line" v-if="i !== statusList.length - 1"></div>
          <div class="zy-step-icon">
            <div :class="{
              'dot': true,
              'first-dot': firstID === status.id
            }"></div>
          </div>
        </div>
        <div class="zy-step-main">
          <div class="zy-step-title">
            <div :class="{
                'left': true,
                'first-left': firstID === status.id
              }">{{status.statusText}}</div>
            <div class="right">{{status.statusTime}}</div>
          </div>
          <div class="zy-step-des">{{status.remark}}</div>
        </div>
      </div>
    </div>
    <!-- loading -->
    <zy-loading></zy-loading>
  </div>
</template>

<script>
import {errToast, alert} from '@/utils/uniapi.js'
import ZyLoading from '@/components/Loading/loading'
import {mapGetters} from 'vuex'

import orderPage from '@/apis/orderPage'

export default {
  components: {
    ZyLoading
  },
  data () {
    return {
      vendorOrderID: '',
      vendorID: null,
      statusList: [],
      firstID: null
    }
  },
  computed: {
    ...mapGetters({
      isMaterial: 'indexPage/isMaterial',
      cms:'login/cms'
    })
  },
  async onLoad (query) {
    // console.log(query)
    const {vendorOrderID, vendorID} = query
    if (!(vendorOrderID && vendorID)) {
      let confirm = await alert('没有有效的订单号')
      uni.navigateBack({delta: 1})
    }
    this.vendorOrderID = vendorOrderID
    this.vendorID = vendorID
    try {
      this.showLoad()
      await this.orderStatus(vendorOrderID, vendorID)
    } catch (e) {
      console.error(e)
      errToast(e)
    } finally {
      this.hideLoad()
    }
  },
  // 下拉刷新
  async onPullDownRefresh () {
    console.log('下拉刷新')
    // uni.stopPullDownRefresh()
    try {
      this.showLoad()
      await this.orderStatus(this.vendorOrderID, this.vendorID)
    } catch (e) {
      console.error(e)
      errToast(e)
    } finally {
      uni.stopPullDownRefresh()
      this.hideLoad()
    }
  },
  methods: {
    // 获取订单序列
    async orderStatus (vendorOrderID, vendorID) {
      console.log(this.isMaterial)
      try {
        if (this.isMaterial) {
          this.statusList = await orderPage.getMatterOrderStatus({vendorOrderID})
        } else {
          this.statusList = await orderPage.getOrderStatus(vendorOrderID, vendorID)
        }
        if (this.statusList[0]) {
          this.firstID = this.statusList[0].id
        } else {
          throw '暂无订单状态'
        }
      } catch (e) {
        throw e
      }
    }
  }
}
</script>

<style lang="scss">
@import "./order-status.scss";
</style>