<template>
  <div class="goods w100 h100">
    <search-result :result-num="sum"></search-result>
    <div class="orderInfo" style="padding-bottom: 0">{{orderInfo.orderNo}}</div>
    <div class="list">
      <!--      <van-pull-refresh-->
      <!--        v-model="isRefreshing"-->
      <!--        @refresh="onRefresh">-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已经到底啦"
        :error.sync="error"
        :offset="10"
        @load="onLoad">
        <div class="listContent" v-for="item in postDataList" :key="item.clientPartyId">
          <van-row>
            <van-col span="9">商品信息：</van-col>
            <van-col span="15">{{item.comGoodsId}}/({{item.goodsOpcode}}){{item.goodsName}}/{{item.goodsDesc}}/{{item.productLocation}}/{{item.packageNum}}</van-col>
          </van-row>
          <van-row>
            <van-col span="9">数量(箱数)：</van-col>
            <van-col span="15">{{item.meetQty}}({{item.boxs}})</van-col>
          </van-row>
          <van-row>
            <van-col span="9">含税金额：</van-col>
            <van-col span="15">{{item.taxAmount | toFix(2) |separator('',' 元')}}</van-col>
          </van-row>
          <van-row>
            <van-col span="9">无税金额：</van-col>
            <van-col span="15">{{item.taxFreeAmount | toFix(2) |separator('',' 元')}}</van-col>
          </van-row>
          <van-row>
            <van-col span="9">税额：</van-col>
            <van-col span="15">{{item.taxFee | toFix(2) |separator('',' 元')}}</van-col>
          </van-row>
          <van-row>
            <van-col span="9">订单来源：</van-col>
            <van-col span="15">{{item.webFromType }}</van-col>
          </van-row>
          <van-row>
            <van-col span="9">发票信息：</van-col>
            <van-col span="15">{{item.invoiceNo }}</van-col>
          </van-row>
          <van-button plain round size="mini" type="info" class="btn_info" @click="onGoodsInfoClick(item)">批号
          </van-button>
        </div>
      </van-list>
      <!--      </van-pull-refresh>-->
    </div>
    <div class="footer">
      <p class="text-center remove-margin">合计: <span>{{totalMoney | toFix(2) |separator('',' 元')}}</span></p>
    </div>

    <van-popup
      v-model="cwnInfoShow"
      closeable
      close-icon-position="top-right"
      position="bottom"
      class="flex flex-column"
      :style="{ height: '100%' }">
      <lotInfo :db-name="tabData.sysDbSource" :goods-info="goodsItem" />
    </van-popup>
  </div>
</template>

<script>
// 引入接口
import {
  getGoodsList
} from '@/api/saleSituation'
  // import {getResListNum} from '@/utils/common'
  // 引入组件
import SearchResult from '@/components/SearchResult'
import lotInfo from './lotInfo'

export default {
  name: 'goods',
  components: {
    lotInfo,
    SearchResult
  },
  props: {
    chooseTime: {
      type: Object,
      default: () => {
      }
    },
    tabData: {
      type: Object,
      default: () => {}
    },
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      totalMoney: 0,
      time: {},
      sum: '0',
      currentPage: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      error: false,
      cwnInfoShow: false,
      postDataList: [],
      goodsItem: {}
    }
  },
  mounted() {
    this.time = JSON.parse(JSON.stringify(this.chooseTime))
  },
  watch: {
    chooseTime: {
      handler(val) {
        this.time = JSON.parse(JSON.stringify(this.chooseTime))
        this.getPostData()
      },
      deep: true
    },
    tabData: {
      deep: true,
      handler (val) {
        this.getPostData()
      }
    },
    orderInfo: {
      deep: true,
      handler (val) {
        this.getPostData()
      }
    }
  },
  destroyed() {
  },
  methods: {
    // onRefresh() {
    //   this.currentPage = 1
    //   this.finished = false
    //   this.getPostData()
    // },
    onLoad() {
      // this.loading = true
      this.getPostData()
    },
    onGoodsInfoClick(goods) {
      this.cwnInfoShow = !this.cwnInfoShow
      this.goodsItem = goods
    },
    getPostData() {
      let _this = this

      let data = {
        'orgId': this.tabData.orgId,
        'startDate': this.time.start,
        'endDate': this.time.end,
        'saler': this.tabData.saler,
        'orderId': this.orderInfo.orderId,
        'start': '1',
        'length': '999',
        'dbName': _this.tabData.sysDbSource // 'erp_ogg_shaphar'
      }
      getGoodsList(data).then(rt => {
        if (rt.code === 1 || rt.code === '1') {
          _this.postDataList = rt.data
          _this.sum = _this.postDataList.length + '' // getResListNum(rt.msg)
          _this.totalMoney = 0
          _this.postDataList.forEach((item, index) => {
            let totalNum = parseFloat(item.taxAmount)
            _this.totalMoney += totalNum
          })
          _this.finished = true
        } else {
          _this.$toast(rt.msg)
          _this.error = true
        }
        // 加载状态结束
        _this.loading = false
      }).catch(e => {
        _this.$toast('列表获取失败')
        _this.loading = false
        _this.error = true
        _this.finished = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods {
    display: flex;
    flex-direction: column;

    .orderInfo {
      color: #23262A;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .list {
      width: 100%;
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .listContent {
      background: white;
      margin-bottom: 8px;
      padding: 2px 14px 2px 14px;
      position: relative;

      /deep/ .van-row {
        padding-top: 6px;
        padding-bottom: 6px;

        .van-col {
          font-size: 14px;
        }

        .van-col--9 {
          color: #677282;
        }
      }

      .btn_info {
        width: 48px;
        height: 24px;
        position: absolute;
        right: 14px;
        bottom: 36px;
      }
    }

    .footer {
      background-color: $bc1;
      height: 44px;
      line-height: 44px;
      position: relative;
      font-size: 16px;
      p span {
        font-size: 16px;
        font-weight: bold;
        color: $tc5;
      }
    }
  }
</style>
