<template>
	<div class="app-container">
		<div class="head-container">
			<el-row :gutter="20">
				<el-col :span="3">
					<el-input
						v-model="state.query.name"
						clearable
						placeholder="请输入店铺名称"
						style="width: 100%"
						class="filter-item"
						@keyup.enter="getTableData"
					/>
				</el-col>
				<el-col :span="3">
					<el-input
						v-model="state.query.account"
						clearable
						placeholder="请输入商户号"
						style="width: 100%"
						class="filter-item"
						@keyup.enter="getTableData"
					/>
				</el-col>
				<el-col :span="3">
					<el-select
						v-model="state.query.status"
						placeholder="请选择店铺状态"
						style="width: 100%"
					>
						<el-option
							v-for="item in state.status"
							:key="item.type"
							:label="item.label"
							:value="item.type"
						/>
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" @click="getTableData">查询</el-button>
					<el-button @click="resetHandle">重置</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="head-container">
			<el-button type="primary" icon="plus" @click="addShopShow">添加店铺</el-button>
		</div>
		<div class="head-container">
			<el-table v-loading="state.tableData.loading" :data="state.tableData.list">
				<el-table-column label="店铺信息" width="200">
					<template v-slot="scope">
						<div class="shop_info">
							<el-image
								:src="scope.row.logo"
								style="
									width: 50px;
									height: 50px;
									border-radius: 4px;
									background-color: #efefef;
								"
							>
								<template #error>
									<div class="img_error">
										<i class="icon el-icon-document-delete" />
									</div>
								</template>
							</el-image>
							<div class="info">
								<span>{{ scope.row.shopName }}</span>
								<div class="tag_wrap">
									<el-tag
										v-if="scope.row.profiles == 'no'"
										type="info"
										effect="dark"
									>
										未激活
									</el-tag>
									<el-tag
										v-if="scope.row.profiles == 'probation'"
										type="warning"
										effect="dark"
									>
										试用
									</el-tag>
									<el-tag
										v-if="scope.row.profiles == 'release'"
										type="success"
										effect="dark"
									>
										正式
									</el-tag>
									<el-tag
										v-if="scope.row.isWxMaIndependent"
										type="primary"
										effect="dark"
									>
										独立小程序
									</el-tag>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="registerType" label="经营模式">
					<template v-slot="scope">
						<span v-if="scope.row.registerType == 'before'">快餐版</span>
						<span v-if="scope.row.registerType == 'after'">餐饮版</span>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="商户号" />
				<el-table-column prop="status" label="店铺类型" align="center">
					<template v-slot="scope">
						<div>
							<span v-if="scope.row.shopType == 'only'">单店</span>
							<span v-if="scope.row.shopType == 'chain'">连锁店</span>
							<span v-if="scope.row.shopType == 'join'">加盟店</span>
							<div v-if="scope.row.shopType != 'only' && scope.row.isHeadShop == 0">
								(主店：{{ scope.row.headShopName }})
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="店铺状态">
					<template v-slot="scope">
						<el-switch
							v-model="scope.row.status"
							:active-value="1"
							:inactive-value="0"
							disabled
						/>
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" label="到期时间">
					<template v-slot="scope">
						<span v-if="scope.row.expireTime">
							{{ dayjs(scope.row.expireTime).format("YYYY-MM-DD HH:mm:ss") }}
						</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="200">
					<template v-slot="scope">
						<el-link @click="addShopShow(scope.row)">
							<el-icon>
								<Edit />
							</el-icon>
							编辑
						</el-link>
						<el-link @click="activateCodeShow(scope.row)">
							<el-icon>
								<Edit />
							</el-icon>
							激活
						</el-link>
						<el-dropdown @command="dropdownClick($event, scope.row)">
							<el-link>
								更多
								<el-icon>
									<ArrowDown />
								</el-icon>
							</el-link>

							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item v-if="scope.row.isHeadShop == 1" :command="0">
										添加分店
									</el-dropdown-item>
									<el-dropdown-item :command="{ row: scope.row, command: 1 }">
										三方配置
									</el-dropdown-item>
									<el-dropdown-item :command="2">续费记录</el-dropdown-item>
									<el-dropdown-item :command="3">前往店铺</el-dropdown-item>
									<el-dropdown-item :command="4">重置密码</el-dropdown-item>
									<el-dropdown-item divided :command="5">删除</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="head-container">
			<el-pagination
				v-model:current-page="state.tableData.page"
				v-model:page-size="state.tableData.size"
				:total="state.tableData.total"
				:page-sizes="[10, 20, 30, 50, 100]"
				layout="total, sizes , prev, pager ,next, jumper "
				@current-change="paginationChange"
			/>
		</div>
		<addShop ref="refAddShop" @success="getTableData" />
		<detailModal ref="refDetailModal" />
		<!-- 激活码 -->
		<activateCode ref="refActivateCode" @success="getTableData" />
	</div>
</template>

<script setup>
import activateCode from "./components/activateCode.vue";
import dayjs from "dayjs";
import ShopApi from "@/api/account/shop";
import { ElNotification, ElMessageBox } from "element-plus";
import addShop from "./components/addShop.vue";
import detailModal from "./components/detailModal.vue";
const refActivateCode = ref(null);
function activateCodeShow(row) {
	refActivateCode.value.open(row);
}
const refAddShop = ref(null);
function addShopShow(row) {
	refAddShop.value.show(row);
}
const state = reactive({
	query: {
		name: "",
		account: "",
		status: "",
	},
	status: [
		{
			type: 1,
			label: "开启",
		},
		{
			type: 0,
			label: "关闭",
		},
	],
	tableData: {
		list: [],
		page: 1,
		size: 10,
		loading: false,
		total: 0,
	},
});
onMounted(() => {
	getTableData();
});

const refDetailModal = ref(null);
function dropdownClick(e, row) {
	console.log(e);
	console.log(row);
	if (e == 0) {
		refAddShop.value.show(
			{ mainId: row.id, shopType: row.shopType, isHeadShop: 0 },
			"addBranch"
		);

		return;
	}
	if (e.command == 1) {
		refDetailModal.value.show(e.row);
		return;
	}
	if (e == 5) {
		ElMessageBox.confirm("是否确认删除该店铺?", "提示", {
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning",
		})
			.then(async () => {
				const res = await ShopApi.delete({ id: row.id });
				ElMessage({
					type: "success",
					message: "删除成功",
				});
				getTableData();
			})
			.catch(() => {});
		return;
	}
}
// 重置查询
function resetHandle() {
	state.query.name = "";
	state.query.account = "";
	state.query.status = "";
	getTableData();
}
// 分页回调
function paginationChange(e) {
	state.tableData.page = e;
	getTableData();
}
// 获取商家列表
async function getTableData() {
	state.tableData.loading = true;
	try {
		const res = await ShopApi.getOtherShopList({
			page: state.tableData.page,
			size: state.tableData.size,
			shopName: state.query.name,
			account: state.query.account,
			status: state.query.status,
		});
		state.tableData.loading = false;
		state.tableData.list = res.records;
		state.tableData.total = res.totalRow * 1;
	} catch (error) {
		console.log(error);
	}
}
</script>

<style scoped lang="scss">
.head-container {
	margin-bottom: 20px;
}

.shop_info {
	display: flex;

	.info {
		flex: 1;
		padding-left: 4px;
	}
}

.el-link {
	min-height: 23px;
	margin: 0 5px;
}
</style>
