<template>
  <div class="order-detail">
    <!--  订单状态 正常 -->
    <order-state
      class="order-state"
      :active="orderStateActive"
      v-if="
        detailData.orderType === 'SALE' &&
          trackData.currentOrderStatusCode !== '110'
      "
    >
      <order-state-item text="已开单" :item-num="1" />
      <order-state-item text="已发货" :item-num="2" />
      <order-state-item text="运输中" :item-num="3" />
      <order-state-item text="已签收" :item-num="4" :hasNext="false" />
    </order-state>
    <!--  订单状态 退货 -->
    <order-state
      class="order-state"
      :active="orderStateActive"
      v-if="
        detailData.orderType === 'SALE_RTN' &&
          trackData.currentOrderStatusCode !== '110'
      "
    >
      <order-state-item text="已开单" :item-num="1" />
      <order-state-item text="退货中" :item-num="2" />
      <order-state-item text="已完成" :item-num="3" :hasNext="false" />
    </order-state>
    <!--  订单状态 取消 -->
    <order-state
      class="order-state"
      :active="2"
      v-if="trackData.currentOrderStatusCode === '110'"
    >
      <order-state-item text="已开单" :item-num="1" />
      <order-state-item text="已取消" :item-num="2" :hasNext="false" />
    </order-state>

    <!-- 订单状态：
    100 待处理
    110 已开单
    120 已取消
    130 退货中
    180 已完成
    200 待出库
    210 拣配中
    220 已出库
    230 调度中
    240 运输变更
    300 运输中
    400 已签收
    410 签收回执
       -->

    <!--  订单基本信息  -->
    <div class="order-common order-info">
      <div class="info-content">
        <van-icon :name="icons.order" class="order-icon info-icon" />
        <div class="info-text">
          <div style="display: flex">
            <span class="order-code">{{ detailData.orderNo }}</span>
            <div class="order-copy" @click="onCopyOrderNo()">
              <span class="order-copy-text">复制</span>
            </div>
          </div>
          下单时间: {{ detailData.orderDate }}
        </div>
      </div>
      <div class="info-state">
        <span
          v-if="this.storageModel.rtn"
          class="state-type order-type-tip-return"
          >退</span
        >
        <span
          v-if="this.storageModel.cold"
          class="state-type order-type-tip-cold"
          >冷</span
        >
        <span v-if="this.storageModel.jm" class="state-type order-type-tip-jm"
          >精麻</span
        >
      </div>
      <!--      <div class="info-arrival">-->
      <!--        <div class="arrival-time">-->
      <!--          <van-icon name="clock-o"/>-->
      <!--          预计到达时间: 2020-11-13-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <!--  订单物流信息  -->
    <div class="order-common order-logistics">
      <div class="logistics-content" @click="openLogistics()">
        <!--        <van-icon :name="icons.inDelivery" class="order-icon logistics-icon"/>-->
        <img :src="icons.inDelivery" class="order-icon logistics-icon" />
        <div class="logistics-text">
          <div style="display:flex">
            <span class="logistics-speak">{{
              !trackData.orderStatusInfoVoList[0].statusMsg
                ? '暂无数据'
                : trackData.orderStatusInfoVoList[0].statusMsg
            }}</span>
            <van-icon class="logistics-arrow" name="arrow" />
          </div>
          <div class="logistics-time">
            {{ trackData.orderStatusInfoVoList[0].opDate }}
          </div>
        </div>
      </div>
      <div class="location-content">
        <!--        <van-icon :name="icons.location" class="order-icon location-icon"/>-->
        <img :src="icons.location" class="order-icon location-icon" />
        <div class="location-text">
          <div class="location-client">{{ detailData.clientName }}</div>
          <div class="location-receive">{{ detailData.shippingAdress }}</div>
        </div>
      </div>
    </div>
    <!--  订单商品  -->
    <div class="goods-all" @click="openGoodsList()">
      <span class="all-title">商品明细</span>
      <span class="title-more">更多</span>
      <!--      <van-icon class="title-arrow" :name="icons.nextArrow" size="15"/>-->
      <img class="title-arrow" :src="icons.nextArrow" style="width:15px" />
    </div>
    <div class="order-common " style="padding-top: 0">
      <goods-simple-item
        v-for="(item, index) in detailData.goodsInfos"
        :key="item.goodsId"
        :item="item"
        :is-last="index === detailData.goodsInfos.length - 1"
      />
    </div>
    <!-- 订单发票信息 -->
    <div>
      <div class="goods-all" @click="openOrderInvoice()">
        <span class="all-title"
          >发票信息 ({{ invoiceData.total ? invoiceData.total : 0 }})</span
        >
        <span class="title-more">更多</span>
        <van-icon class="title-arrow" name="arrow" />
      </div>
      <div class="order-common" style="margin-bottom: 10px">
        <invoice-simple-item
          v-for="(item, index) in invoiceData.invoiceList"
          :item="item"
          :key="item.invoiceNo"
          :is-last="index === invoiceData.invoiceList.length - 1"
          @itemClick="openInvoice(item)"
        />
        <div
          class="empty-tips"
          v-if="
            !invoiceData ||
              !invoiceData.invoiceList ||
              invoiceData.invoiceList.length <= 0
          "
        >
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderStateItem from '../components/orderStateItem'
import OrderState from '../components/orderState'
import GoodsSimpleItem from '../components/goodsSimpleItem'
import InvoiceSimpleItem from '../components/invoiceSimpleItem'
import {
  getMyOrderList,
  getTrackInfo,
  getOrderInvoiceList
} from '@/api/myOrder'
import { bridge } from '@/utils'

export default {
  name: 'orderDetail',
  components: {
    InvoiceSimpleItem,
    GoodsSimpleItem,
    OrderState,
    OrderStateItem
  },
  data() {
    return {
      orderItem: this.$route.query,
      orderStateActive: 1,
      detailData: {},
      storageModel: {
        cold: false,
        rtn: false,
        jm: false
      },
      trackData: {
        orderStatusInfoVoList: [
          {
            statusMsg: '',
            opDate: ''
          }
        ]
      },
      invoiceData: {},
      icons: {
        order: require('@/assets/img/icon_od_xx.png'),
        inDelivery: require('@/assets/img/icon_od_xs.png'),
        location: require('@/assets/img/icon_od_dz.png'),
        nextArrow: require('@/assets/img/icon_od_arrow_right.png'),
        copy: require('@/assets/img/u533.svg')
      }
    }
  },
  // activated() {
  //   this.initPager()
  // },
  // deactivated() {
  //   // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
  //   window.removeEventListener('popstate', this.onBrowserBack, false)
  // },
  mounted() {
    this.initPager()
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  methods: {
    initPager() {
      // 设置标题栏关闭返回按钮
      this.$store.commit('setNavBar', {
        show: true,
        leftArrow: true,
        rightIcon: false,
        title: '订单详情',
        leftText: '',
        leftClick: this.onBrowserBack,
        rightClick: null
      })
      // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
      window.addEventListener('popstate', this.onBrowserBack, false)
      this.orderItem = this.$route.query
      this.getOrderDetail()
      this.getInvoiceDetail()
      this.getTrackInfoDetail()
    },
    onBrowserBack() {
      this.$router.go(-1)
    },
    /* 复制 */
    onCopyOrderNo() {
      bridge.copyContent(this.detailData.orderNo)
    },
    /* 打开物流页面 */
    openLogistics() {
      this.$router.push({
        path: 'logisticsDetail',
        query: this.orderItem
      })
    },
    /* 打开商品列表页面 */
    openGoodsList() {
      this.$router.push({
        path: 'goodsInfo',
        query: this.detailData
      })
    },
    /* 打开发票列表页面 */
    openOrderInvoice() {
      this.$router.push({
        path: 'orderInvoice',
        query: this.detailData
      })
    },
    /* 打开单个发票页面 */
    openInvoice(model) {
      let item = this.detailData
      item.invoiceNo = model.invoiceNo
      this.$router.push({
        path: 'orderInvoiecDetail',
        query: item
      })
      // console.log(item)
    },
    /* 计算订单状态Step */
    calcOrderStep(statusCode) {
      this.orderStateActive = 1
      switch (statusCode) {
        // 已开单
        case '100':
          this.orderStateActive = 1
          break
        // 已取消
        case '110':
          this.orderStateActive = 2
          break
        // 已发货
        case '220':
          this.orderStateActive = 2
          break
        // 运输中
        case '310':
          this.orderStateActive = 3
          break
        // 已签收
        case '400':
        case '420':
          this.orderStateActive = 4
          break
        // 退货中
        case '120':
          this.orderStateActive = 2
          break
        // 已退货
        case '180':
          this.orderStateActive = 3
          break
      }
    },
    /* 获取订单详情 */
    getOrderDetail() {
      let params = {
        businessType: '',
        clientID: [],
        endDate: '',
        goodsCode: '',
        goodsDesc: '',
        goodsId: '',
        goodsName: '',
        goodsSpec: '',
        isDelivered: '',
        isInvoice: '',
        isWeb: '',
        manufacturer: '',
        mdmClientCode: '',
        order: '',
        orderId: this.orderItem.orderId, // 19977352;19965720
        orderNo: '', // 225202103170165
        orderStatusCode: '',
        orderType: this.orderItem.orderType,
        pageNum: 1,
        pageSize: 20,
        shippingAdress: '',
        sort: '',
        sourceDb: this.orderItem.sourceDb,
        sourceOrderNo: '',
        sourceSystem: '',
        startDate: '',
        supplierId: []
      }
      getMyOrderList(params)
        .then(res => {
          if (
            res.code === 200 &&
            res.data &&
            res.data.code === '00000' &&
            res.data.entity &&
            res.data.entity.orderList &&
            res.data.entity.orderList.length > 0
          ) {
            this.detailData = res.data.entity.orderList[0]
            this.detailData.goodsInfos.forEach(item => {
              let mode = item.storageMode
              if (mode.indexOf('冷链') !== -1) {
                // 插入到
                this.storageModel.cold = true
              }
              if (mode.indexOf('非冷链') !== -1) {
                // 插入到
                this.storageModel.cold = false
              }
              if (mode.indexOf('退') !== -1) {
                this.storageModel.rtn = true
              }
              if (mode.indexOf('精') !== -1) {
                this.storageModel.jm = true
              }
            })
            // 最多显示3条数据
            this.detailData.goodsInfos = this.detailData.goodsInfos.slice(0, 3)
            // 刷新传参中的订单状态
            this.orderItem.orderStatusCode = this.detailData.orderStatusCode
            this.orderItem.isCold = this.storageModel.cold
          } else {
            console.log('订单详情', '请求失败')
            if (res.code === 500) {
              this.$toast(res.msg)
            }
          }
        })
        .catch(err => {
          console.log('订单详情', err)
          this.$toast('订单详情获取失败')
        })
    },
    /* 物流追踪 */
    getTrackInfoDetail() {
      let data = {
        sourceDb: this.orderItem.sourceDb,
        supplierId: [this.orderItem.supplierId],
        clientID: [this.orderItem.clientId],
        orderId: '',
        orderNo: this.orderItem.orderNo,
        orderType: this.orderItem.orderType,
        supplierCode: [this.orderItem.supplierCode],
        clientCode: [this.orderItem.clientCode]
      }
      getTrackInfo(data)
        .then(res => {
          if (
            res.code === 200 &&
            res.data &&
            res.data.code === '00000' &&
            res.data.entity &&
            res.data.entity.logisticsTrackingInfoList
          ) {
            this.trackData = res.data.entity.logisticsTrackingInfoList
            this.calcOrderStep(this.trackData.currentOrderStatusCode)
          } else {
            if (res.code === 500) {
              this.$toast(res.msg)
            }
          }
        })
        .catch(err => {
          console.log('物流跟踪', err)
          this.$toast('物流追踪信息获取失败')
        })
    },
    /* 获取发票列表 */
    getInvoiceDetail() {
      let params = {
        clientID: [],
        endDate: '',
        goodsCode: '',
        goodsDesc: '',
        goodsId: '',
        goodsName: '',
        goodsSpec: '',
        invoiceCode: '',
        invoiceDate: '',
        invoiceFullNo: '',
        invoiceNo: '',
        isTwoTicket: '',
        manufacturer: '',
        mdmClientCode: '',
        mdmGoodsCode: '',
        order: '',
        orderId: this.orderItem.orderId,
        orderNo: '', // this.orderItem.orderNo,
        pageNum: 1,
        pageSize: 3,
        sort: '',
        sourceDb: this.$route.query.sourceDb,
        startDate: '',
        supplierId: []
      }
      getOrderInvoiceList(params)
        .then(res => {
          if (
            res.code === 200 &&
            res.data &&
            res.data.code === '00000' &&
            res.data.entity &&
            res.data.entity.invoiceList &&
            res.data.entity.invoiceList.length > 0
          ) {
            this.invoiceData = res.data.entity
          } else {
            console.log('发票明细', '请求失败')
            if (res.code === 500) {
              this.$toast(res.msg)
            }
          }
        })
        .catch(err => {
          console.log('发票明细', err)
          this.$toast('发票明细获取失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  overflow: auto;
  font-size: 12px;
  height: calc(100vh - 46px);

  .order-common {
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    margin: 10px 15px 1px 15px;

    .order-icon {
      width: 40px;
      height: 40px;
      font-size: 38px;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
    }
  }

  .order-state {
    height: 120px;
    padding-top: 20px;
    background-color: #16a7f0;
  }

  /*订单主信息区域*/
  .order-info {
    margin-top: -30px !important;
    /*主信息内容*/
    .info-content {
      display: flex;
      align-items: center;
      /*主信息图标*/
      .info-icon {
        //background-color: #c0e9fc;
        //color: #1296db;
      }

      /*主信息文本*/
      .info-text {
        margin-left: 8px;
        flex: 1;
        font-size: 12px;
        font-weight: 400;
        font-style: normal;
        color: #7f7f7f;
        /*主信息 订单号*/
        .order-code {
          font-size: 14px;
          color: #000;
          word-break: break-all;
          flex: 1;
        }

        /*主信息 复制按钮*/
        .order-copy {
          color: #555555;
          border-radius: 7px;
          border: solid 1px #c0c0c0;
          background-color: #e4eceb;
          width: 30px;
          height: 15px;
          text-align: center;
          line-height: 15px;
          margin-top: -3px;

          .order-copy-text {
            transform: scale(0.85);
            display: inline-block;
            //margin-top:-3px;
          }
        }
      }
    }

    /*订单状态*/
    .info-state {
      margin: 6px 0 0 45px;

      .state-type {
        display: inline-block;
        text-align: center;
        font-size: 12px;
        min-width: 30px;
        margin: 0 4px;
        transform: scale(0.85);
      }
    }

    /*订单到达信息*/
    .info-arrival {
      text-align: center;
      margin: 18px 0 0 0;

      .arrival-time {
        background-color: #fdead0;
        color: #b8741a;
        font-size: 12px;
        padding: 6px 10px;
        text-align: center;
        border-radius: 20px;
        display: inline-block;

        i {
          vertical-align: text-bottom;
          font-size: 18px;
        }
      }
    }
  }

  /*订单物流信息*/
  .order-logistics {
    /*物流信息内容*/
    .logistics-content {
      display: flex;
      border-bottom: 1px solid #eeeeee;
      padding-bottom: 6px;
      /*物流图标*/
      .logistics-icon {
        //background-color: #fbdbb0;
        //color: #ea9518;
      }

      /*物流说明*/
      .logistics-text {
        margin-left: 8px;
        color: #555555;
        flex: 1;
        /*文字*/
        .logistics-speak {
          margin-right: 20px;
          font-weight: bold;
          font-size: 12px;
          flex: 1;
        }

        /*箭头*/
        .logistics-arrow {
          font-size: 15px;
          margin-top: 1px;
        }

        .logistics-time {
          margin-top: 4px;
          font-size: 12px;
          color: #7f7f7f;
        }
      }
    }

    .location-content {
      display: flex;
      margin-top: 10px;
      /*物流图标*/
      .location-icon {
        //background-color: #c0e9fc;
        //color: #1c9bdd;
      }

      /*物流说明*/
      .location-text {
        margin-left: 8px;

        .location-client {
          font-weight: bold;
          font-size: 12px;
        }

        .location-receive {
          margin-top: 4px;
          font-size: 12px;
          //transform: scale(0.9);
          color: #7f7f7f;
        }
      }
    }
  }

  /*订单商品*/
  .goods-all {
    display: flex;
    align-items: center;
    margin: 15px 15px 0 15px;

    .all-title {
      flex: 1;
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }

    .title-more {
      color: $txtGray9;
    }

    .title-arrow {
      color: $txtGray9;
      font-size: 15px;
      //margin-top: 1px;
      margin-left: 6px;
    }
  }

  /*订单发票*/
  .order-invoice {
    margin-bottom: 20px;

    .invoice-all {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .all-title {
        flex: 1;
        font-size: 14px;
        color: #000;
        font-weight: 400;
      }

      .title-arrow {
        font-size: 15px;
        //margin-top: 1px;
        margin-left: 6px;
      }
    }
  }
}
</style>
