<template>
	<store-page-layout :title="pageTitle" :show-back="true">
		<view class="page">
			<view class="filter-panel">
				<input class="filter-input" v-model="filters.name" placeholder="诊所名称" />
				<input class="filter-input" v-model="filters.shouzimu" placeholder="拼音首字母" />
				<input class="filter-input" v-model="filters.mobile" placeholder="联系人手机号" />
				<view class="filter-btn" @click="reload">查询</view>
			</view>

			<view v-if="loading" class="empty">加载中...</view>
			<view v-else-if="!list.length" class="empty">暂无门店</view>

			<view
				v-for="item in list"
				:key="item.id"
				class="card"
				hover-class="card-hover"
				@click="goDetail(item)"
			>
				<view class="card-head">
					<text class="name">{{ item.name }}</text>
					<text class="type-tag">{{ clinicTypeText(item.clinic_type) }}</text>
				</view>
				<text class="addr">{{ item.position || '暂无地址' }}</text>
				<view class="meta-row">
					<text>ID {{ item.id }}</text>
					<text v-if="item.mobile">电话 {{ item.mobile }}</text>
				</view>
				<view class="tag-row">
					<text class="mini-tag" :class="{ on: Number(item.salesperson_see_price) === 1 }">推广员可见价格</text>
					<text class="mini-tag" :class="{ on: Number(item.is_shipping_free) === 1 }">包邮</text>
					<text v-if="Number(item.bank_card_report_status) === 0" class="mini-tag warn">需报备银行卡</text>
					<text v-else-if="item.bank_card_report_status_text" class="mini-tag bank">{{ item.bank_card_report_status_text }}</text>
				</view>
			</view>
		</view>
	</store-page-layout>
</template>

<script>
/**
 * 门店/诊所列表：超管看全量，业务员看自己推广码绑定的诊所
 */
import StorePageLayout from '@/subPackages/sub_platform_admin/components/store-page-layout.vue';
import { getStoreList, isSalespersonStoreMode } from '@/api/storeManage.js';

const ROOT = '/subPackages/sub_platform_admin/store';

export default {
	components: { StorePageLayout },
	data() {
		return {
			filters: { name: '', shouzimu: '', mobile: '' },
			list: [],
			loading: false,
			isSalesperson: false,
		};
	},
	computed: {
		pageTitle() {
			return this.isSalesperson ? '我的诊所' : '门店管理';
		},
	},
	onShow() {
		this.isSalesperson = isSalespersonStoreMode();
		this.reload();
	},
	methods: {
		clinicTypeText(type) {
			if (Number(type) === 1) return '西医诊所';
			if (Number(type) === 2) return '中医诊所';
			return '未设置';
		},
		async reload() {
			this.loading = true;
			try {
				const wrap = await getStoreList({
					page: 1,
					pageSize: 50,
					...this.filters,
				});
				const data = wrap && wrap.ok ? wrap.data : null;
				if (data && Array.isArray(data.items)) {
					this.list = data.items;
				} else if (Array.isArray(data)) {
					this.list = data;
				} else {
					this.list = [];
				}
			} finally {
				this.loading = false;
			}
		},
		goDetail(item) {
			uni.navigateTo({ url: `${ROOT}/detail?id=${item.id}` });
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.filter-panel { display: flex; flex-wrap: wrap; gap: 12rpx; margin-bottom: 20rpx; }
.filter-input {
	flex: 1; min-width: 200rpx; background: #fff; border-radius: 12rpx;
	padding: 16rpx 20rpx; font-size: 26rpx;
}
.filter-btn {
	background: #6ACDBB; color: #fff; padding: 16rpx 32rpx; border-radius: 12rpx; font-size: 26rpx;
}
.empty { text-align: center; color: #999; padding: 80rpx 0; font-size: 28rpx; }
.card {
	background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
}
.card-hover { opacity: 0.92; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx; }
.name { font-size: 30rpx; font-weight: 600; color: #1f2937; }
.type-tag { font-size: 22rpx; color: #6ACDBB; background: #f0fbf8; padding: 4rpx 12rpx; border-radius: 8rpx; }
.addr { display: block; font-size: 24rpx; color: #6b7280; margin-bottom: 12rpx; }
.meta-row { display: flex; gap: 24rpx; font-size: 22rpx; color: #9ca3af; margin-bottom: 12rpx; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8rpx; }
.mini-tag {
	font-size: 20rpx; padding: 4rpx 10rpx; border-radius: 6rpx;
	background: #f3f4f6; color: #9ca3af;
}
.mini-tag.on { background: #ecfdf5; color: #059669; }
.mini-tag.warn { background: #fef3c7; color: #d97706; }
.mini-tag.bank { background: #eff6ff; color: #3b82f6; }
</style>
