<script lang="ts" setup>
import { getInventoryOverviewAPI } from '@/api/operator'
import { useOperatorStore } from '@/store'

definePage({
  style: {
    navigationBarTitleText: '部件入库',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const operatorStore = useOperatorStore()
const list = ref([])
const paging = ref()
const operatorAllList = ref<any>([])

function addEnterlist() {
  uni.navigateTo({
    url: '/pages-sub/warehouse/addEnterlist/addEnterlist',
  })
}

async function queryList(pageNo: number, pageSize: number) {
  try {
    uni.showLoading({
      title: '加载中',
    })
    const data = await getInventoryOverviewAPI()
    uni.hideLoading()
    paging.value.complete(data)
  }
  catch (e) {
    paging.value.complete(false)
  }
}

// 根据类型获取icon
function getIcon(type: number) {
  switch (type) {
    case 1:
      return {
        text: '电池',
        icon: 'dianchi2',
      }
    case 2:
      return {
        text: '头盔',
        icon: 'toukui1',
      }
    case 3:
      return {
        text: '车架',
        icon: 'shouyetubiao_chachejia',
      }
    default:
      return {
        text: '',
        icon: '',
      }
  }
}

onMounted(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="Number('1')"
    :default-page-size="Number('100')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f3f3f3"
    @query="queryList"
  >
    <template #top>
      <view class="border-bottom bg-white">
        <!-- <uv-tabs :list="tabList" /> -->
      </view>
    </template>
    <view class="container">
      <view class="list-panel">
        <view v-for="(item, index) in list" :key="index" class="list-item">
          <view class="header d-flex align-center justify-between">
            <view class="fz-28 fw-600">
              {{ getIcon(item.inventoryType).text }}
            </view>
            <uv-tags text="已入库" type="success" size="mini" />
          </view>
          <view class="body border-bottom">
            <view class="icon">
              <uv-icon
                :name="getIcon(item.inventoryType).icon"
                custom-prefix="custom-icon"
                size="34"
                color="#1488f5"
              />
            </view>
            <view class="content fz-28">
              <view class="brand">
                运营商：{{ operatorStore.translateOperatorId(item.operatorId, operatorAllList) }}
              </view>
              <view class="num fw-500">
                入库数量：{{ item.inventoryNum }}
              </view>
            </view>
          </view>
          <view class="footer d-flex justify-end">
            <uv-button type="error" text="作废部件" size="normal" shape="circle" />
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button type="primary" text="新增入库" @click="addEnterlist" />
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.container {
  padding: 0px 0px;
  background-color: #f3f3f3;

  .list-panel {
    padding: 10px 5px 0px 0px;

    .list-item {
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 2px 2px 4px 2px rgba(212, 212, 212, 0.6);

      .header {
        width: 100%;
        margin-bottom: 20rpx;
      }

      .body {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .content {
          display: flex;
          margin-left: 20rpx;
          flex-direction: column;
          justify-content: center;
          padding-bottom: 10rpx;

          .brand {
            margin-bottom: 10rpx;
          }
        }
      }

      .footer {
        width: 100%;
      }
    }
  }
}
</style>
