<template>
	<div class="game-order-container">
		<el-card shadow="hover">
			<div class="game-order-search mb15">
        <el-form>
        <el-form-item  label="查询类型:" prop="type">
          <el-radio-group v-model="tableData.param.searchType">
            <el-radio :label=1>账号查询</el-radio>
            <el-radio :label=2>桃谷uid查询</el-radio>
            <el-radio :label=3>时间段查询</el-radio>
            <el-radio :label=4>渠道订单号查询</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-form>
        <el-form :inline="true" v-if="tableData.param.searchType==1">
          <el-form-item label="账号">
            <el-input size="default" v-model="tableData.param.account" placeholder="请输入账号" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="选择渠道" prop="serverId">
            <el-select v-model="tableData.param.channel" class="m-2" placeholder="选择渠道" size="large">
              <el-option  v-for="item in channels"  :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" v-if="tableData.param.searchType==2" >
          <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="serverId">
            <el-select v-model="tableData.param.serverId" class="m-2" placeholder="选择区服" size="large">
              <el-option  v-for="item in servers"  :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" v-if="tableData.param.searchType==3">
          <el-form-item   label="起始时间" prop="lowTime">
            <el-date-picker type="datetime" size="large" v-model="tableData.param.lowTime"    format="YYYY/MM/DD HH:mm:ss" value-format="x" />
          </el-form-item>

          <el-form-item   label="终止时间" prop="time">
            <el-date-picker   type="datetime" v-model="tableData.param.uptime"      format="YYYY/MM/DD HH:mm:ss" value-format="x" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" v-if="tableData.param.searchType==4">
          <el-form-item label="渠道订单id">
            <el-input size="default" v-model="tableData.param.orderId" placeholder="请输入渠道订单id" class="w-50 m-2" clearable/>
          </el-form-item>
          </el-form>
          <el-form>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="roleList">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
        <el-table-column type="index" label="id" width="60" />
        <el-table-column prop="uid" label="桃谷uid" show-overflow-tooltip></el-table-column>
				<el-table-column prop="server" label="区服" show-overflow-tooltip></el-table-column>
				<el-table-column prop="money" label="充值数额" show-overflow-tooltip></el-table-column>
				<el-table-column prop="timestampStr" label="充值时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rechargeId" label="商品id" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="orderId" label="订单id(渠道产生)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="stateStr" label="订单状态" show-overflow-tooltip></el-table-column>
<!--				<el-table-column label="操作" width="100">-->
<!--					<template #default="scope">-->
<!--						<el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改名字</el-button>-->
<!--						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>-->
<!--					</template>-->
<!--				</el-table-column>-->
			</el-table>
      <pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="roleList"
      />
		</el-card>
		<EditRole ref="editRoleRef" @getRoleList="roleList"/>
	</div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted,  defineComponent, } from 'vue';
//import { ElMessageBox, ElMessage } from 'element-plus';
import {gameOrderList} from "/@/api/game";
import {ServerList} from "/@/utils/game";
import {ChannelList} from "/@/utils/game";
// 定义接口来定义对象的类型
interface TableData {
  id:string
  uid:number;
	server: number;
	money: number;
  timestamp: number; //订单时间
  rechargeId: number;
  createTime:string;
  orderId: string;
  state:number;
  stateStr:string;
  timestampStr:string;
}
interface TableDataState {
	tableData: {
		data: Array<TableData>;
    param: {
      searchType:number
      id:string;
      orderId:string
      serverId:number
      uid:number
      account: string;
      channel:string
      lowTime:number
      uptime:number
    };

	};
  servers:object;
  channels:object;
}

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

		const state = reactive<TableDataState>({
			tableData: {
				data: [],
        param:{
          searchType:0,
          id:"",
          orderId:"",
          serverId:0,
          uid:0,
          account:"",
          channel:"",
          lowTime:0,
          uptime:0

        },

			},
      servers:ServerList,
      channels:ChannelList,
		});
		// 初始化表格数据
		// const initTableData = () => {
		// 	roleList()
		// };
    const roleList = ()=>{
      const data: Array<TableData> = [];
      gameOrderList(state.tableData.param).then(res=>{
        const list = res.data.list??[]
        list.map((item:TableData)=>{

          data.push({
            id:item.id,
            uid:item.uid,
            server: item.server,
            money: item.money,
            timestamp: item.timestamp,
            rechargeId: item.rechargeId,
            createTime:new Date(item.createTime).toLocaleString(),
            orderId:item.orderId,
            state:item.state,
            stateStr:GetStateStr(item.state),
            timestampStr:new Date(item.timestamp*1000).toLocaleString()
          });
        })
        state.tableData.data = data;
      })
    };

    function GetStateStr(s:number){
      if (s==2){
        return "成功"
      }
      return "失败(错误id="+s+")"
    }

		// // 分页改变
		// const onHandleSizeChange = (val: number) => {
		// 	state.tableData.param.pageSize = val;
		// };
		// // 分页改变
		// const onHandleCurrentChange = (val: number) => {
		// 	state.tableData.param.pageNum = val;
		// };
		// 页面加载时
		onMounted(() => {
		//	initTableData();
		});
		return {

			//onHandleSizeChange,
			//onHandleCurrentChange,
      roleList,
			...toRefs(state),
		};
	},
});
</script>
