<template>
	<div class="game-order-container">
		<el-card shadow="hover">
			<div class="game-order-search mb15">
				<el-form :inline="true">
					<el-form-item label="渠道" prop="channel">
						<el-select v-model="tableData.param.channel" class="m-2" placeholder="选择渠道">
							<el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="选择区服" prop="server">
						<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px">
							<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-select v-model="tableData.param.server" class="m-2" placeholder="选择区服" clearable filterable>
							<el-option v-for="item in switchServer()" :key="item.id + ''" :label="item.name" :value="item.id + ''" />
						</el-select>
					</el-form-item>
					<el-form-item label="uid">
						<el-input size="default" v-model="tableData.param.uid" placeholder="请输入uid" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="起始时间" prop="lowTime">
						<el-date-picker
							type="datetime"
							size="large"
							v-model="tableData.param.cTime"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
					<el-form-item label="终止时间" prop="time">
						<el-date-picker type="datetime" v-model="tableData.param.eTime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
					</el-form-item>
					<el-form-item label="订单id">
						<el-input size="default" v-model="tableData.param.tradeNo" placeholder="请输入渠道订单id" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="操作人员">
						<el-input size="default" v-model="tableData.param.config" placeholder="请输入操作人员" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="操作人员">
						<el-input size="default" v-model="tableData.param.user" placeholder="请输入操作人员" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="orderList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%" border>
				<el-table-column prop="tradeNo" label="订单id" show-overflow-tooltip></el-table-column>
				<el-table-column prop="unitId" label="id" show-overflow-tooltip></el-table-column>
				<el-table-column prop="amount" label="金额（元）" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="createTime" label="充值时间" show-overflow-tooltip width="180"></el-table-column>
				<el-table-column prop="remark" label="状态" show-overflow-tooltip width="120">
					<template #default="scope">
						<div v-if="scope.row.remark == ''" style="color: #e60000">充值失败</div>
						<div v-else-if="scope.row.remark == 'SUCCESS'">充值成功</div>
						<div v-else>{{ scope.row.remark }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="channel" label="渠道" show-overflow-tooltip width="120">
					<template #default="scope">
						<span>{{ channels.find((r) => r.value == scope.row.channel)?.label }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="server" label="区服" show-overflow-tooltip width="120">
					<template #default="scope">
						<span>{{ servers.find((r) => r.id == scope.row.server).name }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-row justify="space-evenly">
				<el-pagination
					:hide-on-single-page="true"
					v-model:page-size="tableData.param.pageSize"
					v-model:current-page="tableData.param.pageNum"
					:pager-count="5"
					@current-change="orderList"
					layout="total, prev, pager, next"
					:total="tableData.total"
				/>
			</el-row>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import { gameRechargeChangeStateDelete, gmOrderList } from '/@/api/game';
import { allChannelList, ServerCategorize, serverList, ServerList } from '/@/utils/game';
import RechargeConfigCategory from '/@/api/config/RechargeConfigCategory.json';
import { ElMessage, ElMessageBox } from 'element-plus/es';
import { gSwitchServer } from '/@/utils/utils';

// 定义接口来定义对象的类型
interface TableData {
	id: string;
	CreateTime: string;
	CfgId: number;
	Rmb: number;
	SilverPiece: number;
	Identity: string;
	timeStr: string;
	uid: string;
	RealName: string;
	StringId: string;
}

interface TableDataState {
	serverSwitch: number;
	serverCategorize: object;
	tableData: {
		data: Array<TableData>;
		total: number;
		param: {
			uid: number;
			channel: string;
			tradeNo: string;
			cTime: string;
			eTime: string;
			server: string;
			config: string;
			user: string;
			pageNum: number;
			pageSize: number;
		};
	};
	servers: object;
	channels: object;
	rechargeInfo: object[];
}

export default defineComponent({
	name: 'apiV1GameOrderOrderList',
	setup() {
		// const {proxy} = getCurrentInstance() as any;

		const state = reactive<TableDataState>({
			serverSwitch: 0,
			serverCategorize: ServerCategorize,
			tableData: {
				data: [],
				total: 0,
				param: {
					uid: '',
					channel: '',
					tradeNo: '',
					cTime: '',
					eTime: '',
					server: '',
					config: '',
					user: '',
					pageSize: 10,
					pageNum: 1,
				},
			},
			servers: ServerList,
			channels: [],
			rechargeInfo: RechargeConfigCategory,
		});

		const orderList = () => {
			gmOrderList(state.tableData.param).then((res) => {
				console.log(res);
				state.tableData.total = Number(res.data.total) || 0;
				state.tableData.data = res.data.list || [];
			});
		};
		// 页面加载时
		onMounted(() => {
			serverList().then((res) => {
				state.servers = res;
			});
			allChannelList().then((res) => {
				state.channels = res;
			});
		});

		const switchServer = () => {
			return gSwitchServer(state.serverSwitch, state.servers);
		};
		const changeState = (order: string, state: number, remark: string) => {
			if (state != 3 && state != 2) {
				return;
			}
			if (state == 3) {
				let mess = '是否确认订单失效？，点击确认后本条订单失效。';
				ElMessageBox.confirm(mess).then(() => {
					gameRechargeChangeStateDelete({ order: order, state: state }).then((res) => {
						if (res.data.data == 1) {
							ElMessage.success('发送成功');
						}
						orderList();
					});
				});
			} else if (state == 2) {
				ElMessageBox.prompt('请输入修改成功理由', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					inputErrorMessage: 'Invalid http request',
				}).then(({ value }) => {
					gameRechargeChangeStateDelete({ order: order, state: state, remark: remark + ', ' + value }).then((res) => {
						if (res.data.data == 1) {
							ElMessage.success('发送成功');
						}
						orderList();
					});
				});
			}
		};
		return {
			switchServer,
			orderList,
			changeState,
			...toRefs(state),
		};
	},
});
</script>
