<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useGlobal } from '@/composables/index'
const { minioUrl } = useGlobal()

// 轮播图数据
const list = ref([`${minioUrl}/home_banner.png`])

const tabs = ref([{ name: '加油' }, { name: '充电' }])
const tabActive = ref(0)

// 金刚区列表
const navList = ref([
  { image: `${minioUrl}/icon_nav_01.png`, text: '我要加油', path: '', w: '53rpx', h: '53rpx' },
  { image: `${minioUrl}/icon_nav_02.png`, text: '我要充电', path: '', w: '60rpx', h: '53rpx' },
  { image: `${minioUrl}/icon_nav_03.png`, text: '我要吃饭', path: '', w: '57rpx', h: '57rpx' },
  { image: `${minioUrl}/icon_nav_04.png`, text: '我要修车', path: '', w: '60rpx', h: '56rpx' },
  { image: `${minioUrl}/icon_nav_05.png`, text: '投诉建议', path: '/base/suggest/index', w: '59rpx', h: '53rpx' },
  { image: `${minioUrl}/icon_nav_06.png`, text: '一键救援', path: '', w: '76rpx', h: '76rpx' },
  { image: `${minioUrl}/icon_nav_07.png`, text: '司机之家', path: '', w: '76rpx', h: '76rpx' },
  { image: `${minioUrl}/icon_nav_08.png`, text: '母婴室', path: '', w: '76rpx', h: '76rpx' },
  { image: `${minioUrl}/icon_nav_09.png`, text: '失物招领', path: '', w: '76rpx', h: '76rpx' },
  { image: `${minioUrl}/icon_nav_10.png`, text: '招商加盟', path: '', w: '76rpx', h: '76rpx' }
])

// 金刚区点击事件
const navClick = (item: { path: string }) => {
  uni.navigateTo({
    url: item.path
  })
}
</script>

<template>
  <view class="index-container">
    <!-- 头部背景 -->
    <view class="header-bg" :style="{ backgroundImage: 'url(' + minioUrl + '/index_bg.png)' }"></view>
    <!-- header -->
    <view class="index-header-wrapper">
      <image :src="minioUrl + '/logo.png'" mode="scaleToFill" class="logo" />
      <view class="header-right-wrap">
        <view class="top-title-box">
          <view class="title-text">海青服务区</view>
          <image :src="minioUrl + '/icon_bottom_arrow.png'" mode="scaleToFill" />
        </view>
        <image class="star-img" :src="minioUrl + '/star.png'" mode="scaleToFill" />
        <view class="bottom-box">
          <!-- 天气 -->
          <!-- 营业状态 -->
          <view class="bottom-tag-item">正常营业</view>
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <u-swiper :height="306" :list="list"></u-swiper>
    <!-- 金刚区 -->
    <view class="index-nav-wrapper">
      <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
        <view class="nav-image">
          <image :src="item.image" mode="scaleToFill" :style="{ width: item.w, height: item.h }" />
        </view>
        <view class="nav-item-text">{{ item.text }}</view>
      </view>
    </view>
    <!-- 出行提示 -->
    <view class="index-tips-wrapper">
      <image class="tips-img" :src="minioUrl + '/icon_chuxing.png'" mode="scaleToFill" />
      <view class="tips-line"></view>
      <view class="tips-content">临时交通管制的通知</view>
    </view>
    <!-- 加油充电 -->
    <view class="index-tabs-wrapper">
      <u-tabs
        v-model="tabActive"
        :list="tabs"
        active-color="#333"
        :font-size="31"
        :height="60"
        :gutter="20"
        :bar-style="{
          width: '30rpx',
          height: '6rpx',
          backgroundImage: 'linear-gradient(90deg, #0f91f8 0%, #32a9c8 68%, #54c197 100%), linear-gradient(#6c85fc, #6c85fc)',
          backgroundBlendMode: 'normal, normal',
          borderRadius: '2rpx'
        }"
      ></u-tabs>
      <template v-if="tabActive === 0">
        <view class="tab-station-wrap">
          <HyStation v-for="index in 4" :key="index" />
        </view>
      </template>
      <template v-if="tabActive === 1">
        <view class="tab-station-wrap">
          <HyCharge />
        </view>
      </template>
    </view>
    <!-- 服务设施 -->
    <HyCard title="服务设施" marginBottom="24">
      <view class="index-service-wrapper">
        <HyService v-for="index in 6" :key="index"></HyService>
      </view>
    </HyCard>
    <!-- 人气优选商家 -->
    <HyCard title="人气优选商家" rightText="更多商家" isShowRight marginBottom="24">
      <view class="index-shop-wrapper">
        <view class="shop-item" v-for="index in 5" :key="index">
          <view class="img-wrap">
            <image src="" mode="scaleToFill" />
          </view>
          <view class="item-text u-line-1">肯德基</view>
        </view>
      </view>
    </HyCard>
    <!-- 附近景点 -->
    <HyCard title="附近景点" isBg :bgImg="minioUrl + '/index_spot_bg.png'">
      <view class="index-spot-wrapper">
        <view class="spot-item" v-for="index in 5" :key="index">
          <view class="spot-img-wrap">
            <image src="" mode="scaleToFill" />
          </view>
          <view class="spot-right-wrap">
            <view class="right-header">
              <view class="title">琅琊台风景区</view>
              <view class="price">50元</view>
            </view>
            <view class="right-tag-box">
              <view class="s-tag-green">自然风光</view>
              <view class="s-tag-green">历史遗迹</view>
              <view class="s-tag-green">休闲度假</view>
            </view>
            <view class="right-location-box">
              <view class="left">
                <image class="icon-address" :src="minioUrl + '/icon_address.png'" mode="scaleToFill" />
                <view class="address-text-wrap">距您<text>30.5</text>公里，驾车预计<text>40</text>分钟</view>
              </view>
              <view class="right-go-icon">
                <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </HyCard>
  </view>
</template>

<style lang="scss" scoped>
.index-container {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  box-sizing: border-box;
  padding: 24rpx;
  background-color: #f6f7fb;
  .header-bg {
    width: 100%;
    height: 494rpx;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 494rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .index-header-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 33rpx;
    position: relative;
    z-index: 2;
    margin-bottom: 24rpx;
    .logo {
      width: 105rpx;
      height: 92rpx;
    }
    .header-right-wrap {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      .top-title-box {
        display: flex;
        align-items: center;
        .title-text {
          font-size: 30rpx;
          color: #3b3c3b;
          font-weight: 600;
        }
        image {
          width: 13rpx;
          height: 10rpx;
          margin-left: 8rpx;
        }
      }
      .star-img {
        width: 146rpx;
        height: 27rpx;
      }
      .bottom-box {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .bottom-tag-item {
          font-size: 18rpx;
          color: #fff;
          box-sizing: border-box;
          padding: 6rpx 12rpx;
          background-color: #3bb0b9;
          border-radius: 8rpx;
        }
      }
    }
  }
  :deep(.u-swiper-wrap) {
    position: relative;
    z-index: 2;
  }
  .index-nav-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 40rpx;
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      .nav-image {
        width: 76rpx;
        height: 76rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14rpx;
      }
      &:nth-child(-n + 5) {
        margin-bottom: 50rpx;
      }
    }
  }
  .index-tips-wrapper {
    width: 100%;
    height: 84rpx;
    border-radius: 14rpx;
    background-color: #fff;
    margin: 24rpx 0;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    .tips-img {
      width: 53rpx;
      height: 48rpx;
    }
    .tips-line {
      width: 4rpx;
      height: 34rpx;
      background-color: #3866ae;
      margin: 0 23rpx 0 13rpx;
    }
    .tips-content {
      font-size: 25rpx;
      color: #333;
      font-weight: 500;
      line-height: 40rpx;
    }
  }
  .index-tabs-wrapper {
    width: 100%;
    background-color: #fff;
    border-radius: 14rpx;
    box-sizing: border-box;
    padding: 22rpx;
    margin-bottom: 24rpx;
    .tab-station-wrap {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 24rpx;
    }
  }
  .index-service-wrapper {
    margin-top: 24rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    :deep(.service-item-wrapper) {
      margin-bottom: 20rpx;
      &:nth-child(5) {
        margin-bottom: 0;
      }
      &:nth-child(6) {
        margin-bottom: 0;
      }
    }
  }
  .index-shop-wrapper {
    margin-top: 26rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shop-item {
      display: flex;
      flex-direction: column;
      .img-wrap {
        width: 104rpx;
        height: 104rpx;
        border-radius: 8rpx;
        background-color: #f0f6ff;
        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 8rpx;
        }
      }
      .item-text {
        width: 100rpx;
        text-align: center;
        margin-top: 12rpx;
      }
    }
  }
  .index-spot-wrapper {
    margin-top: 24rpx;
    .spot-item {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .spot-img-wrap {
        width: 196rpx;
        height: 151rpx;
        background-color: #f6f7fb;
        border-radius: 8rpx;
        image {
          width: 196rpx;
          height: 151rpx;
          border-radius: 8rpx;
        }
      }
      .spot-right-wrap {
        width: 100%;
        flex: 1;
        margin-left: 28rpx;
        .right-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .title {
            font-size: 28rpx;
            color: #333;
            font-weight: 600;
          }
          .price {
            font-size: 21rpx;
            color: #fc9b0d;
          }
        }
        .right-tag-box {
          display: flex;
          align-items: center;
          margin-top: 6rpx;
          .s-tag-green {
            width: 125rpx;
            height: 32rpx;
            background-color: #e2f3e4;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 21rpx;
            color: #239450;
            margin-right: 20rpx;
          }
        }
        .right-location-box {
          margin-top: 50rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            display: flex;
            align-items: center;
            .icon-address {
              width: 18rpx;
              height: 22rpx;
            }
            .address-text-wrap {
              font-size: 21rpx;
              color: #c3c3c3;
              margin-left: 8rpx;
              text {
                color: #fc9904;
              }
            }
          }
          .right-go-icon {
            width: 40rpx;
            height: 40rpx;
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>
