<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="标记状态" prop="flagStatus">
				<el-select v-model="queryParams.flagStatus" @change="handleQuery" style="width: 240px" clearable placeholder="请选择标记状态">
					<el-option
						v-for="item in flagStatusOptions"
						: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" :loading="loading">查询</el-button>
				<el-button icon="Refresh" @click="resetQuery" :loading="loading">重置</el-button>
				
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
              </el-col>
              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

		<!--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-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="AI预测" prop="matchId">
					<template #default="scope">
						<el-popover placement="bottom" :width="360">
							<template #reference> 
								<el-button link type="primary">查看</el-button>
							</template>
							<template #default> 
								<div style="padding: 8px;">
									<el-radio-group v-model="activeName" style="margin-bottom: 10px">
										<el-radio-button value="FINYX_F">finyx-AI</el-radio-button>
										<el-radio-button value="D3_F">D3-index</el-radio-button>
									</el-radio-group>
									<div v-if="activeName === 'FINYX_F'">
										<el-table border :data="scope.row.farmatReportResults['FINYX_F']" :show-header="false">
											<el-table-column>
												<template #default="item">
													{{ item.row.lable }}
												</template>
											</el-table-column>
											<el-table-column>
												<template #default="item"> 
													{{ item.row.value || '-' }}
												</template>
											</el-table-column>
										</el-table>
									</div>
									<div v-if="activeName === 'D3_F'">
										<el-table border :data="scope.row.farmatReportResults['D3_F']" :show-header="false">
											<el-table-column>
												<template #default="item">
													{{ item.row.lable }}
												</template>
											</el-table-column>
											<el-table-column>
												<template #default="item"> 
													{{ item.row.value || '-' }}
												</template>
											</el-table-column>
										</el-table>
									</div>
								</div>
							</template>
						</el-popover>
					</template>
				</el-table-column>
                <el-table-column label="结果标记" align="center" class-name="small-padding fixed-width">
					<template #default="scope">
						<el-button 
							v-if="showBtn(scope.row, 'FINYX_F')" 
							link 
							type="primary" 
							icon="Edit" 
							@click="openDialog(scope.row, 'FINYX_F')" 
							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'FINYX_F' ? 'has-active' : '']"
						>finyx-AI</el-button>
						<el-button 
							v-if="showBtn(scope.row, 'D3_F')" 
							link 
							type="primary" 
							icon="Edit" 
							@click="openDialog(scope.row, 'D3_F')"
							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'D3_F' ? 'has-active' : '']"
						>D3-index</el-button>
					</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>


		<!-- 修改对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialogOpen" width="600px" append-to-body>
			<Prediction :data="dialogForm"  type="edit" v-if="dialogOpen" @submit="submitForm" ref="editHadRef"/>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="OperationReport">
import { Info, infoSelectDistinctLeagueAbbNames, reportResultUpdate } from "@/api/tc/eventAnalysisReport"
import { jumpLink } from "@/utils/tc"

import { processMatchResults } from "@/utils/tc"
import Prediction from "@/views/operation/report/components/Prediction.vue"

import { ref } from "vue"

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 editHadRef = ref(null)
const activeName = ref('FINYX_F')
const matchIdType = ref({ id: '', type: '' })

const dialogOpen = ref(false)
const dialogTitle = ref('标记')
const dialogForm = ref({})

/** 数据范围选项*/
const dataScopeOptions = ref([])
const flagStatusOptions = ref([
	{  value: 1, label: '已标记' },
	{  value: 0, label: '未标记' },
])

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

const { queryParams } = toRefs(data)


function rowPrediction(row, modelType) {
	return row.reportResults && row.reportResults.find(el => el.modelType === modelType) || {}
}

function showBtn(row, type) {
	// 判断reportResults是否存在，不存在则返回false
	if(!row.reportResults) {
		return false
	}
	if(row.reportResults.find(el => el.modelType === type)) {
		return true
	}
	return false
}


/** 导出按钮操作 */
function handleExport() {
	//   proxy.download("system/user/export", {
	//     ...queryParams.value,
	//   },`user_${new Date().getTime()}.xlsx`)
}

/** 提交表单 */
function submitForm() {
	const data = editHadRef.value.getFormData()
	reportResultUpdate(data).then(response => { 
		proxy.$message.success(response.msg)
		getList()
	}).finally(() => { 
		dialogOpen.value = false
	})
}

/** 取消按钮 */
function cancel() {
	dialogOpen.value = false
	dialogForm.value = {}
}

function openDialog(row, type='') { 
	if(row && row.reportResults && type){
		dialogForm.value = row.reportResults.find(el => el.modelType === type)
		dialogOpen.value = true
		dialogTitle.value = ' 标记 ' + row.matchNumStr + ' ' + type+ '模型'
		matchIdType.value = { id: row.matchId, type: type }
	}
}

/** 获取联赛类型 */
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 reportResultsModelType(arr){
	const res = {}
	arr.forEach(item => {
		res[item.modelType] = [
			{
				lable: '胜平负',
				value: item.result,
				key: 'result'	
			},
			{
				lable: '让分胜平负',
				value: item.hhadResult,
				key: 'hhadResult'	
			},
			{
				lable: '比分',
				value: item.scoreResult,
				key: 'scoreResult'
			},
			{
				lable: '进球数',
				value: item.goalsResult,
				key: 'goalsResult'
			},
			{
				lable: '半全场',
				value: item.halfFullResult,
				key: 'halfFullResult'
			},
			{
				lable: '亚盘',
				value: item.asianHandicap,
				key: 'asianHandicap'
			}
		]
	})
	return res;
}
function farmatReportResults(list) {
	const res = list.map(item => ({ 
		...item, 
		farmatReportResults: item.reportResults ? reportResultsModelType(item.reportResults): {} 
	}));
	return res;
}

/** 查询列表 */
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 
		}));
		// 格式化reportResults
		pageList.value = farmatReportResults(res)
		console.log(pageList.value)	
		total.value = response.total
	}).finally(() => {
		loading.value = false
	})
}

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

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

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