<template>
  <div class="afsorder-detail">
    <!-- 售后单信息 -->
    <div class="cell2 wall">
      <div class="wall-title">售后单信息</div>
      <div class="wall-content">
        <div class="left">订单号:</div>
        <div class="right" @click="toOrderDetail">{{order.vendorOrderID}}</div>
      </div>
      <div class="wall-content">
        <div class="left">售后单号:</div>
        <div class="right">{{afsOrder.afsOrderID}}</div>
      </div>
      <div class="wall-content">
        <div class="left">售后状态:</div>
        <div class="right"><b>{{cms.orderStatus[afsOrder.status]}}</b></div>
      </div>
      <div class="wall-content" v-if="afsOrder.refuseReason">
        <div class="left">驳回理由:</div>
        <div class="right"><b>{{afsOrder.refuseReason}}</b></div>
      </div>
      <div class="wall-content">
        <div class="left">申请时间:</div>
        <div class="right">{{$filters.dateToLLLL(afsOrder.createdAt)}}</div>
      </div>
      <div class="wall-content">
        <div class="left">售后描述:</div>
        <div class="right">{{afsOrder.reasonDesc}}</div>
      </div>
      <div class="wall-content">
        <div class="left">退款金额:</div>
        <div class="right">￥{{$filters.toFixed2(afsOrder.skuUserMoney)}}</div>
      </div>
      <!-- 联系商家 -->
      <div class="contact" @click="concatStore">
        <div class="icon-tel"></div>
        <div class="text">联系商家</div>
      </div>
    </div>
    <!-- 售后单信息 -->
    <!-- 商品 -->
    <div class="sku-list">
      <div class="sku-item" v-for="(sku, index) in afsOrderSkus" :key="index">
        <div class="left">
          <img class="imgView" :src="$filters.urlToHttps(sku.image)">
        </div>
        <div class="right">
          <div class="name">{{sku.name}}</div>
          <div class="price">￥{{$filters.toFixed2(sku.userMoney)}}</div>
          <div class="count">x{{sku.count}}</div>
        </div>
      </div>
    </div>
    <zy-loading></zy-loading>
  </div>
</template>

<script>
import {errToast, toast, modal,jumpPage} from '@/utils/uniapi.js'
import {mapGetters} from 'vuex'
import ZyLoading from '@/components/Loading/loading'
import {store} from '@/store'
import orderPage from '@/apis/orderPage'
export default {
  components: {
    ZyLoading
  },
  data () {
    return {
      vendorOrderID: '',
      afsOrderID: '',
      vendorID: null,
      order: {},
      afsOrder: {},
      afsOrderSkus: [],
      storeTel: ''
    }
  },
  computed: {
    ...mapGetters({
      cms: 'login/cms',
      storeMap: "indexPage/storeMap",
      storeID: "indexPage/storeID",
    })
  },
  async onLoad (query) {
    const {vendorOrderID, afsOrderID, vendorID} = query
    this.vendorOrderID = vendorOrderID
    this.afsOrderID = afsOrderID
    this.vendorID = vendorID
    await this.pageInit(vendorOrderID, afsOrderID, vendorID)
  },
  async onPullDownRefresh () {
    const {vendorOrderID, afsOrderID, vendorID} = this
    await this.pageInit(vendorOrderID, afsOrderID, vendorID)
    uni.stopPullDownRefresh()
  },
  methods: {
    async pageInit (vendorOrderID, afsOrderID, vendorID) {
      try {
        this.showLoad()
        const reqArr = [
          orderPage.getMyOrders({vendorOrderID}),
          orderPage.getAfsOrders({afsOrderID}),
          orderPage.getAfsOrderSkuInfo({afsOrderID, vendorID})
        ]
        const [order, afsOrder, afsOrderSkus] = await Promise.all(reqArr)

        // 没有数据返回
        if (!order || !afsOrder) {
          await modal('错误', '页面数据错误', {
            showCancel: false,
            confirText: '返回'
          })
          uni.navigateBack()
        }
        this.order = order.data[0] || {}
        this.afsOrder = afsOrder.data[0]
        this.afsOrderSkus = afsOrderSkus
        await this.getStoreTel(this.order.storeID)
        console.log('order',this.order)
      } catch (e) {
        errToast(e)
      } finally {
        this.hideLoad()
      }
    },
    // 查询门店电话
    async getStoreTel (storeID) {
      try {
        if (this.storeMap && this.storeMap[storeID].mobile) this.storeTel = this.storeMap[storeID].mobile
        else {
          await store.dispatch('indexPage/getStoreInfo', { storeID })
          this.getStoreTel(storeID)
        }
      } catch (e) {
        console.error(e)
        throw e
      }
    },
    // 跳转到订单详情
    toOrderDetail () {
      jumpPage('navigateTo',`/pagesOrders/order-detail/index?vendorOrderID=${this.vendorOrderID}`)
    },
    async concatStore () {
      if (this.storeTel) {
        let confirm = await modal('联系商家', '是否联系商家')
        if (confirm) uni.makePhoneCall({phoneNumber: this.storeTel})
      } else {
        toast('暂无商家联系方式')
      }
    }
  }
}
</script>

<style lang="scss">
@import "./afsorder-detail";
</style>