<template>
	<!-- 赛事 -->
	<view class="bgWhite">
		<!-- 搜索 -->
		<view class="topSearch">
			<uni-search-bar style="width: 550rpx;" @clear="onclear()" @confirm="onconfirm()" clearButton="auto" cancelButton="none" v-model="queryParam.name"></uni-search-bar>
			<picker style="width: 180rpx;" @change="changeProject" :value="index" :range="projectList" range-key="name">
				<view class="uni-input">{{projectName?projectName:'全部'}}
					<uni-icons type="bottom" size="16"></uni-icons>
				</view>
			</picker>
		</view>

		<view class="uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view>
				<view class="matchList">
					<view class="matchItem" @click="goSingle(item)" v-for="(item, index) in list" :key="index">
						<view class="leftImg">
							<text class="matchType type2" v-if="item.type==0">独立赛</text>
							<text class="matchType type1" v-if="item.type==1">联赛</text>
							<image mode="aspectFit" :src="item.coverUrl"></image>
						</view>
						<view class="rightWen">
							<view class="name">{{item.name}}</view>
							<!-- 1 报名未开始 2 报名进行中 3 即将开始 4 进行中 5已经结束 -->
							<text class="status s01" v-if="item.progressStatusCode==3">即将开始</text>
							<text class="status s02" v-if="item.progressStatusCode==2">报名中</text>
							<text class="status s03" v-if="item.progressStatusCode==4">进行中</text>
							<text class="status s04" v-if="item.progressStatusCode==5">已结束</text>
							<text class="status s04" v-if="item.progressStatusCode==1">报名未开始</text>
							<view class="time" v-if="item.type==0">报名截止：{{item.signEndTime.substring(0, 10)}}</view>
							<view class="time" v-else>比赛开始时间：{{item.beginTime.substring(0, 10)}}</view>
							<view class="time" v-if="item.type==1">比赛结束时间：{{item.endTime.substring(0, 10)}}</view>
						</view>
					</view>
				
					<view class="nodata" v-if="list.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs, getCurrentInstance } from 'vue';
import * as match from '@/match/js/match.js';
import {onShow,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app';
const app = getApp();
const { proxy } = getCurrentInstance();
const data = reactive({
	// 1 报名未开始 2 报名进行中 3 即将开始 4 进行中 5已经结束
	items: ['全部', '报名中', '进行中', '即将开始','已结束'],
	activeColor:'#00CAA6',
	queryParam: {
		projectId:'',
		progressStatusCode:'',
		name:''
	},
	current: 0,
	index: 0,
	list: [],
	projectList:[],
	projectName:''
});
const { items,activeColor, queryParam, current, index,list,projectList,projectName } = toRefs(data);
onShow(option =>{
	projectList.value = []
	if (app.globalData.isLogin) {
		getProjectList()
		getList();
	} else {
		app.firstLoadCallback = () => {
			getProjectList()
			getList();
		};
	}
})

function getProjectList(){
	match.getBaseProject().then(res=>{
		projectList.value = res.rows
		let obj = {
			id:'',
			name:'全部'
		}
		projectList.value.unshift(obj)
	})
	// projectList.value =_.cloneDeep(app.globalData.venue.projectList);

}
function getList() {
	match.getMaList(queryParam.value).then(res => {
		list.value = res.rows;
	});
}
function changeProject(e){
	console.log(e.detail.value)
	index.value = e.detail.value
	projectName.value = projectList.value[index.value].name
	queryParam.value.projectId = projectList.value[index.value].id
	getList()
}
function onclear(){
	queryParam.value.name = ''
	getList()
}
function onconfirm(){
	console.log(queryParam.value.name)
	getList()
}

function onClickItem(e) {
	current.value = e.currentIndex;
	if(current.value==1){
		queryParam.value.progressStatusCode = '2';
	}else if(current.value==2){
		queryParam.value.progressStatusCode = '4';
	}else if(current.value==3){
		queryParam.value.progressStatusCode = '3';
	}else if(current.value==4){
		queryParam.value.progressStatusCode = '5';
	}else {
		// 全部
		queryParam.value.progressStatusCode = ''
	}
	getList()
}
function goSingle(item) {
	if(item.type==0){
		let path = `/pages_match/match/single?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	} else {
		// 联赛
		let path = `/pages_match/match/singleLs?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	}

}
</script>

<style lang="scss" scoped>
.bgWhite {background: #fff;}
.topSearch{ display: flex; align-items: center;}
</style>