<script lang="ts" setup>
import { getEcuOverviewAPI } from '@/api/operator'
import { useAppStore, useOperatorStore } from '@/store'
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

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

function addEnterlist() {
  uni.navigateTo({
    url: '/pages-sub/warehouse/centralControManagment/updateCenterControl/updateCenterControl?type=add',
  })
}

// 返回
function handleBack() {
  uni.navigateBack()
}

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

onLoad(async () => {
  operatorAllList.value = await operatorStore.getOperatorList()
})
onShow(() => {
  paging.value.reload()
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="Number('1')"
    :default-page-size="Number('1000000')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f9f9f9"
    @query="queryList"
  >
    <template #top>
      <view class="custom_navbar" :style="{ height: `${systemInfo.statusBarHeight + 44}px` }">
        <view class="back_bar">
          <uv-icon name="arrow-left" color="white" size="24" @click="handleBack" />
          <text class="text">中控管理</text>
        </view>
      </view>
    </template>

    <view class="container">
      <view class="list-panel">
        <view
          v-for="(item) in list"
          :key="item.bikeInfoId"
          class="list-item"
        >
          <view class="header">
            <view class="left">
              <view class="title">
                中控
              </view>
              <uv-tags
                text="已入库"
                plain
                size="mini"
              />
            </view>
            <!-- <view class="right" @click="handleDetail(item.bikeCode)">
                  <text>查看详情</text>
                  <uv-icon name="arrow-right" color="#999999" size="14" />
                </view> -->
          </view>
          <view class="row">
            <view class="icon">
              <uv-image :src="getImageFullPath('TONGYONG_YUNYINGSHANG_IMAGE')" mode="widthFix" width="100%" />
            </view>
            <view class="text">
              运营商：{{ operatorStore.translateOperatorId(item.operatorId, operatorAllList) }}
            </view>
          </view>
          <view class="row">
            <view class="icon">
              <uv-image :src="getImageFullPath('BUJIANRUKU_SHULIAN_IMAGE')" mode="widthFix" width="50rpx" />
            </view>
            <view class="text">
              入库数量：{{ item.count }}
            </view>
          </view>
          <!-- <view class="footer">
            <uv-button
              type="primary"
              :custom-style="{
                backgroundImage: `linear-gradient(226deg, #3C9CFE 0%, #067AF2 100%)`,
                borderRadius: '26rpx',
                height: '70rpx',
                width: '180rpx',
              }"
              :custom-text-style="{
                fontSize: '26rpx',
              }"
              text="出库"
              @click="handleupdateParts(item)"
            />
          </view> -->
        </view>
      </view>
    </view>

    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          type="primary"
          text="中控入库"
          :custom-style="{
            backgroundImage: `linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%)`,
            borderRadius: '28rpx',
            height: '100rpx',
          }"
          :custom-text-style="{
            fontSize: '32rpx',
            marginLeft: '8rpx',
          }"
          @click="addEnterlist"
        />
      </view>
    </template>
  </z-paging>
</template>

     <style lang="scss" scoped>
    .container {
  .list-panel {
    padding: 10px 5px 0px 0px;
    width: 100%;

    .list-item {
      padding: 10px;
      margin: 10px;
      border-radius: 26rpx;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);

      .header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;

        .title {
          font-family: PingFangSC-Semibold;
          font-size: 30rpx;
          color: #333333;
          letter-spacing: 0;
          font-weight: 600;
          margin: 0 25rpx 0 0rpx;
        }

        .left {
          display: flex;
          align-items: center;
        }

        .right {
          display: flex;
          align-items: center;

          text {
            font-family: PingFangSC-Regular;
            font-size: 24rpx;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }

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

        .icon {
          width: 46rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        .text {
          margin-left: 16rpx;
          transform: translateY(4rpx);
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
        }
      }

      .footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.custom_navbar {
  width: 100%;
  position: relative;
  background-color: #0f74ff;

  .back_bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 25rpx;
    left: 30rpx;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: white;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}
</style>
