<template>
	<div class="app-container">
		<!-- 搜索区域 -->
		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
			<el-form-item label="赛事编号" prop="matchNumStr">
				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
					@keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="联赛类型" prop="leagueAbbName">
					<el-select v-model="queryParams.leagueAbbName" @change="handleQuery" style="width: 240px" clearable placeholder="请选择联赛类型">
                  <el-option
                     v-for="item in dataScopeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  ></el-option>
               </el-select>
			</el-form-item>

			<!-- <el-form-item label="时间">
				<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
					start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
			</el-form-item> -->

			<el-form-item label="时间"  prop="weekday">
				<el-select 
				v-model="queryParams.weekday" 
				style="width: 240px" 
				@change="handleWeekdayChange" 
				clearable 
				placeholder="请选择星期"
			>
                  <el-option
                     v-for="item in PickerOptions"
                     :key="item.value"
                     :label="item.text"
                     :value="item.value"
                  ></el-option>
               </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery" :loading="loading">查询</el-button>
				<el-button icon="Refresh" @click="resetQuery" :loading="loading">重置</el-button>
			</el-form-item>
		</el-form>
		<!--loading-->
		<div
			v-if="loading"
			v-loading="loading"
			class="loading-page"
			element-loading-text="正在加载..."
			style="width: 100%; height: calc(100vh - 250px)"
		></div>
		<div v-else-if="pageList.length && !loading">
			<!-- 表格数据 -->
			<el-table v-loading="loading" :data="pageList">
				<el-table-column label="赛事编号" prop="matchNumStr" />
				<el-table-column label="联赛" prop="leagueAllName" :show-overflow-tooltip="true" />
				<el-table-column label="主队" prop="homeTeamAllName" :show-overflow-tooltip="true" />
				<el-table-column label="客队" prop="awayTeamAbbName" />
				<el-table-column label="固定奖金" prop="matchId">
					<template #default="scope">
						<!-- <el-button link type="primary" @click="handleJumpLink(scope.row)">查看</el-button> -->
						<el-popover placement="bottom" :width="360">
							<template #reference> 
								<el-button link type="primary" @dblclick="handleJumpLink(scope.row)">查看</el-button>
							</template>
							<template #default> 
								<div>
									<el-table border :data="scope.row.matchResults">
										<el-table-column label="游戏" prop="matchNumStr">
											<template #default="item">
												{{ item.row.codeName }}
											</template>
										</el-table-column>
										<el-table-column label="开赛结果" prop="reportSatus">
											<template #default="item"> 
												<el-tag type="error">{{ item.row.combinationDesc }}</el-tag>
											</template>
										</el-table-column>
										<el-table-column label="奖金" prop="matchNumStr">
											<template #default="item">
												{{ item.row.odds }}
											</template>
										</el-table-column>
									</el-table>
								</div>
							</template>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="比赛开始时间" align="center" prop="matchDateTime">
					<template #default="scope">
						<span>{{ parseTime(scope.row.matchDateTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="报告状态" prop="reportSatus">
					<template #default="scope">
						<el-tag v-if="scope.row.reportSatus === 1" type="success">已生成</el-tag>
						<el-tag v-else>未生成</el-tag>	
					</template>
				</el-table-column>
				<el-table-column label="U-HA模型" align="center" class-name="small-padding fixed-width">
					<template #header>
						<span>U-HA模型</span>
						<el-popover placement="top" width="300" trigger="click">
						<template #reference>
							<el-icon class="ml-1 cursor-pointer" style="vertical-align: middle;">
							<QuestionFilled />
							</el-icon>
						</template>
						<template #default>
							<div>
								<p>Margin模型是机构保证稳定盈利的模型之一，根据模型的波动走向、同赔倾向等特点，再加上百万赛事信息的数据整理，及独有情报信息，绘制出赛事趋势走向，推演赛果走向</p>
							</div>
						</template>
						</el-popover>
					</template>
					<template #default="scope">
						<span :class="['flex-row cursor-pointer tc-view-time', scope.row.reportSatus != 1 && 'tc-view-time-disabled']"   @click="handleView(scope.row)">
							分析结果<br/>
							{{ scope.row.reportSatus === 1? timerToStr(scope.row.reportTime, 'HH:mm') : '待' }}更新
						</span>
						<!-- <el-tooltip content="查看" placement="top" v-if="scope.row.roleId !== 1">
							<el-button link type="primary" icon="view" @click="handleView(scope.row)"></el-button>
						</el-tooltip> -->
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区域 -->
			<pagination 
			:show="total > 0"
			:total="total" 
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" 
			@pagination="getList" />
		</div>
		<lz-page-empty v-else-if="!loading" :type="'2'">
			<lz-svg-icon icon-class="empty2" style="font-size: 312px;"/>
		</lz-page-empty>
	</div>
</template>

<script setup>
import { Info, infoSelectDistinctLeagueAbbNames } from "@/api/tc/eventAnalysisReport"
import { jumpLink } from "@/utils/tc"
import { timerToStr } from "@/utils/timer"
import { processMatchResults } from "@/utils/tc"
import { onActivated } from "vue"
import { PickerOptions } from "@/enums/tc"

const router = useRouter()
const { proxy } = getCurrentInstance()
const pageList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
// const dateRange = ref([])

/** 数据范围选项*/
const dataScopeOptions = ref([])

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		matchNumStr: undefined,
		leagueAbbName: undefined,
		weekday: undefined,
	},
	rules: {},
})



const { queryParams } = toRefs(data)

// 处理星期选择变化
function handleWeekdayChange(value) {
  // 当用户通过快捷选项选择星期时触发
  handleQuery();
}

/** 查询角色列表 */
function getList() {
    loading.value = true
	const data = { ...queryParams.value }
	// if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
	// 	data.beginTime = dateRange.value[0]
	// 	data.endTime = dateRange.value[1]
	// } else {
	// 	data.beginTime = undefined
	// 	data.endTime = undefined
	// }
	Info(data).then(response => {
		const res = response.rows.map(item => ({ 
			...item, 
			matchResults: item.matchResults ? processMatchResults(item.matchResults): null 
		}));
		pageList.value = res	
		total.value = response.total
	}).finally(() => {
		loading.value = false
	})
}


/** 获取联赛类型 */
function getLeagueAbbNames() {
	infoSelectDistinctLeagueAbbNames().then(response => {
		dataScopeOptions.value = response.rows ? response.rows.map(item => ({ value: item, label: item })) : []
	})
}

/** 跳转链接 */
function handleJumpLink(row) {
	jumpLink(row.matchId, 1)
}

/** 查看详情 */
function handleView(row) {
	if (row.reportSatus != 1) {
		return
	}
	// window.open(window.location.origin + '/#/tc/eventAnalysisReport/detail?id=' + row.matchId)
	router.push({
		path: '/tc/eventAnalysisReport/detail',
		query: {
			id: row.matchId
		}
	})
}


/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1
	getList()
}

/** 重置按钮操作 */
function resetQuery() {
	// dateRange.value = []
	proxy.resetForm("queryRef")
	handleQuery()
}

onMounted(() => {
	// 联赛类型
	getLeagueAbbNames()
	// 列表查询
	getList()
})

onActivated(() => {
    getList()
})

</script>