<template>
	<a-card :bordered="false" class="xn-mb10">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item name="searchKey" :label="$t('common.searchKey')">
						<a-input v-model:value="searchFormState.searchKey" :placeholder="'请输入姓名或账号'" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="userStatus" :label="$t('user.userStatus')">
						<a-select
							v-model:value="searchFormState.userStatus"
							:placeholder="$t('user.placeholderUserStatus')"
							:getPopupContainer="(trigger) => trigger.parentNode"
						>
							<a-select-option v-for="item in statusData" :key="item.value" :value="item.value">{{
								item.label
							}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-button type="primary" @click="tableRef.refresh(true)">
						<template #icon><SearchOutlined /></template>
						查询
					</a-button>
					<a-button class="snowy-button-left" @click="reset">
						<template #icon><redo-outlined /></template>
						重置
					</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table ref="tableRef" :columns="columns" :data="loadData" bordered :row-key="(record) => record.id">
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'serial'">
					{{ index + 1 }}
				</template>
				<template v-if="column.dataIndex === 'gender'">
					<span v-if="record.gender !== null">
						{{ $TOOL.dictTypeData('GENDER', record.gender) }}
					</span>
				</template>
				<template v-if="column.dataIndex === 'userStatus'">
					<a-tag :color="record.userStatus === 'ENABLE' ? 'blue' : 'pink'">{{
						$TOOL.dictTypeData('COMMON_STATUS', record.userStatus)
					}}</a-tag>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a @click="formRef.onOpen(record)" v-if="hasPerm('bizUserEdit')">余额调整</a>
					<a-divider type="vertical" v-if="hasPerm('bizUserConsumption')"/>
					<a @click="consumptionRef.onOpen(record)" v-if="hasPerm('bizUserConsumption')">消费结算</a>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh()" />
	<Consumption ref="consumptionRef" @successful="tableRef.refresh()" />
</template>
<script setup name="bizUser">
	import tool from '@/utils/tool'
	import bizUserApi from '@/api/biz/bizUserApi'
	import Form from "./form.vue";
	import Consumption from './consumption.vue'

	const consumptionRef = ref()

	const columns = [
		{
			title: '序号',
			dataIndex: 'serial',
			align: 'center',
			width: 50
		},
		{
			title: '账号',
			dataIndex: 'account',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '姓名',
			dataIndex: 'name',
			width: 120,
			align: 'center',
		},
		{
			title: '性别',
			dataIndex: 'gender',
			align: 'center',
			width: 80
		},
		{
			title: '手机',
			dataIndex: 'phone',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '账户余额',
			dataIndex: 'accountBalance',
			width: 80,
			align: 'center',
		},
		{
			title: '代金券余额',
			dataIndex: 'voucherBalance',
			width: 80,
			align: 'center',
		},
		{
			title: '状态',
			dataIndex: 'userStatus',
			align: 'center',
			width: 80
		}
	]
	if (hasPerm(['balanceAdjustment'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		})
	}
	const statusData = tool.dictList('COMMON_STATUS')
	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref(null)
	const formRef = ref(null)
	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		return bizUserApi.memberPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			return res
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</script>

<style scoped>
	.snowy-button-left {
		margin-left: 8px;
	}
</style>
