<template>
  <div class="home-container">
    <div class="banner">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in 5">
          <van-image :src="requireImgUrl(`banner${item}.png`)"/>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="recent-file">
      <div class="label">最近工程</div>
      <van-cell-group inset clickable>
        <van-cell
          clickable
          v-for="item in projectList"
          :key="item.id"
          :title="item.name"
          :value="item.time"
          @click="router.push(`/project-info/${item.id}`)"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/stores/global'
import { storeToRefs } from 'pinia'
import { requireImgUrl } from '@/utils/tools'

const { projectList } = storeToRefs(useGlobalStore())
const router = useRouter()
</script>

<style scoped>
.home-container {
  padding: 16px;
}
.banner {
  margin-bottom: 16px;
  /* height: 150px; */
  border-radius: 4px;
  overflow: hidden;
}
.van-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #4fb5f9;
}
.van-image {
  display: block;
}
.recent-file .label {
  position: relative;
  margin-bottom: 16px;
  padding-left: 16px;
  line-height: 1;
}

.recent-file .label::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: #4fb5f9;
  left: 4px;
  top: 0;
  border-radius: 2px;
}

.van-cell-group--inset {
  margin: 0;
}
.van-cell {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
:deep(.van-cell__value) {
  width: 152px;
  flex: none;
}
:deep(.van-cell__title) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
