<template>
	<div>
		<!-- 搜索区域 -->
		<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>
				<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格数据 -->
		<el-table v-loading="loading" :data="roleList">
			<el-table-column label="赛事编号" prop="matchNumStr" />
			<el-table-column label="联赛" prop="awayTeamAllName" :show-overflow-tooltip="true" />
			<el-table-column label="主队" prop="homeTeamAllName" :show-overflow-tooltip="true" />
			<el-table-column label="客队" prop="awayTeamAllName"/>
			<el-table-column label="固定奖金" prop="matchId" >
				<template #default="scope">
					<el-button link type="primary" @click="handleJumpLink(scope.row)">查看</el-button>
				</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="matchStatus"/>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<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>
</template>

<script setup name="Role">
import { bbInfo, bbInfoSelectDistinctLeagueAbbNames } from "@/api/tc/eventAnalysisReport"
import { jumpLink } from "@/utils/tc"
import { onMounted } from "vue"

const router = useRouter()
const { proxy } = getCurrentInstance()
const roleList = ref([])
const loading = ref(true)
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,
	},
	rules: {},
})

const { queryParams } = toRefs(data)

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

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

/** 查看详情 */
function handleView(row) {
	router.push({
		path: '/tc/videoScript/detail',
		query: {
			id: row.matchId
		}
	})
}

/** 查询角色列表 */
function getList() {
	loading.value = true
	bbInfo(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
		roleList.value = response.rows
		total.value = response.total
	}).finally(() => {
		loading.value = false
	})
}

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

/** 重置按钮操作 */
function resetQuery() {
	dateRange.value = []
	proxy.resetForm("queryRef")
	handleQuery()
}
onMounted(() => {
	// 联赛类型 
	getLeagueAbbNames()
	// 列表查询
	getList()
})
</script>
