<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
  <view class="">
    <com-blank-view @goScan="openScanPopup" v-if="itemCode == ''"></com-blank-view>
    <!-- 这里就很整洁了，只要设置ref，绑定query事件，绑定list就可以了 -->
    <my-paging v-show="itemCode != ''" ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <template #top>
        <view v-if="itemDetail != undefined">
          <item-info :itemdetail="itemDetail"></item-info>
          <view class="split_line"></view>
          <z-tabs :list="tabList" @change="tabChange" />
        </view>
      </template>
      <view class="" style="padding-bottom: 50rpx">
        <comItemDetailCard v-if="tabIndex == 0" :itemList="dataList" :isShowPack="false" style="margin: 20rpx"> </comItemDetailCard>
        <comItemDetailCard v-if="tabIndex == 1" :itemList="dataList" style="margin: 20rpx"> </comItemDetailCard>
        <comItemDetailCard v-if="tabIndex == 2" :itemList="dataList" :isShowLocation="false" :isShowBusiness="true" style="margin: 20rpx"></comItemDetailCard>
        <comItemDetailCard v-if="tabIndex == 3" :itemList="dataList" :isShowLocation="false" :isShowBusiness="true" style="margin: 20rpx"> </comItemDetailCard>
      </view>
    </my-paging>
    <win-scan-button @goScan="openScanPopup" v-if="itemCode != ''"></win-scan-button>
    <win-scan-item ref="scanPopup" title="物料代码" @getScanResult="getScanCode"> </win-scan-item>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
import { onLoad, onShow, onNavigationBarButtonTap, onReady, onBackPress, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getExpectoutByItemcode, getExpectinByItemcode, getBalanceByItemCode, getBasicItemByCode, getBalanceSummary } from '@/api/request2.js'
import { goHome } from '@/common/basic.js'
import itemInfo from '@/mycomponents/item/itemInfo.vue'
import comBlankView from '@/mycomponents/common/comBlankView.vue'
import winScanItem from '@/mycomponents/scan/winScanItem.vue'
import winScanButton from '@/mycomponents/scan/winScanButton.vue'
import comItemDetailCard from '@/pages/query/coms/comItemDetailCard.vue'

const { proxy } = getCurrentInstance()

const dataList = ref([])
const tabList = ref(['汇总', '明细', '预计入', '预计出'])
const tabIndex = ref(0)
const itemDetail = ref(undefined)
const itemCode = ref('')
const balances = ref([])
const scanPopup = ref()
const paging = ref()
const comMessageRef = ref()
onNavigationBarButtonTap((e) => {
  if (e.index === 0) {
    goHome()
  }
})
onMounted(() => {
  openScanPopup()
})
const openScanPopup = (val) => {
  scanPopup.value.openScanPopup()
}
const closeScanPopup = () => {
  scanPopup.value.closeScanPopup()
}
const getScanCode = (code) => {
  if (code == '') {
    showMessage('物料号不能为空')
    return
  }
  itemCode.value = ''
  getItemInfo(code)
}
const getItemInfo = (code) => {
  proxy.$modal.loading('正在查询物料信息­....')

  getBasicItemByCode(code)
    .then((res) => {
      uni.hideLoading()
      if (res.data.list.length > 0) {
        closeScanPopup()
        itemCode.value = res.data.list[0].code
        itemDetail.value = res.data.list[0]
        tabChange(0)
      } else {
        showMessage(`未查找到物料【${code}】`)
      }
    })
    .catch((error) => {
      uni.hideLoading()
      itemCode.value = ''
      showMessage(error)
    })
}

// 汇总
const getSummary = (pageNo, pageSize) => {
  proxy.$modal.loading('加载中­....')
  const params = {
    itemCode: itemCode.value,
    pageNo,
    pageSize
  }
  getBalanceSummary(params)
    .then((res) => {
      uni.hideLoading()
      if (res.data.list.length > 0) {
        paging.value.complete(res.data.list)
      } else {
        paging.value.complete(false)
        showMessage(`未查找到物料【${itemCode.value}】`)
      }
    })
    .catch((error) => {
      paging.value.complete(false)
      uni.hideLoading()
      showMessage(error)
    })
}
// 明细
const getDetailList = (pageNo, pageSize) => {
  proxy.$modal.loading('加载中­....')
  const params = {
    itemCode: itemCode.value,
    pageNo,
    pageSize
  }
  getBalanceByItemCode(params)
    .then((res) => {
      uni.hideLoading()
      if (res.data.list.length > 0) {
        paging.value.complete(res.data.list)
      } else {
        paging.value.complete(false)
        showMessage(`未查找到物料【${itemCode.value}】`)
      }
    })
    .catch((error) => {
      paging.value.complete(false)
      uni.hideLoading()
      showMessage(error)
    })
}
const ontabtap = (e) => {
  const index = e.target.dataset.current || e.currentTarget.dataset.current
  tabIndex.value = index
  getContentByTab(index)
}

const getContentByTab = (index, pageNo, pageSize) => {
  if (index === 0) getSummary(pageNo, pageSize)
  else if (index === 1) getDetailList(pageNo, pageSize)
  else if (index === 2) {
    getExpectin(pageNo, pageSize)
  } else if (index == 3) {
    getExpectout(pageNo, pageSize)
  }
}
// 预计入
const getExpectin = (pageNo, pageSize) => {
  proxy.$modal.loading('加载中­....')
  const params = {
    itemCode: itemCode.value,
    pageNo,
    pageSize
  }
  getExpectinByItemcode(params)
    .then((res) => {
      uni.hideLoading()
      if (res.data.total > 0) {
        paging.value.complete(res.data.list)
      } else {
        showMessage(`未查找到物料【${itemCode.value}】`)
      }
    })
    .catch((error) => {
      paging.value.complete(false)
      uni.hideLoading()
      showMessage(error)
    })
}

// 预计出
const getExpectout = (pageNo, pageSize) => {
  proxy.$modal.loading('加载中­....')
  const params = {
    itemCode: itemCode.value,
    pageNo,
    pageSize
  }
  getExpectoutByItemcode(params)
    .then((res) => {
      uni.hideLoading()
      if (res.data.total > 0) {
        paging.value.complete(res.data.list)
      } else {
        paging.value.complete(false)
        showMessage(`未查找到物料【${itemCode.value}】`)
      }
    })
    .catch((error) => {
      paging.value.complete(false)
      uni.hideLoading()
      showMessage(error)
    })
}

const showMessage = (message) => {
  comMessageRef.value.showErrorMessage(message, (res) => {
    if (res) {
      afterCloseMessage()
    }
  })
}

const afterCloseMessage = () => {
  if (scanPopup.value != undefined) {
    scanPopup.value.getfocus()
  }
}
const tabChange = (index) => {
  console.log(index)
  tabIndex.value = index
  paging.value.reload(true)
}
const queryList = (pageNo, pageSize) => {
  if (itemCode.value != '') {
    getContentByTab(tabIndex.value, pageNo, pageSize)
  }
}

const itemClick = (item) => {}
</script>

<style>
.notice {
  background-color: red;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

.item {
  position: relative;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 30rpx;
}

.item-detail {
  padding: 5rpx 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: white;
  background-color: #007aff;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 1px;
  width: 100%;
  background-color: #eeeeee;
}
</style>
