<template>
	<div class="app-container">
		<!-- 列表 -->
		<!-- 搜索 -->
		<page-search ref="searchRef" :search-config="searchConfig" @query-click="searchQueryClick"
			@reset-click="handleResetClick" />
		<div class="head-container">
			<div class="card">
				<!-- <div class="title">统计数据</div> -->
				<div class="row">
					<div class="item">
						<div class="t">用户数量</div>
						<div class="n">{{ summary.userTotal || 0 }}</div>
					</div>
					<div class="item">
						<div class="t">用户总余额</div>
						<div class="n">{{ summary.balanceTotal || 0 }}</div>
					</div>
					<div class="item">
						<div class="t">充值金额</div>
						<div class="n">{{ summary.chargeTotal || 0 }}</div>
					</div>
					<div class="item u-flex u-col-center">
						<el-button type="success" @click="toCharge()">充值记录</el-button>
						<!-- <el-button type="danger" @click="toCharge('cost')">消费记录</el-button> -->
					</div>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
			@edit-click="handleEditClick" @export-click="handleExportClick" @upload-click="" @search-click="handleSearchClick"
			@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
			<template #custom>
				<importData ref="importDataRef" :type="6" @close="searchQueryClick" />
			</template>
			<template #status="scope">
				<el-link :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
					{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
				</el-link>
			</template>
			<template #options="scope">
				{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
			</template>
			<template #bol="scope">
				<el-tag disable-transitions type="primary" v-if="scope.row.isVip" @click="showVipInfoHandle(scope.row)"
					style="cursor: pointer;">
					{{ scope.row.memberLevelName }}
				</el-tag>
				<span v-else>否</span>
			</template>
			<template #gender="scope">
				<el-tag :type="scope.row[scope.prop] == null
					? 'info'
					: scope.row[scope.prop] == 1
						? 'success'
						: 'warning'
					">
					{{
						scope.row[scope.prop] === null
							? "未知"
							: scope.row[scope.prop] == 1
								? "男"
								: "女"
					}}
				</el-tag>
			</template>
			<template #user="scope">
				<div class="flex align-center">
					<el-avatar :src="scope.row.headImg" />
					<span class="u-line-1 u-m-l-6" style="max-width: 90px">
						{{ scope.row.nickName }}
					</span>
				</div>
			</template>
			<template #link="scope">
				<el-link>{{ scope.row[scope.prop] }}</el-link>
			</template>
			<template #mobile="scope">
				<el-text>{{ scope.row[scope.prop] }}</el-text>
				<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
			</template>

			<template #coupon="scope">
				<div>
					{{ scope.row.couponNum }}张
					<el-link :underline="false" type="primary" @click="handleViewCoupon(scope.row)">
						查看详情
					</el-link>
				</div>
			</template>
		</page-content>

		<!-- 新增 -->
		<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick"></page-modal>

		<!-- 编辑 -->
		<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick"></page-modal>
		<!-- 用户余额修改 -->
		<page-modal ref="editMoneyModalRef" :modal-config="editMoneyModalConfig" @formDataChange="formDataChange"
			@submit-click="handleSubmitClick"></page-modal>

		<!-- 用户优惠券详情 -->
		<UserCouponDialog ref="userCouponDialogRef"></UserCouponDialog>
		<!-- 赠送券 -->
		<GiveCoupon ref="GiveCouponRef"></GiveCoupon>
		<el-dialog :title="`账号${userRow.status == 0 ? '开启' : '禁用'}`" width="600px" v-model="visible">
			<span>确定要{{ userRow.status == 0 ? '开启' : '禁用' }}【{{ userRow.nickName }} / {{ userRow.phone }}】账号吗？</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" @click="handleOk" :loading="confirmLoading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 会员详情 -->
		<el-dialog title="会员详情" width="600px" v-model="vipDialogVisable">
			<div class="vip_info">
				<div class="top">
					<el-avatar :src="currentVipInfo.headImg" :size="60" shape="square"></el-avatar>
					<div class="info">
						<div class="name">{{ currentVipInfo.nickName }}</div>
						<div class="id">ID：{{ currentVipInfo.id }}</div>
					</div>
				</div>
				<div class="btm">
					<div class="row">
						<span class="row_t">会员等级：</span>
						<span class="row_b">{{ currentVipInfo.memberLevelName }}</span>
					</div>
					<div class="row">
						<span class="row_t">开通时间：</span>
						<span class="row_b">{{ currentVipInfo.startTime }}</span>
					</div>
					<div class="row">
						<span class="row_t">到期时间：</span>
						<span class="row_b" style="color: #FF2F2F;">{{ currentVipInfo.endTime }}</span>
					</div>
					<div class="row">
						<span class="row_t">成长值</span>
						<span class="row_b" style="margin-left: 6px;">{{ currentVipInfo.experience }}</span>
						<span class="tips" v-if="currentVipInfo.nextMemberLevelName">（距离{{ currentVipInfo.nextMemberLevelName }}还差{{
							currentVipInfo.nextExperience }}）</span>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import importData from "@/components/importData/index.vue";
import UserCouponDialog from "./components/user-coupon-dialog.vue";
import GiveCoupon from "./components/give-coupon.vue";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import editModalConfig from "./config/edit";
import editMoneyModalConfig, { addOptions, reduceOptions } from "./config/edit-money";
import searchConfig from "./config/search";
import { returnOptionsLabel } from "./config/config";
import shopUserApi from "@/api/account/shopUser";
import { useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { downloadFile } from "@/utils/index";

const editMoneyModalRef = ref(null);
const userCouponDialogRef = ref(null);
const GiveCouponRef = ref(null);
//查看用户优惠券
function handleViewCoupon(row) {
	userCouponDialogRef.value.open(row);
}
const {
	searchRef,
	contentRef,
	addModalRef,
	editModalRef,
	handleQueryClick,
	handleResetClick,
	// handleAddClick,
	// handleEditClick,
	handleSubmitClick,
	// handleExportClick,
	handleSearchClick,
	handleFilterChange,
} = usePage();

function searchQueryClick(e) {
	console.log(e);


	handleQueryClick(e);
	// 获取统计数据
	getSummary();
}
const summary = reactive({
	userTotal: 0,
	chargeTotal: 0,
	balanceTotal: 0.0,
});

const router = useRouter();
// 跳转页面
function toCharge(params) {
	console.log(params);
	router.push({ path: "/user/charge-list", query: { ...params } });
}
async function getSummary(e) {
	// 获取统计数据
	const res = await shopUserApi.getSummary(e);
	console.log(res);
	Object.assign(summary, res);
}
// 修改金额表单类型
function formDataChange(type, val) {
	if (type == "type") {
		if (val == 1) {
			editMoneyModalConfig.formItems[4].options = addOptions;
		} else {
			editMoneyModalConfig.formItems[4].options = reduceOptions;
		}
	}
}

// 导出
async function handleExportClick() {
	try {
		const file = await shopUserApi.export(searchRef.value.getQueryParams());
		downloadFile(file, "用户列表", "xlsx");
	} catch (error) {
		console.log(error);
	}
}

// 新增
async function handleAddClick() {
	addModalRef.value?.setModalVisible();
	// 加载部门下拉数据源
	// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
	// 加载角色下拉数据源
	// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row) {
	editModalRef.value?.handleDisabled(false);
	editModalRef.value?.setModalVisible();
	// 根据id获取数据进行填充
	// const data = await VersionApi.getFormData(row.id);
	editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
}

// 其他工具栏
function handleToolbarClick(name) {
	console.log(name);
	if (name === "custom1") {
		ElMessage.success("点击了自定义1按钮");
	} else if (name === "upload") {
		importDataRef.value.show()
	}
}

// 账号禁用 start
const userRow = ref('')
const visible = ref(false)
const confirmLoading = ref(false)

async function handleOk() {
	try {
		confirmLoading.value = true
		const shopId = localStorage.getItem('shopId')
		let state = 0
		if (userRow.value.status == 0) {
			state = 1
		} else {
			state = 0
		}
		await shopUserApi.edit(shopId, { id: userRow.value.id, status: state })
		searchQueryClick()
		ElNotification({
			title: '注意',
			message: `${userRow.value.status == 0 ? '开启' : '禁用'}成功`,
			type: 'success'
		})
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		confirmLoading.value = false
		visible.value = false
	}, 300);
}
// 账号禁用 end

// 会员详情 start
const vipDialogVisable = ref(false)
const currentVipInfo = ref('')
const currentVipUser = ref('')
function showVipInfoHandle(row) {
	currentVipUser.value = { ...row }
	vipDialogVisable.value = true
	getUserVipInfo()
}

// 获取会员详情
async function getUserVipInfo() {
	try {
		const res = await shopUserApi.vipInfo({ id: currentVipUser.value.id })
		currentVipInfo.value = res
		console.log('getUserVipInfo===', res);

	} catch (error) {
		console.log(error);
	}
}
// 会员详情 end

// 赠送券
function toGiveCoupon() { }
// 其他操作列
async function handleOperatClick(data) {
	const row = data.row;
	if (data.name == "more") {
		if (data.command === "change-money") {
			editMoneyModalRef.value.setModalVisible();
			editMoneyModalRef.value.setFormData({
				...row,
				headImg: row.headImg ? [row.headImg] : "",
			});
			return;
		}
		if (data.command === "charge-list") {
			console.log(data);
			toCharge({ userId: data.row.userId });
			return;
		}
		if (data.command === "give-coupon") {
			GiveCouponRef.value.open(row);
			return;
		}
		if (data.command === 'user-disabld') {
			userRow.value = { ...row }
			visible.value = true
			return
		}
		return;
	}
}

const route = useRoute()

onMounted(() => {
	if (route.query.phone) {
		searchQueryClick({
			key: route.query.phone
		})
	}
	getSummary(searchRef.value.getQueryParams());
});
</script>
<style scoped lang="scss">
.align-center {
	align-items: center;
}

.card {
	background-color: #f5f5f5;
	padding: 0 14px;

	.title {
		font-size: 22px;
		padding-top: 14px;
	}

	.row {
		display: flex;
		padding: 20px 0;

		.item {
			flex: 1;

			.t {
				text-align: center;
				color: #555;
			}

			.n {
				color: #000;
				font-size: 20px;
				font-weight: bold;
				padding-top: 6px;
				text-align: center;
			}
		}
	}
}

.vip_info {
	.top {
		padding: 14px;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;

		.info {
			padding-left: 10px;
			display: flex;
			flex-direction: column;

			.name {
				font-size: 16px;
				color: #333;
			}

			.id {
				font-size: 14px;
				color: #666;
			}
		}
	}

	.btm {
		margin-top: 14px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(auto, 1fr);
		grid-column-gap: 14px;
		grid-row-gap: 14px;

		.row {
			.row_t {
				color: #666;
			}

			.row_b {
				color: #333;
			}
		}
	}
}
</style>
