<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 #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="addUserRef.onOpen()" v-if="hasPerm('customerAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<a-button @click="ImpExpRef.onOpen()" style="margin-left:10px" v-if="hasPerm('customerImport')">
						<template #icon><ImportOutlined /></template>
						导入
					</a-button>
				</a-space>
			</template>
			<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-switch
						:loading="loading"
						:checked="record.userStatus === 'ENABLE'"
						@change="editStatus(record)"
						v-if="hasPerm('bizUserUpdataStatus')"
					/>
					<a-tag v-else :color="record.userStatus === 'ENABLE' ? 'blue' : 'pink'">{{
							$TOOL.dictTypeData('COMMON_STATUS', record.userStatus)
						}}</a-tag>
<!--					<span v-else>{{ $TOOL.dictTypeData('COMMON_STATUS', record.userStatus) }}</span>-->
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a @click="addUserRef.onOpen(record)" v-if="hasPerm('customerEdit')">编辑</a>
					<a-divider type="vertical" v-if="hasPerm('customerEdit') "/>
					<a @click="formRef.onOpen(record)" v-if="hasPerm('bizUserEdit') && record.userStatus == 'ENABLE'">余额调整</a>
					<a-divider type="vertical" v-if="hasPerm('bizUserConsumption') && record.userStatus == 'ENABLE'"/>
					<a @click="consumptionRef.onOpen(record)" v-if="hasPerm('bizUserConsumption') && record.userStatus == 'ENABLE'">消费结算</a>
					<a-divider type="vertical" v-if="hasPerm('giftCoupon') && record.userStatus == 'ENABLE'"/>
					<a @click="couponRef.onOpen(record)" v-if="hasPerm('giftCoupon') && record.userStatus == 'ENABLE'">赠送蛋糕券</a>
<!--					<a-divider type="vertical" v-if="hasPerm('disableRecord') && record.userStatus == 'DISABLED'"/>-->
					<a @click="disableRef.onOpen(record)" v-if="hasPerm('disableRecord') && record.userStatus == 'DISABLED'">冻结记录</a>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh()" />
	<Consumption ref="consumptionRef" @successful="tableRef.refresh()" />
	<AddUserRef ref="addUserRef" @successful="tableRef.refresh()" />
	<ImpExp ref="ImpExpRef" @successful="tableRef.refresh()" />
	<DisableRef ref="disableRef" @successful="tableRef.refresh()" />
	<CouponRef ref="couponRef" @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'
	import AddUserRef from './addUser.vue'
	import ImpExp from './impExp.vue'
	import DisableRef from './disable.vue'
	import CouponRef from './coupon.vue'

	const consumptionRef = ref()
	const loading = ref(false)
	const addUserRef = ref()
	const ImpExpRef = ref()
	const disableRef = ref()
	const couponRef = 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
		}
	]

	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: 200
	})

	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)
	}

	// 修改状态
	const editStatus = (record) => {
		loading.value = true
		if (record.userStatus === 'ENABLE') {
			bizUserApi
				.userDisableCustomer(record)
				.then(() => {
					tableRef.value.refresh()
				})
				.finally(() => {
					loading.value = false
				})
		} else {
			bizUserApi
				.userEnableUser(record)
				.then(() => {
					tableRef.value.refresh()
				})
				.finally(() => {
					loading.value = false
				})
		}
	}
</script>

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