<template>
  <div class="numberPopup h100">
      <p class="popTitle bg-white">批号信息</p>
        <!-- <div class="padding-16 bg-white font16 list-title">3741/(11014802)盐酸氯丙嗪注射液/2ml:50mg*10支/上海禾丰制药有限公司</div> -->
        <div class="padding-16 bg-white font16 list-title">{{selectedGoods.title}}</div>
        <div class="list-amount font16">
          共<span class="red-tips">{{numberDatalists.length}}</span>条批号信息
        </div>
     <!-- </div> -->
      <div class="mumberDatalist">
        <van-pull-refresh
          v-model="numberIsRefreshing"
          @refresh="numberOnRefresh">
          <van-list style="min-height: 400px;"
            v-model="numberLoading"
            :finished="numberFinished"
            finished-text="没有更多了"
            @load="numberOnLoad">
              <div class="padding-16 bg-white batch-item" 
              v-for="(numberItem, number) in numberDatalists" :key="number">
                <van-row class="w100 font14" style="margin-bottom: 16px;">
                  <van-col span="8" style="font-weight: bolder;">批号：{{number + 1}}</van-col>
                </van-row>
                <van-row class="w100 font14 margin-t5" style="height: 22px;line-height: 22px">
                  <van-col span="8">商品批号 :</van-col>
                  <van-col span="16">{{numberItem.Batch}}</van-col>
                </van-row>
                <van-row class="w100 font14 margin-t5" style="height: 22px;line-height: 22px">
                  <van-col span="8">生产日期 :</van-col>
                  <van-col span="16">{{numberItem.ManufactureDate}}</van-col>
                </van-row>
                <van-row class="w100 font14 margin-t5" style="height: 22px;line-height: 22px">
                  <van-col span="8">有效日期 :</van-col>
                  <van-col span="16">{{numberItem.ExpiryDate}}</van-col>
                </van-row>
                <van-row class="w100 font14 margin-t5" style="height: 22px;line-height: 22px">
                  <van-col span="8">批号数量 :</van-col>
                  <van-col span="16">{{numberItem.Quantity}} {{numberItem.Unit}}</van-col>
                </van-row>
              </div>
          </van-list>
        </van-pull-refresh>
      </div>
      <p class="totalCount">
        合计 :
        <span class="font-red font-bold">{{selectedGoods.Quantity}} {{selectedGoods.Unit}}</span>
      </p>
  </div>
</template>

<script>
import { getOrderGoodsListHttp, getGoodsBatchnumberListHttp } from '@/api/goods'
export default {
  name: 'NumberPopup',
  data() {
    return {
      numberDatalists: [],
      numberIsRefreshing: false,
      numberLoading: false,
      numberFinished: false,
      title: '',
      numberTotal: ''
    }
  },
  props: {
    itemData: Object,
    show: Boolean,
    selectedGoods:{
      type: Object,
      default: () => {
        return {
          RowID: '',
          SODoc: ''
        }
      }
    }
  },
  watch: {
    'selectedGoods.RowID'(val) {
      console.log(this.selectedGoods)
      this.numberDatalists = []
      this.numberOnRefresh()
    }
  },
  methods: {
    itemClick(item) {
      this.$emit('onitemclick', item)
    },
    numberOnRefresh() {
      // 刷新接口
      // console.log('numberOnRefresh')
      this.numberDatalists = []
      this.numberIsRefreshing = true
      this.getGoodsBatchnumberListHttpAction()
    },
    numberOnLoad() {
      // console.log('numberOnLoad')
      // 加载更多接口L
      this.numberLoading = true
      this.getGoodsBatchnumberListHttpAction()
    },
    // 获取批号信息列表
    getGoodsBatchnumberListHttpAction() {
      let data = {
        param: `sdobParameters(SODoc='${this.selectedGoods.SODoc}',MatID='${this.selectedGoods.Material}')/Results?$format=json`
      }
      getGoodsBatchnumberListHttp(data).then((rt) => {
        console.log(rt)
        if (rt.code === 200) {
          // this.$router.back()
          // this.itemInfo = rt.data
          // this.numberTotal = rt.data.zcount
          for (let i = 0; i < rt.data.results.length; i++) {
            let model = rt.data.results[i]
            this.numberDatalists.push(model);
          }
          this.numberFinished = false;
          this.numberIsRefreshing = false;
          this.currentPage = this.currentPage + this.pageSize
          if (rt.data.results.length < 10) {
            this.numberFinished = true
          }
        } else {
          this.$toast(rt.msg)
          // this.$toast('列表获取失败')
          this.numberIsRefreshing = false
          this.error = true
          this.numberFinished = true
        }
        // 加载状态结束
        this.numberLoading = false;
      }).catch((e) => {
        // this.$toast('获取信息失败！')
        this.$toast('列表获取失败')
        this.numberIsRefreshing = false
        this.numberLoading = false
        this.error = true
        this.numberFinished = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.numberPopup{
  .datalist{
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .mumberDatalist{
    height: calc(100% - 210PX);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list-title{
    font-weight: bolder;
    text-align: center;
    margin-bottom: 2px;
    // border-bottom: 2px solid #f7f8fa;
  }
  .list-amount {
    padding: 10px;
    height: 20px;
    line-height: 20px;
  }
  .red-tips {
    color: #fb1c1c;
    font-weight: bold;
    margin: 0 8px;
  }
  .bg-gray {
    background-color: #f3f4f6;
  }
  .batch-item{
    margin-bottom: 2px;
  }
  .bg-white{
    background-color: #fff;
  }
  .popTitle{
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-weight: bold;
    margin: 0;
    color:#1989fa;
    border-bottom: 1px solid #f7f8fa;
  }
  .border-bottom15 {
    border-bottom: 15px solid #eee;
  }
  .commonTotal{
    // height: 50px;
    // line-height: 50px;
    word-break:hyphenate;
    margin: 0;
    background-color: #fff;
    padding-top: 5px;
    // border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    padding-bottom: 5px;
    font-size: 16px;
  }
  .commonTotal2{
    // height: 50px;
    // line-height: 50px;
    padding-bottom: 5px;
    word-break:hyphenate;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
    // border-top: 1px solid #eeeeee;
  }
  .content {
    background: #FFFFFF;
    padding: 16px;
    border-bottom: #dedede 1px solid;
  }
  .flowInfo {
    font-size: 16px;
    height: auto;
    line-height: 30px;
    position: absolute;
    border-radius: 15px;
    right: 10px;
    bottom: 15px;
    padding: 0px 16px 0px;
    z-index: 999;
  }
  .totalCount {
    font-size: 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.22667rem;
    margin: 0;
    line-height: 1.22667rem;
    text-align: center;
    background-color: #fff;
    border-top: 0.02667rem solid #ddd;
  }
}
</style>
