<template>
  <div class="orderItem h100">
    <div class="list-amount">
          共<span class="red-tips">{{clientmodel.SONum}}</span>条订单信息
      </div>
    <div class="datalist">
      <van-pull-refresh
      v-model="isRefreshing"
      @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
          <p style="font-weight: bolder" class="text-center font14 commonTotal">
               <!-- <span style="display: flex;height: 1.33333rem;align-items: center;justify-content: center;">
                  {{clientmodel.PRNCustID}}/({{Customer}}){{clientmodel.CustomerName}}
               </span> -->
               <span style="display: flex;height: 1.33333rem;align-items: center;justify-content: center;">
                  {{titleInitial(clientmodel)}}
               </span>
          </p>
          <div v-for="(item, index) in datalists" :key="index" @click="itemClick(index)">
            <div class="content pos-relative" :class="{'active': chooseIndex === index}">

              <div class="w100 font16 " style="margin-bottom: 16px;display: flex;align-items: center;height: 22px">
                <div span="15" style="font-weight: bolder;flex: 1">订单：{{index+1}}</div>
                <span style="text-align: right;color:#1989fa;">查看商品信息</span>
                <van-icon size="20px" style="line-height: 22px;" color="#1989fa" name="arrow" />
              </div>
              <van-row class="w100 font14" style="height: 22px;line-height: 22px">
                <van-col span="8">SAP编号:</van-col>
                <van-col span="16">{{item.SalesDoc}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
                <van-col span="8">药厂编号:</van-col>
                <van-col span="16">{{item.PrinicipalSO}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
                <van-col span="8">生成日期:</van-col>
                <van-col span="16">{{item.buildDate}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">订单类型:</van-col>
                <van-col span="16">{{item.SOType}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8" style="height: 30px;line-height: 30px">
                <van-col span="8">订单来源:</van-col>
                <van-col span="16">{{item.SOSource}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">收货地址:</van-col>
                <van-col span="16">{{item.Adress}}</van-col>
              </van-row>
              <!-- <van-row class="w100 font14 margin-t8">
                <van-col span="8">送货优先级:</van-col>
                <van-col span="16">{{item.priority}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">仓库信息:</van-col>
                <van-col span="16">{{item.warehouseMessage}}</van-col>
              </van-row> -->
              <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
                <van-col span="8">行项目数:</van-col>
                <van-col span="16">{{item.ItemNum}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">含税金额:</van-col>
                <van-col span="16">{{item.notTax}} 元</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">无税金额:</van-col>
                <van-col span="16">{{item.yesTax}} 元</van-col>
              </van-row>
              <!-- <van-icon class="rightIcon" name="arrow" /> -->
              <!-- <van-button plain type="info" class="flowInfo" @click.stop="show = true; baseAttr = []; activeNames = []"> -->
              <van-button plain type="info" class="flowInfo" @click.stop="orderSelectedAction(item)">
                物流信息
              </van-button>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      class="flex flex-column"
      :style="{ height: '100%' }">
      <logistics-Popup :showpopup="show" :selectedOrder="selectedOrder"/>
    </van-popup>
  </div>
</template>

<script>
import {ImagePreview} from 'vant'
import { getOrderListHttp, getLogisticsListHttp } from '@/api/order'
import { AmountNumFormat } from '@/utils/common'
import LogisticsPopup from '@/views/todo/Order/LogisticsPopup.vue'
export default {
  name: 'OrderItem',
  components: {
    LogisticsPopup
  },
  data() {
    return {
      datalists: [],
      isRefreshing: false,
      loading: false,
      finished: false,
      activeNames: [],
      baseAttr: [],
      chooseIndex: '',
      tabslists: [],
      show: false,
      title: '',
      info: {
        user: '',
        time: '',
        type: ''
      },
      itemInfo: {
        processChName: '',
        processInstName: '',
        currentState: '',
        startTime: '',
        creatorName: ''
      },
      logisticsList: [],
      selectedOrder: {},
      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'
      ],
      currentPage: 0,
      pageSize: 10,
      Customer: '' // 客户id
    }
  },
  props: {
    clientmodel: {
      type: Object,
      default: () => {
        return {
          RowID: ''
        }
      }
    },
    clientInfo: {
      type: Object,
      default: () => {
        return {
          EDate: '',
          SDate: '',
          CustID: '',
          SODoc: '',
          PrnSo: ''
        }
      }
    }
  },
  watch: {
    'clientInfo.CustID' (val) {
      console.log(this.clientInfo)
    },
    'clientmodel.RowID' (val) {
      // console.log(this.clientmodel)
      // console.log('0000000')
      this.chooseIndex = ''
      this.onRefresh()
    },
    show (val) {
      this.$emit('orderSwipeableAction', val)
      if (val) {
      }
    }
  },
  methods: {
    /// 高级搜索 调用接口
    orderItemSearchAction(clientData) {
      this.clientInfo = clientData
      // console.log(this.clientInfo)
      // console.log('orderItemSearchAction')
    },
    showImgPreview(position) {
      // this.imageShow = true
      ImagePreview({
        images: this.demoImg,
        startPosition: position,
        onClose() {
          // do something
        }
      })
    },
    orderSelectedAction(model){
      this.baseAttr = []
      this.activeNames = []
      this.show = true
      this.selectedOrder = model
    },
    itemClick(index) {
      this.chooseIndex = index
      this.$emit('itemClickOrder', this.datalists[index])
    },
    onRefresh() {
      // 刷新接口
      this.datalists = []
      this.currentPage = 0
      this.isRefreshing = true
      // setTimeout(() => {
      //   this.isRefreshing = false;
      //   this.datalists = [1,2,3,4,5]
      //   this.finished = false;
      // }, 500)
      this.getOrderListHttpAction()
    },
    onLoad() {
      // 加载更多接口
      this.loading = true
      this.getOrderListHttpAction()
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.datalists.push(this.datalists.length + 1);
      //   }
      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.datalists.length >= 20) {
      //     this.finished = true;
      //   }
      // }, 500)
    },
    // 获取订单信息列表
    getOrderListHttpAction() {
      // console.log(this.clientInfo)
      console.log('-------')
      let data = {
        param: `sdosdParameters(UID='${this.$route.query.sysUserId}',PrnSo='${this.clientInfo.PrnSo}',SODoc='${this.clientInfo.SODoc}',EDate='${this.clientInfo.EDate}',SDate='${this.clientInfo.SDate}',CustID='${this.clientmodel.Customer}')/Results?$format=json&$top=${this.pageSize}&$skip=${this.currentPage}`
      }
      // let data = {
      //   param: `sdosdParameters(UID='${this.$route.query.sysUserId}',PrnSo='${this.clientInfo.PrnSo}',SODoc='',EDate='${this.clientInfo.EDate}',SDate='${this.clientInfo.SDate}',CustID='${this.clientmodel.Customer}')/Results?$format=json&$top=${this.pageSize}&$skip=${this.currentPage}`
      // }
      getOrderListHttp(data).then((rt) => {
        // console.log(rt)
        if (rt.code == 200) {
          // this.$router.back()
          // this.itemInfo = rt.data
          if (this.currentPage == 0) {
            this.datalists = []
          }
          // for (let i = 0; i < rt.data.results.length; i++) {
          rt.data.results.forEach((res)=>{
            // this.Customer = model.Customer
            let model = {
              Customer: this.clientmodel.Customer,
              RowID: res.RowID,
              SalesDoc: res.SalesDoc,
              PrinicipalSO: res.PrinicipalSO,
              SOType: res.SOType,
              SOSource: res.SOSource,
              CustomerName: res.CustomerName,
              Adress: res.Adress,
              ItemNum: res.ItemNum,
              NetValue: res.NetValue,
              NetValueWithoutTax: res.NetValueWithoutTax,
              notTax: AmountNumFormat(res.NetValue),
              yesTax: AmountNumFormat(res.NetValueWithoutTax),
              buildDate: this.timeStitchingAction(res.CreateDate, res.CreateTime),
              title: this.titleInitial(this.clientmodel)
            }
            this.datalists.push(model)
            // model.title = this.clientmodel.Customer+'/('+this.Customer+')'+this.clientmodel.CustomerName
            // mode.title = this.titleInitial(this.clientmodel)
          })
          this.finished = false;
          this.isRefreshing = false;
          if (rt.data.results.length < 10) {
            this.finished = true;
          } else {
            this.currentPage = this.currentPage + this.pageSize
          }
        } else {
          this.$toast(rt.msg)
          this.isRefreshing = false
          this.error = true
          this.finished = true
        }
        // 加载状态结束
        this.loading = false;
      }).catch((e) => {
        // this.$toast('获取信息失败！')
        this.$toast('列表获取失败')
        this.isRefreshing = false
        this.loading = false
        this.error = true
        this.finished = true
      })
    },
    // 时间分割并且拼接
    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
    },
    /// 标题拼接 <!-- 药厂码/（SAP码）名称 -->
    titleInitial(model) {
      let titleStr = ''
      if (this.isJudgeStrNull(model.PRNCustID)) {
        titleStr = model.PRNCustID + '/'
      }
      if (this.isJudgeStrNull(model.Customer)) {
        titleStr = titleStr + '(' + model.Customer.replace(/\b(0+)/gi,"") + ')'
      }
      if (this.isJudgeStrNull(model.CustomerName)) {
        titleStr = titleStr + ' ' + model.CustomerName
      }
      return titleStr
    },
    // 获取订单信息列表
    getLogisticsListHttpAction() {
      getLogisticsListHttp({userid: '159748'}).then((rt) => {
        // console.log(rt)
        if (rt.code === 200) {
          // this.$router.back()
          // this.itemInfo = rt.data
          for (let i = 0; i < rt.data.length; i++) {
            let tabsModel = rt.data[i]
            let model = {
              index: i,
              name: '发货单 ' + (i+1),
              InvoiceNo: tabsModel.InvoiceNo,
              InvoiceState: tabsModel.InvoiceState,
              InvoiceTime: tabsModel.InvoiceTime,
              Invoiceinformation: tabsModel.Invoiceinformation,
              image: tabsModel.image,
              node: tabsModel.node
            }
            this.tabslists.push(model)
          }
          // console.log(this.tabslists)
        } else {
          this.$toast(rt.msg)
        }
      }).catch((e) => {
        // this.$toast('获取信息失败！')
        this.$toast('物流信息获取失败')
      })
    },
    /// 判断数值是否为空
    isJudgeStrNull(val) {
      if (val !== null && val !== undefined && val !== '') {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.orderItem{
  .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: 1px solid #f7f8fa;
  }
  .border{
    width: 100%;
    height: 8px;
    background-color: #eee;
  }
  .border-bottom15 {
    border-bottom: 15px solid #eee;
  }
  .commonTotal{
    height: 50px;
    // min-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: 5px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 8px 2px;
    z-index: 0;
    color: #FFFFFF;
    background: -webkit-linear-gradient(left,#19c2fa,#1989fa,$main1) no-repeat;
  }
  .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>
