<template>
  <div class="orderItem h100">
    <div class="list-amount">
        共<span class="red-tips">{{datalists.length}}</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: 600" class="text-center font14 commonTotal">
                SAP订单编号：102201912020056
                药厂订单编号: 7738723483718234
          </p> -->
          <p style="font-weight: 600" class="commonTotal text-center">
                SAP订单编号: 102201912020056
          </p>
          <p style="font-weight: 600" class="commonTotal2 text-center">
                药厂订单编号: 7738723483718234
          </p>
          <div v-for="(item, index) in datalists" :key="index">
            <div class="content pos-relative">
              <van-row class="w100 font14" style="margin-bottom: 16px;">
                <van-col span="8" style="font-weight: 600;">序号：{{index+1}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">商品信息 :</van-col>
                <van-col span="16">
                  3741/(11014802)盐酸氯丙嗪注射液/2ml:50mg*10支/上海禾丰制药有限公司
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">商品数量:</van-col>
                <van-col span="16">
                  740 盒
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">含税金额:</van-col>
                <van-col span="16">
                  390.00 元
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">无税金额:</van-col>
                <van-col span="16">
                340.51 元
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">税额:</van-col>
                <van-col span="16">
                49.49 元
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">商品温度条件:</van-col>
                <van-col span="16">1～25 ℃</van-col>
              </van-row>
              <van-button plain type="info" class="flowInfo" @click.stop="show = true">
                批号信息
              </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 bg-gray"
      :style="{ height: '100%' }">
      <p class="popTitle bg-white">批号信息</p>
<!--      <van-row class="padding-16 bg-white font14 list-title">-->
<!--        <van-col span="24">-->
<!--          -->
<!--        </van-col>-->
<!--      </van-row>-->
<!--      <div  style="position: fixed;margin-top: 46px;">-->
        <div class="padding-16 bg-white font16 list-title">3741/(11014802)盐酸氯丙嗪注射液/2ml:50mg*10支/上海禾丰制药有限公司</div>
        <div class="list-amount font16">
          共<span class="red-tips">4</span>条批号信息
        </div>
<!--      </div>-->
      <div class="flex1 overflowAuto">
        <van-pull-refresh
          v-model="isRefreshing"
          @refresh="onRefresh"
          style="min-height: 500px;">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <div class="padding-16 bg-white batch-item">
              <van-row class="w100 font14" style="margin-bottom: 16px;">
                <van-col span="8" style="font-weight: 600;">序号：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">
                  37180301
                </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">
                  2018-01-22
                </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">
                  2021-01-21
                </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">
                  140 盒
                </van-col>
              </van-row>
            </div>
            <div class="padding-16 bg-white batch-item">
              <van-row class="w100 font14" style="margin-bottom: 16px;">
                <van-col span="8" style="font-weight: 600;">序号：2</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">
                  37180302
                </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">
                  2018-02-22
                </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">
                  2021-02-21
                </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">
                  100 盒
                </van-col>
              </van-row>
            </div>
            <div class="padding-16 bg-white batch-item">
              <van-row class="w100 font14" style="margin-bottom: 16px;">
                <van-col span="8" style="font-weight: 600;">序号：3</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">
                  37180303
                </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">
                  2018-03-22
                </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">
                  2021-03-21
                </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">
                  200 盒
                </van-col>
              </van-row>
            </div>
            <div class="padding-16 bg-white batch-item">
              <van-row class="w100 font14" style="margin-bottom: 16px;">
                <van-col span="8" style="font-weight: 600;">序号：4</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">
                  37180304
                </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">
                  2018-04-22
                </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">
                  2021-04-21
                </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">
                  300 盒
                </van-col>
              </van-row>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
      <p class="totalCount">
        合计 :
        <span class="font-red font-bold">740</span> 盒
      </p>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'GoodsItem',
  data() {
    return {
      datalists: [1,2,3,4,5],
      isRefreshing: false,
      loading: false,
      finished: false,
      tabslists: [
        {index: 0, name: '运单1'},
        {index: 1, name: '运单2'}
      ],
      show: false,
      title: '',
      info: {
        user: '',
        time: '',
        type: ''
      },
      itemInfo: {
        processChName: '',
        processInstName: '',
        currentState: '',
        startTime: '',
        creatorName: ''
      }
    }
  },
  props: {
    itemData: Object
  },
  methods: {
    itemClick(item) {
      this.$emit('onitemclick', item)
    },
    onRefresh() {
      // 刷新接口
      this.todoList = []
      this.currentPage = 1
      this.isRefreshing = true
      setTimeout(() => {
        this.isRefreshing = false;
        this.datalists = [1,2,3,4,5]
        this.finished = false;
      }, 500)
      // this.getTodoList()
    },
    onLoad() {
      // 加载更多接口
      this.loading = true
      // this.getTodoList()
      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)
    }
  }
}
</script>

<style lang="scss" scoped>
  .overflowAuto{
    overflow: auto;
  }
.orderItem{
  .datalist{
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list-title{
    font-weight: 600;
    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;
    width: 100%;
    height: 1.22667rem;
    margin: 0;
    line-height: 1.22667rem;
    text-align: center;
    background-color: #fff;
    border-top: 0.02667rem solid #ddd;
  }
}
</style>
