<script setup lang="ts">

import {onMounted, ref} from "vue";
import {workData, policyList} from "@/pages/home/staticdata";
import {zones} from '@/http/apis/commonApi'
import {useRouter} from "vue-router";

const serviceList: any = ref([])

function getLocalImage(localurl: string) {
  return new URL(localurl, import.meta.url).href
}

onMounted(() => {
  zones().then(res => {
    serviceList.value = res.data
  })
})
const router = useRouter()

function policyItemClick(item: any) {
  window.location.href = item.url
}

function serviceItemClick(item: any) {
  router.push({
    name: 'serviceplatform',
    query: {
      name: item.name,
      files: JSON.stringify(item.specialFeatureFiles)
    }
  })
}

function workItemClick(item: any) {
  let url = `https://www.zjzwfw.gov.cn/zjservice-fe/#/serviceChild?id=${item.id}&tabOption=LIFE_CYCLE&personType=2&siteCode=330603000000`
  window.location.href = url
}
</script>

<template>
  <div>
    <img class="top-bg" src="@/assets/home/banner.png">
    <div class="card">
      <div class="title-content">
        <div class="line"></div>
        <div class="title">服务板块</div>
      </div>
      <van-grid :border="false" :column-num="2" :center="false" :gutter="15">
        <van-grid-item v-for="item in serviceList" class="my-grid" @click="serviceItemClick(item)">
          <div class="menyItem">
            <van-image
                class="icon"
                :src="item.zoneIcon"
            />
            <span class="title">{{ item.name }}</span>
          </div>
        </van-grid-item>
      </van-grid>
      <div class="title-content">
        <div class="line"></div>
        <div class="title">我要办事</div>
      </div>
      <img class="affairsbanner" src="../../assets/home/affairsbanner.png">

      <van-grid :border="false" :column-num="2" :center="false" :gutter="15" style="margin-top: 20px">
        <van-grid-item v-for="item in workData" class="my-grid" @click="workItemClick(item)">
          <div class="menyItem" style="justify-content: left;">
            <div class="point"></div>
            <span class="title">{{ item.name }}</span>
          </div>
        </van-grid-item>
      </van-grid>
      <div class="title-content">
        <div class="line"></div>
        <div class="title">政策直达</div>
      </div>
      <van-grid :border="false" :column-num="2" :center="false" :gutter="15">
        <van-grid-item v-for="item in policyList" class="my-grid" @click="policyItemClick(item)">
          <van-image
              :src="getLocalImage(item.image)"
          />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<style lang="less">

.card {
  background: #FFFFFF;
  border-radius: 12px;
  margin-left: 35px;
  margin-right: 35px;
  margin-top: -60px;
  padding-bottom: 50px;
  margin-bottom: 50px;

  .title-content {
    padding-top: 60px;
    padding-bottom: 40px;
    display: flex;
    padding-left: 30px;
    align-items: center;

    .line {
      width: 10px;
      height: 48px;
      background: #1E48D3;
    }

    .title {
      margin-left: 20px;
      font-weight: 600;
      font-size: 52px;
      color: #2F313D;
      text-align: left;
      font-style: normal;
    }
  }
}

body {
  background-color: #F3F4F8;
}

.top-bg {
  position: relative;
  z-index: -1;
  height: 439px;
  width: 100%;
}

.affairsbanner {
  margin-left: 30px;
  margin-right: 30px;
  height: 260px;
}

.menyItem {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F2F4FD;
  padding-bottom: 44px;
  padding-top: 44px;
  border-radius: 12px;

  .title {
    margin-left: 20px;
    font-weight: 400;
    font-size: 40px;
    color: #2F313D;
    text-align: left;
  }

  .point {
    margin-right: 20px;
    margin-left: 60px;
    width: 20px;
    height: 20px;
    background: #1E48D3;
    border-radius: 50%;
  }

  .icon {
    width: 72px;
    height: 72px;
  }
}

.my-grid .van-grid-item__content {
  padding: 0;
}

</style>