<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { useListLoader } from '@/composables/useListLoader'
import { getParkServiceList } from '@/api/home'
import { useGlobal } from '@/composables/index'

const { minioUrl, pathPre } = useGlobal()

const angle = ref(45)
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop > 80) {
    angle.value = 90
  } else {
    angle.value = 45
  }
})

const rateMap = {
  5: '五星级服务区',
  4: '四星级服务区',
  3: '三星级服务区',
  2: '二星级服务区',
  1: '一星级服务区'
} as any

const list = computed(() => {
  return listData.value.map((item: any) => ({
    ...item,
    content: JSON.parse(item.content)
  }))
})

// 列表加载
const { listData, upCallback, downCallback, handleSearch, mescrollInit } = useListLoader({
  apiFn: getParkServiceList,
  initialParams: {}
})

// 导航功能
const goToNavigation = (longitude: string, latitude: string, name: string) => {
  uni.openLocation({
    latitude: Number(latitude),
    longitude: Number(longitude),
    name: name,
    success: () => {
      console.log('导航功能调用成功')
    }
  })
}
</script>

<template>
  <mescroll-body @init="mescrollInit" :down="{ use: true, minAngle: angle }" @down="downCallback" @up="upCallback">
    <view class="service-container">
      <HyCard v-for="(item, index) in list" :key="index" class="service-content-wrapper" :marginBottom="36">
        <view class="service-item">
          <view class="item-header-wrap">
            <view class="header-img-box">
              <image :src="pathPre + item.content.image" mode="aspectFill" />
              <view class="header-status-tag" :class="{ 'open-tag': item.content.status !== '建设中' }">{{ item.content.status }}</view>
            </view>
            <view class="header-right-box">
              <view class="u-line-1 title">{{ item.title }}</view>
              <view class="rate-content">
                <uni-rate allow-half :value="item.content.rate" disabled disabledColor="#ff5702" activeColor="#ff5702"></uni-rate>
                <text class="rate-text">{{ rateMap[item.content.rate] }}</text>
              </view>
              <view class="distance">{{ item.content.distance }}KM</view>
              <view class="address-wrap">
                <view class="block">
                  <view class="t">{{ item.content.startLocation }}</view>
                  <image class="icon-arrive" :src="minioUrl + '/icon_arrive.png'" mode="aspectFill" />
                  <view class="t">{{ item.content.endLocation }}</view>
                </view>
                <view class="icon-go" @click="goToNavigation(item.content.longitude, item.content.latitude, item.title)">
                  <image :src="minioUrl + '/icon_blue_go.png'" mode="aspectFill" />
                </view>
              </view>
            </view>
          </view>
          <view class="item-bottom-wrap">
            <HyTag needBorder v-for="(tag, i) in item.content.facilities" :key="i" :text="tag.name" :imgUrl="pathPre + tag.img" />
          </view>
        </view>
      </HyCard>
    </view>
  </mescroll-body>
</template>

<style lang="scss" scoped>
.service-container {
  width: 100%;
  min-height: 10dvh;
  padding: 24rpx 24rpx 0 24rpx;
  background-color: #edf1f5;
  .service-item {
    .item-header-wrap {
      display: flex;
      align-items: center;
      .header-img-box {
        width: 174rpx;
        height: 174rpx;
        position: relative;
        border-radius: 14rpx;
        background-color: aliceblue;
        image {
          width: 174rpx;
          height: 174rpx;
          border-radius: 14rpx;
        }
        .header-status-tag {
          position: absolute;
          top: 0;
          right: 0;
          width: 80rpx;
          height: 30rpx;
          background-color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 14rpx 0 10rpx;
          font-size: 21rpx;
          color: #fff;
          &.open-tag {
            background-color: #ff5702;
          }
        }
      }
      .header-right-box {
        flex: 1;
        margin-left: 20rpx;
        .title {
          width: 464rpx;
          font-size: 31rpx;
          color: #333;
          font-weight: 600;
          line-height: 50rpx;
        }
        .rate-content {
          display: flex;
          align-items: center;
          .rate-text {
            font-size: 22rpx;
            color: #ff5702;
            margin-left: 14rpx;
          }
        }
        .distance {
          font-size: 22rpx;
          color: #999;
          line-height: 42rpx;
        }
        .address-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .block {
            min-width: 174rpx;
            box-sizing: border-box;
            padding: 10rpx 24rpx;
            background-color: #edf1f5;
            border-radius: 21rpx;
            display: flex;
            align-items: center;
            .icon-arrive {
              width: 31rpx;
              height: 13rpx;
              margin: 0 8rpx;
            }
            .t {
              font-size: 22rpx;
              color: #333;
            }
          }
          .icon-go {
            width: 60rpx;
            height: 60rpx;
            image {
              width: 60rpx;
              height: 60rpx;
            }
          }
        }
      }
    }
    .item-bottom-wrap {
      width: 580rpx;
      display: flex;
      flex-wrap: wrap;
      margin-top: 40rpx;
    }
  }
}
</style>
