<template>
  <!-- 模具舟皿 -->
  <view class="">
    <TabMain :tabList="chartsTabList"></TabMain>
    <view class="marginTop">
      <tabTitle
        :tabList="tabList"
        @change="tabList_change"
        :active="pickTabIndex"
      ></tabTitle>
      <!-- 模具库存统计 -->
      <template v-if="pickTabIndex == 0">
        <template v-if="orderList.length > 0">
          <view
            class="order-list"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <view class="s1 item">
              <view class="b1"> TPA </view>
              <view class="b2"> 40/1000 </view>
            </view>
            <view class="s2 item">
              <view class="b1"> 0001 </view>
              <view class="b2"> 4 </view>
            </view>
            <view class="s3 item">
              <view class="b1"> 仓库A </view>
              <view class="b2"> 张三 </view>
            </view>
          </view>
        </template>
        <u-empty mode="data" v-else marginTop="30rpx"> </u-empty>
      </template>
      <!-- 舟皿库存统计 -->
      <template v-if="pickTabIndex == 1">
        <template v-if="zmList.length > 0">
          <view class="order-list" v-for="(item, index) in zmList" :key="item">
            <view class="s1 item">
              <view class="b1">
                {{ item.assetName }}
              </view>
              <view class="b2">
                {{ item.occupySum }}/{{ item.inventorySum }}
              </view>
            </view>
            <view class="s2 item">
              <view class="b1">
                {{ item.modelType }}
              </view>
              <view class="b2">
                {{ item.stampingSum }}
              </view>
            </view>
            <view class="s3 item">
              <view class="b1">
                {{ item.warehouseName }}
              </view>
              <view class="b2">
                {{ item.userName }}
              </view>
            </view>
          </view>
        </template>
        <u-empty mode="data" v-else marginTop="30rpx"> </u-empty>
      </template>
    </view>
  </view>
</template>

<script>
import TabMain from './components/TabMain.vue'
import ListOrder from '@/components/ListOrder.vue'
import CellTip from '@/components/CellTip.vue'
import tabTitle from '@/pages/home/components/tabTitle.vue'
import { get } from '@/utils/api.js'
export default {
  components: {
    TabMain,
    ListOrder,
    CellTip,
    tabTitle
  },
  data () {
    return {
      chartsTabList: ['模具实时库存统计', '舟皿实时库存统计'],
      tabList: ['模具库存统计', '舟皿库存统计'],
      pickTabIndex: 0,
      // 模具库存统计
      orderList: [],
      // 舟皿库存统计
      zmList: []
    }
  },
  created () {
    this.getBoatInventoryCountList()
    this.getModeInventoryCountList()
  },
  methods: {
    tabList_change (val) {
      this.pickTabIndex = val
    },
    /* 舟皿库存统计列表 */
    getBoatInventoryCountList () {
      get(this.apiUrl + '/home/page/inventory/boatInventoryCountList').then(
        res => {
          if (res.success) {
            this.zmList = res.data || []
          }
        }
      )
    },
    /* 模具库存统计列表 */
    getModeInventoryCountList () {
      get(this.apiUrl + '/home/page/inventory/modeInventoryCountList').then(
        res => {
          if (res.success) {
            this.orderList = res.data || []
          }
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.marginTop {
  margin-top: 20rpx;
}

.order-list {
  background-color: #fff;

  & + .order-list {
    border-top: 1px solid #f2f2f2;
  }

  padding: 15rpx;

  .item {
    font-size: 28rpx;
    color: rgb(170, 170, 170);
    display: flex;
    justify-content: space-between;

    & + .item {
      margin-top: 15rpx;
    }

    &.s1 {
      .b1 {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
