<template>
  <view>
    <view class="swiperDemo">
      <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
          <image src="@/assets/images/01.png" alt="" style="height: 100%; width: 100%" draggable="false"/>
        </nut-swiper-item>
      </nut-swiper>
    </view>
    <view class="swiperDemoItem">
      <view class="swiperDemoIndex"></view>
      <view>请选择</view>
    </view>
    <!--九宫格-->
    <view>
      <view class="subModule">
        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
          <view class="subModuleIndex">
            <image :src="item.icon"></image>
          </view>
          <view style=" font-size: 12px;color: #414141;margin-top: 9px">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Taro from "@tarojs/taro";
import icon from '@/assets/images/project.png'
import './index.scss'

const list = ref(['https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',])
const swiperRef = ref() //轮播图
const subModuleList = ref([
  {
    id: 0,
    icon: icon,
    name: '企事业单位',
    url: '/subPages/police/myEnterprisesUnit/myEnterprisesUnit'
  },
  {
    id: 1,
    icon: icon,
    name: '警保风采',
    url: ''
  },
  {
    id: 2,
    icon: icon,
    name: '待定',
    url: ''
  }
])

const subNavigation = async (url: string) => Taro.navigateTo({url})

</script>
