<!--
  @description: 订单信息
  @Modifier：杨胜国
  @routerPath:/personalCenter/orderShopDetail
  @date：  2021/05/31-14:00
-->
<template>
  <div class="shop_order">
    <div class="nav">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />当前位置：
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="toBack()">
            {{ breadcrumbTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>订单详情</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <i class="el-icon-close pointer" title="关闭详情" style="font-size:20px;" @click="closePage" />
    </div>
    <!-- 订单详情流程 -->
    <stateRcolDetail :order-detail-obj="orderDetailObj" />
    <!-- 订单状态 -->
    <orderInfoDetail :order-detail-obj="orderDetailObj" />
    <!-- 发货信息 -->
    <trackDetail :order-detail-obj="orderDetailObj" :order-wl-obj="orderWlObj" />
    <!-- 收货信息 -->
    <receivDetail :order-detail-obj="orderDetailObj" />
    <!-- 商品信息 -->
    <goodsDetail :order-detail-obj="orderDetailObj" />
  </div>
</template>

<script>
// 组件
import orderInfoDetail from './orderDetail/orderInfo-detail' // 订单状态
import stateRcolDetail from './orderDetail/stateRcol-detail' // 订单详情流程
import trackDetail from './orderDetail/track-detail'// 发货信息
import receivDetail from './orderDetail/receiv-detail'// 收货信息
import goodsDetail from './orderDetail/goods-detail'// 收货信息
// 接口
import {
  getOrderDetatils
  // logistics
} from '@/api/shoppingmall/order'
export default {
  name: 'ShopOrderDetail',
  components: {
    trackDetail, // 发货信息
    orderInfoDetail, // 订单状态
    stateRcolDetail, // 订单详情流程
    receivDetail, // 收货信息
    goodsDetail // 商品信息
  },
  props: {
  },
  data() {
    return {
      // 订单详情
      orderDetailObj: {},
      // 供应商
      type: '',
      // 物流
      orderWlObj: []
    }
  },
  computed: {
    // 面包屑标题
    breadcrumbTitle() {
      if (this.$route.query.from === '/personalCenter/myorder') {
        return '我的订单'
      } else if (this.$route.query.from === '/personalCenter/myorderDital') {
        return '订单管理'
      } else {
        return '订单列表'
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let status = this.$route.query.status
      const orderId = this.$route.query.orderId
      // const supplierOrderId = this.$route.query.supplierOrderId
      // const supplierOrderId1 = this.$route.query.supplierOrderId1
      // 00:未拆单 11:拆单
      if (status === '00') {
        status = ''
      }
      getOrderDetatils(orderId, status).then(res => {
        this.orderDetailObj = res.data
        this.type = res.data.goodsDepartName
        this.orderWlObj = res.data.logistcsVos || []
        // logistics(supplierOrderId, this.type, supplierOrderId1)
        //   .then(res => {
        //     if (res.header.ret === '0') {
        //       this.orderWlObj = res.data || []
        //     }
        //   })
        //   .catch(err => {
        //     throw new Error('查看物流信息失败' + err)
        //   })
      }).catch(() => {
      })
    },
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 点右上角关闭时跳转
    closePage() {
      this.$router.push(this.toBack())
    }
  }
}
</script>

<style scoped lang="less">
.shop_order{
  margin: 0 26px;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .crumbs_nav_main {
    padding: 10px 0;
    font-size: 14px;
  }

  .crumbs_nav_main .pos_title {
      display: inline-block;
      vertical-align: middle;
      color: #666;
  }

  .crumbs_nav_main .pos_title .iconfont {
      margin-right: 8px;
      color: #00AACA;
  }

  .crumbs_nav_main .el-breadcrumb {
      vertical-align: middle;
      display: inline-block;
  }
  .m{
    margin-bottom: 20px;
  }
  .order_title{
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
  }
}
</style>
