<template>
  <div class="goodsItem h100">
    <div class="list-amount">
        共<span class="red-tips">{{ordermodel.ItemNum}}</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="commonTotal text-center">
                SAP订单编号: 102201912020056
          </p>
          <p style="font-weight: 600" class="commonTotal2 text-center">
                药厂订单编号: 7738723483718234
          </p> -->
          <p style="font-weight: bolder" class="commonTotal text-center">
                SAP订单编号: {{ordermodel.SalesDoc}}
          </p>
          <p style="font-weight: bolder" class="commonTotal2 text-center">
                药厂订单编号: {{ordermodel.PrinicipalSO}}
          </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: bolder;">商品：{{index+1}}</van-col>
              </van-row>
              <!-- 商品ID/（商品编号）名称/规格/厂商 -->
              <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
                <van-col span="8">商品信息 :</van-col>
                <van-col style="word-break: break-all" span="16">{{item.title}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8" style="height: 32px;line-height: 32px">
                <van-col span="8">商品数量:</van-col>
                <van-col span="16">{{item.Quantity}} {{item.Unit}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">送货优先级 :</van-col>
                <van-col span="16">{{item.DeliveryPriority}}</van-col>
              </van-row>
              <!-- 仓库编码 -->
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">仓库信息 :</van-col>
                <van-col span="16">{{warehouseAction(item)}}</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">含税金额:</van-col>
                <van-col span="16">{{numFormat(item.NetValue)}} 元</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">无税金额:</van-col>
                <van-col span="16">{{numFormat(item.NetValueWithoutTax)}} 元</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">税额:</van-col>
                <van-col span="16">{{numFormat(item.TaxAmount)}} 元</van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">储存温度:</van-col>
                <van-col span="16">{{item.Temperature}}</van-col>
              </van-row>
              <van-button plain type="info" class="flowInfo" @click.stop="goodsSelectedAction(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 bg-gray"
      :style="{ height: '100%' }">
      <!-- <p class="popTitle bg-white">批号信息</p>
        <div class="padding-16 bg-white font16 list-title">3741/(11014802)盐酸氯丙嗪注射液/2ml:50mg*10支/上海禾丰制药有限公司</div>
        <div class="list-amount font16">
          共<span class="red-tips">{{numberDatalists.length}}</span>条批号信息
        </div>
      <div class="mumberDatalist">
        <van-pull-refresh
          v-model="numberIsRefreshing"
          @refresh="numberOnRefresh">
          <van-list
            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: 600;">序号：{{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.goodsBatchnumber}}</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.manufacture}}</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.Effective}}</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.count}} </van-col>
                </van-row>
              </div>
          </van-list>
        </van-pull-refresh>
      </div>
      <p class="totalCount">
        合计 :
        <span class="font-red font-bold">{{numberTotal}}</span>
      </p> -->
      <number-popup :show="show" :selectedGoods="selectedGoods" />
    </van-popup>
  </div>
</template>

<script>
import { getOrderGoodsListHttp, getGoodsBatchnumberListHttp } from '@/api/goods'
import NumberPopup from '@/views/todo/Goods/NumberPopup.vue'
import { AmountNumFormat } from '@/utils/common'
export default {
  name: 'GoodsItem',
  components: {
    NumberPopup
  },
  data() {
    return {
      datalists: [],
      isRefreshing: false,
      loading: false,
      finished: false,
      numberDatalists: [],
      numberIsRefreshing: false,
      numberLoading: false,
      numberFinished: false,
      show: false,
      title: '',
      numberTotal: '',
      selectedGoods: {},
      currentPage: 0,
      pageSize: 10
    }
  },
  props: {
    itemData: Object,
    ordermodel: {
      type: Object,
      default: () => {
        return {
          SalesDoc: ''
        }
      }
    },
    clientInfo: {
      type: Object,
      default: () => {
        return {
          EDate: '',
          SDate: '',
          CustID: '',
          SODoc: '',
          PrnSo: ''
        }
      }
    }
  },
  watch: {
    'ordermodel.SalesDoc' (val) {
      this.onRefresh()
    },
    show (val) {
      this.$emit('goodsSwipeableAction', val)
      if (val) {
      }
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    /// warehouse
    warehouseAction(model) {
      // console.log(model)
      let titleStr = ''
      if (this.isJudgeStrNull(model.PlantID)) {
        titleStr = '(' + model.PlantID  + ')'
      }
      if (this.isJudgeStrNull(model.Plant)) {
        titleStr = titleStr + model.Plant
      }
      return titleStr
    },
    /// 标题拼接 <!-- {{item.PrinicipalMaterial}}/({{item.Material}}){{item.MaterialText}}/{{item.VendorName}} -->
    titleInitial(model) {
      let titleStr = ''
      if (this.isJudgeStrNull(model.PrinicipalMaterial)) {
        titleStr = model.PrinicipalMaterial.replace(/\b(0+)/gi,"") + '/'
      }
      if (this.isJudgeStrNull(model.Material)) {
        titleStr = titleStr + '(' + model.Material.replace(/\b(0+)/gi,"") + ')'
      }
      if (this.isJudgeStrNull(model.MaterialText)) {
        titleStr = titleStr + model.MaterialText  + '/'
      }
      if (this.isJudgeStrNull(model.VendorName)) {
        titleStr = titleStr + model.VendorName
      }
      return titleStr
    },
    /// 金额转换
    numFormat(num) {
      return AmountNumFormat(num)
    },
    /// 高级搜索 调用接口
    goodsSearchAction(clientInfo) {
      this.clientInfo = clientInfo
      // console.log('goodsSearchAction')
    },
    goodsSelectedAction(model){
      this.show = true
      this.selectedGoods = model
      // this.getLogisticsListHttpAction()
    },
    itemClick(item) {
      this.$emit('onitemclick', item)
    },
    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.getOrderGoodsListHttpAction()
    },
    onLoad() {
      // 加载更多接口
      this.loading = true
      this.getOrderGoodsListHttpAction()
    },
    // 获取商品信息列表
    getOrderGoodsListHttpAction() {
      let data = {
        param: `sdodParameters(UID='${this.$route.query.sysUserId}',PrnSo='${this.clientInfo.PrnSo}',SODoc='${this.ordermodel.SalesDoc}',EDate='${this.clientInfo.EDate}',SDate='${this.clientInfo.SDate}',CustID='${this.ordermodel.Customer}')/Results?$format=json&$top=${this.pageSize}&$skip=${this.currentPage}`
      }
      getOrderGoodsListHttp(data).then((rt) => {
        // console.log(rt)
        if (rt.code === 200) {
          // this.$router.back()
          // this.itemInfo = rt.data
          // for (let i = 0; i < rt.data.results.length; i++) {
          //   let model = rt.data.results[i]
          //   this.datalists.push(model);
          // }
          if (this.currentPage === 0) {
            this.datalists = []
          }
          rt.data.results.forEach((res)=>{
            this.datalists.push({
              RowID: res.RowID,
              PrinicipalMaterial: res.PrinicipalMaterial,
              Material: res.Material,
              MaterialText: res.MaterialText,
              VendorName: res.VendorName,
              Plant: res.Plant,
              Temperature: res.Temperature,
              Unit: res.Unit,
              Quantity: res.Quantity,
              NetValue: res.NetValue,
              NetValueWithoutTax: res.NetValueWithoutTax,
              TaxAmount: res.TaxAmount,
              DeliveryPriority: res.DeliveryPriority,
              SODoc: this.ordermodel.SalesDoc,
              PlantID: res.PlantID,
              title: this.titleInitial(res)
            });
          })
          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
      })
    },
    numberOnRefresh() {
      // 刷新接口
      console.log('numberOnRefresh')
      this.numberDatalists = []
      this.currentPage = 1
      this.numberIsRefreshing = true
      this.getGoodsBatchnumberListHttpAction()
    },
    numberOnLoad() {
      console.log('numberOnLoad')
      // 加载更多接口L
      this.numberLoading = true
      this.getGoodsBatchnumberListHttpAction()
    },
    // 获取批号信息列表
    getGoodsBatchnumberListHttpAction() {
      getGoodsBatchnumberListHttp({userid: '159748'}).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.data.length; i++) {
            let model = rt.data.data[i]
            this.numberDatalists.push(model);
          }
          this.numberFinished = false;
          this.numberIsRefreshing = false;
          if (this.numberDatalists.length >= 1) {
            this.numberFinished = true;
          }
        } else {
          this.$toast(rt.msg)
          // this.$toast('列表获取失败')
          this.numberIsRefreshing = false
          this.error = true
        }
        // 加载状态结束
        this.numberLoading = false;
      }).catch((e) => {
        // this.$toast('获取信息失败！')
        this.$toast('列表获取失败')
        this.numberIsRefreshing = false
        this.numberLoading = false
        this.error = true
      })
    },
    /// 判断数值是否为空
    isJudgeStrNull(val) {
      if (val !== null && val !== undefined && val !== '') {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsItem{
  .datalist{
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .mumberDatalist{
    height: calc(100% - 227PX);
    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;
    .item{
      height: 22px;
      line-height: 22px
    }
  }
  .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;
  }
  .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>
