<template>
  <div class="h100">
    <div class="logisticsPopup h100">
      <p class="popTitle">物流信息</p>
      <van-collapse class="subTitle" v-model="baseAttr">
        <van-collapse-item :title="selectedOrder.title" name="1">
          <!-- <div class=""> -->
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">SAP编号 :</van-col>
              <van-col span="16">{{selectedOrder.SalesDoc}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">药厂编号 :</van-col>
              <van-col span="16">{{selectedOrder.PrinicipalSO}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">生成日期 :</van-col>
              <van-col span="16">{{selectedOrder.buildDate}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">订单类型 :</van-col>
              <van-col span="16">{{selectedOrder.SOType}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">订单来源:</van-col>
              <van-col span="16">{{selectedOrder.SOSource}} </van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">收货地址 :</van-col>
              <van-col span="16">{{selectedOrder.Adress}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">行项目数:</van-col>
              <van-col span="16">{{selectedOrder.ItemNum}}</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">含税金额:</van-col>
              <van-col span="16">{{selectedOrder.notTax}} 元</van-col>
            </van-row>
            <van-row class="w100 font14 margin-t5">
              <van-col span="8">无税金额:</van-col>
              <van-col span="16">{{selectedOrder.yesTax}} 元</van-col>
            </van-row>
          <!-- </div> -->
        </van-collapse-item>
      </van-collapse>
      <div class="list-amount font14 padding-16" style="background-color: #eeeeee;">
          共<span style="color: red;" class="red-tips">{{tabslists.length}}</span>条发货单信息
      </div>
      <p v-show="tabslists.length===0" style="text-align: center;color: #666666;">{{shubTitle}}</p>
      <van-tabs
        :sticky="false"
        :swipeable="true"
        :swipe-threshold="5"
        :line-height="'2px'"
        class="flex1"
        :key="countKey"
        :title-active-color="'#1989fa'">
        <van-tab v-for="(item, index) in tabslists"
          :key="index"
          :title="item.name"
        style="font-size: 14px">
          <div class="tab-list">
            <van-collapse v-model="activeNames">
              <van-collapse-item title="发货单信息" name="1" class="pos-relative">
                <van-row class="logisticsinfo">
                  <img class="img-card" style="left: 0;position: absolute;top: 0;bottom: 0;margin: auto;" src="@/assets/img/car.jpg"/>
                  <van-col span="23" style="margin-left: 21px;">
                    <div>
                      <p>发货单编号：{{item.DeliveryOrder}}</p>
                      <p>发货单状态：{{item.lastType}}</p>
                      <p>发货单时间：{{item.lastTime}}</p>
                      <p>发票信息：{{item.VATNO}} {{item.VATCODE}}</p>
                    </div>
                    <!-- <van-grid clickable :border="false" :column-num="3">
                      <van-grid-item v-for="(item,index) in demoImg" :key="index" @click="showImgPreview(index)">
                        <van-image
                          width="60px"
                          height="60px"
                          :src="item"/>
                        <div style="font-size: 10px">名称{{index}}</div>
                      </van-grid-item>
                    </van-grid> -->
                  </van-col>
                </van-row>
              </van-collapse-item>
            </van-collapse>
            <van-steps class="logistics" direction="vertical" :active="0">
              <van-step v-for="(item, index) in item.node" :key="index" >
                <span>{{item.name}}</span>
                <p>{{item.people}}</p>
                <p>{{item.time}}</p>
              </van-step>
            </van-steps>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {ImagePreview} from 'vant'
import { getOrderListHttp, getLogisticsListHttp } from '@/api/order'
export default {
  name: 'LogisticsPopup',
  components: {
  },
  data() {
    return {
      countKey: 1,
      datalists: [],
      isRefreshing: false,
      loading: false,
      finished: false,
      activeNames: [],
      baseAttr: [],
      chooseIndex: '',
      tabslists: [],
      title: '',
      itemInfo: {
        processChName: '',
        processInstName: '',
        currentState: '',
        startTime: '',
        creatorName: ''
      },
      logisticsList: [],
      demoImg: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
        'https://img.yzcdn.cn/vant/apple-5.jpg'
      ],
      clientInfo: {
        SODoc: '1000232355'
      },
      logisticsList: [
        {count: '7' ,name: '已签收'},
        {count: '6' ,name: '运输中'},
        {count: '5' ,name: '已发货'},
        {count: '4' ,name: '复核完成'},
        {count: '3' ,name: '拣配完成'},
        {count: '2' ,name: '等待配货'},
        {count: '1' ,name: '订单生成'}
      ],
      shubTitle: '加载中...'
    }
  },
  props: {
    itemData: Object,
    selectedOrder: {},
    showpopup: Boolean
  },
  watch: {
    showpopup(val) {
      // console.log('ppppppp')
      // console.log(val)
      if (val===true) {
        this.tabslists = []
        this.shubTitle = '加载中...'
        this.getLogisticsListHttpAction()
      }
    }
  },
  mounted() {
    this.tabslists = []
    this.getLogisticsListHttpAction()
  },
  methods: {
    showImgPreview(position) {
      // this.imageShow = true
      ImagePreview({
        images: this.demoImg,
        startPosition: position,
        onClose() {
          // do something
        }
      })
    },
    itemClick(index) {
      this.chooseIndex = index
      this.$emit('itemClickOrder', '')
    },
    // 获取订单信息列表
    getLogisticsListHttpAction() {
      let data = {
        param: `sddnstParameters(SODoc='${this.selectedOrder.SalesDoc}')/Results?$format=json`
      }
      // let data = {
      //   param: `sddnstParameters(SODoc='')/Results?$format=json`
      // }
      getLogisticsListHttp(data).then(async (rt) => {
        // console.log(rt)
        if (rt.code === 200) {
          // this.$router.back()
          // this.itemInfo = rt.data
          // this.tabslists = []
          let arr = []
          for (let i = 0; i < rt.data.results.length; i++) {
            let tabsModel = rt.data.results[i]
            tabsModel.name = '发货单 ' + (i+1)
            tabsModel.node = []
            await this.timeGroupingAction(tabsModel)
            // console.log(tabsModel.node)
            let lastModel = tabsModel.node[0]
            switch (lastModel.LastStatus) {
              case '1':
                tabsModel.lastType = '订单生成',
                tabsModel.lastTime = lastModel.time
                break
              case '2':
                tabsModel.lastType = '等待配货'
                tabsModel.lastTime = lastModel.time
                break
              case '3':
                tabsModel.lastType = '拣配完成'
                tabsModel.lastTime = lastModel.time
                break
              case '4':
                tabsModel.lastType = '复核完成'
                tabsModel.lastTime = lastModel.time
                break
              case '5':
                tabsModel.lastType = '已发货'
                tabsModel.lastTime = lastModel.time
                break
              case '6':
                tabsModel.lastType = '运输中'
                tabsModel.lastTime = lastModel.time
                break
              case '7':
                tabsModel.lastType = '已签收'
                tabsModel.lastTime = lastModel.time
                break
            }
            // switch (tabsModel.LastStatus) {
            //   case '1':
            //     tabsModel.lastType = '订单生成',
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S1Date, tabsModel.S1Time)
            //     break
            //   case '2':
            //     tabsModel.lastType = '等待配货'
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S2Date, tabsModel.S2Time)
            //     break
            //   case '3':
            //     tabsModel.lastType = '拣配完成'
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S3Date, tabsModel.S3Time)
            //     break
            //   case '4':
            //     tabsModel.lastType = '复核完成'
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S3Date, tabsModel.S3Time)
            //     break
            //   case '5':
            //     tabsModel.lastType = '已发货'
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S5Date, tabsModel.S5Time)
            //     break
            //   case '6':
            //     tabsModel.lastType = '运输中'
            //     /// 运输中的事件 取值 已经发货的时间
            //     // tabsModel.lastTime = this.timeStitchingAction(tabsModel.S6Date, tabsModel.S6Time)
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S5Date, tabsModel.S5Time)
            //     break
            //   case '7':
            //     tabsModel.lastType = '已签收'
            //     tabsModel.lastTime = this.timeStitchingAction(tabsModel.S7Date, tabsModel.S7Time)
            //     break
            // }
            arr.push(tabsModel)
          }
          this.tabslists = arr
          this.countKey ++
        } else {
          this.$toast(rt.msg)
          this.shubTitle = '暂无物流信息'
        }
      }).catch((e) => {
        // this.$toast('获取信息失败！')
        this.$toast('物流信息获取失败')
        this.shubTitle = '暂无物流信息'
      })
    },
    // 判断当前最新的货运状态
    // 时间分组
    timeGroupingAction(tabsModel) {
      if (tabsModel.Status7 === 'C') {
        tabsModel.node.push({
          name: '7.已签收',
          people: tabsModel.S7Name,
          LastStatus: '7',
          time: this.timeStitchingAction(tabsModel.S7Date, tabsModel.S7Time)
        })
      }
      if (tabsModel.Status6 === 'C') {
        tabsModel.node.push({
          name: '6.运输中',
          LastStatus: '6',
          // people: tabsModel.S6SIGNI,
          time: this.timeStitchingAction(tabsModel.S5Date, tabsModel.S5Time) // 状态6的时间 取值状态5的时间
          // time: this.timeStitchingAction(tabsModel.S6Date, tabsModel.S6Time)
        })
      }
      if (tabsModel.Status5 === 'C') {
        tabsModel.node.push({
          name: '5.已发货',
          LastStatus: '5',
          time: this.timeStitchingAction(tabsModel.S5Date, tabsModel.S5Time)
        })
      } else {
        this.typeFiveAction(tabsModel)
        return new Promise((resolve, reject) => {
          resolve()
        })
      }
      if (tabsModel.Status4 === 'C') {
        tabsModel.node.push({
          name: '4.复核完成',
          LastStatus: '4',
          time: this.timeStitchingAction(tabsModel.S3Date, tabsModel.S3Time)
        })
      }
      if (tabsModel.Status3 === 'C') {
        tabsModel.node.push({
          name: '3.拣配完成',
          LastStatus: '3',
          time: this.timeStitchingAction(tabsModel.S3Date, tabsModel.S3Time)
        })
      }
      if (tabsModel.Status2 === 'C') {
        tabsModel.node.push({
          name: '2.等待配货',
          LastStatus: '2',
          time: this.timeStitchingAction(tabsModel.S2Date, tabsModel.S2Time)
        })
      }
      if (tabsModel.Status1 === 'C') {
        tabsModel.node.push({
          name: '1.订单生成',
          LastStatus: '1',
          time: this.timeStitchingAction(tabsModel.S1Date, tabsModel.S1Time)
        })
      }
      return new Promise((resolve, reject) => {
        resolve()
      })
    },
    // 状态5 无数据
    typeFiveAction(tabsModel) {
      if (tabsModel.Status2 === 'C') {
        tabsModel.node.push({
          name: '2.等待配货',
          LastStatus: '2',
          time: this.timeStitchingAction(tabsModel.S2Date, tabsModel.S2Time)
        })
      }
      if (tabsModel.Status1 === 'C') {
        tabsModel.node.push({
          name: '1.订单生成',
          LastStatus: '1',
          time: this.timeStitchingAction(tabsModel.S1Date, tabsModel.S1Time)
        })
      }
    },
    // 时间分割并且拼接
    timeStitchingAction(data, time) {
      if (this.isJudgeNull(data)) {
        return ''
      }
      return data.slice(0,-4)+'-'+data.slice(4,-2)+'-'+data.slice(6)+' '+time.slice(0,-4)+':'+time.slice(2,-2)+':'+time.slice(4)
    },
    /// 判断字符串是否为空
    isJudgeNull(val) {
      if (val !== null && val !== undefined && val !== '') {
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.logisticsPopup{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /deep/ .van-tabs .van-tabs__content{
    overflow-x: hidden;
    overflow-y: auto;
  }
  /deep/ .van-cell__right-icon{
    color: #1989fa;
  }
  .subTitle{
    /deep/ .van-cell__title{
      font-weight: bolder;
      text-align: center;
    }
  }
  .logistics{
    /deep/ .van-cell__title{
      font-weight: bolder;
    }
  }
  .datalist{
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list-amount {
    padding: 10px;
    height: 20px;
    line-height: 20px;
  }
  .red-tips {
    color: #fb1c1c;
    font-weight: bold;
    margin: 0 8px;
  }
  .popTitle{
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #1989fa;
    font-weight: bold;
    margin: 0;
    border-bottom: 8px solid #eee;
  }
  .border-bottom15 {
    border-bottom: 15px solid #eee;
  }
  .commonTotal{
    height: 50px;
    line-height: 50px;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    font-size: 16px;
  }
  .content {
    background: #FFFFFF;
    padding: 16px;
    border-bottom: #dedede 1px solid;
    &.active{
      background-color: #eaeaea;
      border-color: #eaeaea;
    }
    .rightIcon {
      font-size: 16px;
      height: 16px;
      width: 30px;
      text-align: center;
      line-height: 16px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .flowInfo {
    font-size: 16px;
    height: auto;
    line-height: 30px;
    border-radius: 15px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 8px 2px;
    z-index: 0;
  }
  .tab-list{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /deep/ .van-collapse-item__content{
      position: relative;
    }
    .logisticsinfo{
      .img-card{
        width: 20px;
        padding: 10px;
      }
      p{
        margin: 5px;
      }
    }
    .way-card{
      p {
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
  }
  .h100 {
    height: 100%;
  }
}
</style>
