<template>
	<view class="container">
		<u-notice-bar v-if="tipsList.length !== 0" :text="tipsList[0].title" :fontSize='28' @click="headerTipsClick" />

	  <view v-if="info.swiperList && info.swiperList.length !== 0">
	    <swiper class="banner" indicator-dots autoplay circular>
	        <swiper-item v-for="(item, index) in info.swiperList" :key="index">
	          <image class="banner_item" :src="item" mode="aspectFill" />
	        </swiper-item>
	    </swiper>
	  </view>
	  <view class="nav">
	    <u-grid col="4" :border="false">
	      <u-grid-item
	        v-for="(item, index) in navList"
	        @click="headerNavClick(item)"
					:key="index"
	      >
				<image class="grid_Pic" :src="item.pic" mode=""></image>
				<text>{{item.desc}}</text>
				</u-grid-item>
	    </u-grid>
	  </view>
	  <view class="line"></view>
	
	  <view class="sub_nav">
	    <view class="sub_nav_item" @click="repair">
	      <view class="sub_nav_item_desc">报事保修</view>
	      <view class="sub_nav_item_right">
	        <image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group%203022.png" mode=""/>
	      </view>
	    </view>
	    <view class="sub_nav_item wy_pay" @click="NotOpen">
	      <view class="sub_nav_item_desc">物业缴费</view>
	      <view class="sub_nav_item_right">
	        <image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_366.png" mode=""/>
	      </view>
	    </view>
	
	    <view class="sub_nav_item wy_pay2" @click="ReparirList">
	      <view class="sub_nav_item_desc">报修列表</view>
	      <view class="sub_nav_item_right">
	        <image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Repairwithone.png" mode=""/>
	      </view>
	    </view>
	
	    <view v-if="!info.is_join" class="sub_nav_item tel_leave" @click="NotOpen">
	      <view class="sub_nav_item_desc">手机通行</view>
	      <view class="sub_nav_item_right">
	        <image class="sub_nav_item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_302.png" mode=""/>
	      </view>
	    </view>
	
	 
	  </view>
	</view>
</template>

<script>
	import { request, picUrl, NavgateTo } from '../../../utils';
	import { apiArr } from '../../../api/community';
	
	export default {
		data () {
			return {
				pageTitle: '',
				id: '', // 社区id
				navList: [
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_345.png',
						url: '/packages/community/applyOwer/index',
						desc: '申请业主'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_346.png',
						desc: '我的车辆'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_348.png',
						desc: '社区活动'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_347.png',
						desc: '呼叫管家'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_350.png',
						desc: '访客登记'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_351.png',
						desc: '便民信息'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_352.png',
						desc: '物业缴费'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_356.png',
						desc: '便捷挪车'
					},
				],
				mainList: [
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_349.png',
						desc: '报事报修',
						url:"/community/oneRepair/index"
					}, 
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_350.png',
						desc: '访客登记'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_351.png',
						desc: '便民信息'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_352.png',
						desc: '物业缴费'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_353.png',
						desc: '生活缴费'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_354.png',
						desc: '社区投票'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_355.png',
						desc: '租售信息'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_356.png',
						desc: '便捷挪车'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_357.png',
						desc: '一键报警'
					},
					{
						pic: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_358.png',
						desc: '更多服务'
					},
				],
				info: {},
				tipsList: [],
			}
		},
		onLoad (options) {
			this.pageTitle = options.title;
			this.id = Number(options.id);
			this.init(options.id);
		},
		
		methods: {
			async init(id) {
			  const res = await request(apiArr.info, "POST", {
					community_id: Number(id)
				});
				console.log('res' ,res);
				const newInfo = {
				  ...res,
				  swiperList: res?.swiper_img ? res?.swiper_img.split(',').map((item) => picUrl+item): [],
				}
				console.log('newInfo', newInfo);
				let navList = this.navList
				navList[0].url = `/packages/community/applyOwer/index?id=${Number(id)}&title=${res.name}`;
				navList[1].url = `/packages/community/mycar/index?id=${Number(id)}&title=${res.name}`;
				this.info = newInfo;
				this.navList = navList;
				
				uni.setNavigationBarTitle({
				  title: newInfo.name,
				})
				
				// 小区通知
				const tipsRes = await request(apiArr.tipsList, 'POST', {
					community_id: Number(id),
					page_num: 1,
					page_size: 10,
				})
				this.tipsList = tipsRes?.rows || []
			},
			
			NotOpen() {
				uni.showModal({
					title: '提示',
					content: '此功能暂未开通！',
					showCancel: false,
				})
				return
			},
			
			
			// 通知栏点击跳转
			headerTipsClick() {
				NavgateTo(`/packages/community/notice/index?id=${this.id}&title=${this.pageTitle}`, { isLogin: false })
			},
			
			// 宫格item点击
			headerNavClick(event) {
				const { pageTitle } = this;
				if(!event.url) {
					this.NotOpen();
					return
				}
				NavgateTo( `${event.url}?title=${pageTitle}`)
			},
			
			repair(){
				NavgateTo(`/packages/community/oneRepair/index`)
			},
			
			ReparirList(){
				NavgateTo(`/packages/community/repairList/index?id=${this.id}&title=${this.info.name}`)
			},
			
			
			
			
		},
	}
</script>

<style>
	@import url("./index.css");
</style>