<template>
	<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
		<div class="page-body page-enter">

			<div class="service-brand-box brand-header-enter">
				<div class="uni-flex align-center brand-info-slide">
					<div class="band-name brand-name-slide">{{ pageMsg.ShopEndaccountList &&
						pageMsg.ShopEndaccountList.length > 0 ?
						pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div>
				</div>
				<div class="price-num price-count-up">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,
					2) : '0.00' }}</div>
			</div>
			<!--服务区门店分析-->
			<div style="margin-top: 0 20rpx;padding: 0 16rpx" class="shop-list-container">
				<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
					:i='i' :provinceCode='currentProvinceCode' class="shop-item-stagger"
					:style="'animation-delay: ' + (i * 0.1 + 0.8) + 's'" v-if="item"></shopCell>

			</div>
		</div>
	</div>
</template>

<script>
import shopCell from './components/listUnit.vue'
export default {
	data() {
		return {
			showPage: false,

			pageMsg: {
				ShopEndaccountList: [] // 初始化为空数组，确保响应式
			},
			currentProvinceCode: '', // 当前省份代码
			keyJson: {
				SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
				SHOWLESS_SIGN: { 1: '【短款】', 2: '【异常短款】' }, // 短款
				SHOWABNORMAL_SIGN: { 1: '【异常校验】' },  // 异常日结
				SHOWSCAN_SIGN: { 1: '【扫】' },  // 扫码上传
				SHOWSSUPPLY_SIGN: { 1: '【补】' }, // 账期补录
				SHOWCHECK_SIGN: { 1: '【稽核检查】' }, // 稽核检查
				INTERFACE_SIGN: { 1: '【接口传输】' }, // 接口传输
			}
		}
	},
	computed: {
		// 省份主题配色
		provinceTheme() {
			const themes = {
				'330200': { // 宁波
					primary: '#1890FF',
					secondary: '#69C0FF',
					background: '#E6F7FF',
					accent: '#40A9FF'
				},
				'340000': { // 安徽
					primary: '#748ED6',
					secondary: '#91A7E3',
					background: '#F0F4FF',
					accent: '#A3B8E8'
				},
				'500000': { // 重庆
					primary: '#FA541C',
					secondary: '#FF7A45',
					background: '#FFF2E8',
					accent: '#FF8C73'
				},
				'510000': { // 四川
					primary: '#FA8C16',
					secondary: '#FFA940',
					background: '#FFF7E6',
					accent: '#FFAB65'
				},
				'520000': { // 贵州
					primary: '#52C41A',
					secondary: '#73D13D',
					background: '#F6FFED',
					accent: '#7CB342'
				},
				'530000': { // 云南（保持原色）
					primary: '#27B25F',
					secondary: '#4CCC7F',
					background: '#F6FFED',
					accent: '#5CDB87'
				},
				'630000': { // 青海
					primary: '#13C2C2',
					secondary: '#36CFC9',
					background: '#E6FFFB',
					accent: '#5CDBD3'
				},
				'734100': { // 海南
					primary: '#E91E63',
					secondary: '#F06292',
					background: '#FCE4EC',
					accent: '#F48FB1'
				}
			}
			return themes[this.currentProvinceCode] || themes['530000'] // 如果找不到对应省份，使用云南配色
		}
	},
	components: {
		shopCell
	},
	methods: {
		// 初始化省份代码
		initProvinceCode(provinceId) {
			if (provinceId) {
				this.currentProvinceCode = provinceId
				console.log('设置省份主题:', provinceId)
				// 强制更新以应用新主题
				this.$forceUpdate()
			}
		},
		// 获取主题颜色（小程序兼容版本）
		getThemeColors() {
			return this.provinceTheme
		},
		toggleShow(i) {
			if (!this.pageMsg.ShopEndaccountList || !this.pageMsg.ShopEndaccountList[i]) {
				return
			}

			let currentItem = this.pageMsg.ShopEndaccountList[i]
			let newShowState = !currentItem.show

			// 使用Vue.set确保响应式更新
			this.$set(this.pageMsg.ShopEndaccountList, i, {
				...currentItem,
				show: newShowState
			})
		},


		getDetail(data) {
			let arr = []
			let keyJson = this.keyJson
			var keyCode = ['SHOWABNORMAL_SIGN', 'SHOWCHECK_SIGN', 'SHOWMORE_SIGN', 'SHOWLESS_SIGN', 'SHOWSCAN_SIGN', 'SHOWSSUPPLY_SIGN', 'INTERFACE_SIGN']
			keyCode.map(n => {

				if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]])

			})
			return arr
		},
		getBrandRevenue(obj) {
			let _this = this
			this.$request.$webGet('CommercialApi/Revenue/GetShopEndAccountList', {
				Serverpart_Id: obj.id,
				pushProvinceCode: obj.provinceId,
				Statistics_Date: obj.time,
				ServerpartShop_Ids: obj.shopid,
			}).then(res => {
				uni.hideLoading()
				if (res.Result_Code != 100) return

				// 处理数据，确保响应式属性正确设置
				res.Result_Data.ShopEndaccountList.forEach((n, index) => {
					// 使用Vue.set确保响应式
					_this.$set(n, 'show', false)
					_this.$set(n, 'detail', _this.getDetail(n))
				})

				// 设置页面数据
				_this.$set(_this, 'pageMsg', res.Result_Data)

				_this.showPage = true
			})
		},
		zgetBrandRevenue(obj) {
			let _this = this
			this.$request.$webGet('/WeChat/GetServerpartBrandShop', {
				Serverpart_Id: obj.id,
				business_Brand: obj.bid,
				pushProvinceCode: obj.provinceId,
				statictics_Time: obj.time,
				bussiness_Trade: obj.btid,
			}).then(res => {
				uni.hideLoading()
				if (res.Result_Code != 100) return

				// 处理品牌门店数据，确保响应式属性正确设置
				res.Result_Data.listBrandShopModel.forEach((n, index) => {
					// 使用Vue.set确保响应式
					_this.$set(n, 'show', false)
					_this.$set(n, 'detail', _this.getDetail(n))
				})

				// 设置数据结构
				res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel

				// 设置页面数据
				_this.$set(_this, 'pageMsg', res.Result_Data)

				_this.showPage = true
			})
		},
	},
	onUnload() {
		this.$util.addUserBehavior()
	},
	onLoad(option) {
		uni.showLoading({
			title: '正在加载...'
		})

		// 初始化省份主题
		this.initProvinceCode(option.provinceId)

		if (option.provinceId === '330000') {
			this.zgetBrandRevenue(option)
		} else {

			this.getBrandRevenue(option)
		}
	}
}
</script>

<style lang="scss" scoped>
// 省份主题定义 - 创建mixin以便复用
@mixin theme-colors($primary, $secondary) {

	// 主要背景渐变元素 - 使用主题色
	.service-brand-box {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
	}

}

// 宁波 330200
.province-theme-330200 {
	@include theme-colors(#1890FF, #69C0FF);
}

// 安徽 340000  
.province-theme-340000 {
	@include theme-colors(#748ED6, #91A7E3);
}

// 重庆 500000
.province-theme-500000 {
	@include theme-colors(#FA541C, #FF7A45);
}

// 四川 510000
.province-theme-510000 {
	@include theme-colors(#FA8C16, #FFA940);
}

// 贵州 520000
.province-theme-520000 {
	@include theme-colors(#52C41A, #73D13D);
}

// 云南 530000
.province-theme-530000 {
	@include theme-colors(#27B25F, #4CCC7F);
}

// 青海 630000
.province-theme-630000 {
	@include theme-colors(#13C2C2, #36CFC9);
}

// 海南 734100
.province-theme-734100 {
	@include theme-colors(#E91E63, #F06292);
}

.page-body {
	background-color: #f8f9fa;
	padding: 32rpx 24rpx;
	min-height: 100vh;
}

/* 服务区品牌详情 */
.service-brand-box {
	width: 100%;
	box-sizing: border-box;
	padding: 24rpx;
	margin-bottom: 32rpx;
	// 背景渐变由主题mixin控制
	border-radius: 24rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -20%;
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: -30%;
		left: -10%;
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 50%;
		z-index: 1;
	}
}

.service-brand-box image {
	width: 72rpx;
	height: 72rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	margin-right: 24rpx;
	position: relative;
	z-index: 2;
}

.band-name {
	color: #fff;
	font-size: 28rpx;
	font-weight: 600;
	position: relative;
	z-index: 2;
}

.price-num {
	color: #fff;
	font-size: 32rpx;
	font-weight: 700;
	font-family: 'PingFang SC', sans-serif;
	position: relative;
	z-index: 2;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 动画效果 - UniApp微信小程序兼容版本 */

/* 页面入场动画 */
@keyframes pageEnter {
	0% {
		opacity: 0;
		transform: translateY(30rpx);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.page-enter {
	animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 品牌头部动画 */
@keyframes brandHeaderEnter {
	0% {
		opacity: 0;
		transform: translateY(-30rpx) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.brand-header-enter {
	animation: brandHeaderEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
	opacity: 0;
}

/* 品牌信息滑入动画 */
@keyframes brandInfoSlide {
	0% {
		opacity: 0;
		transform: translateX(-20rpx);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.brand-info-slide {
	animation: brandInfoSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
	opacity: 0;
}

/* 品牌图标弹跳动画 */
@keyframes brandIconBounce {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-10deg);
	}

	50% {
		transform: scale(1.1) rotate(5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.brand-icon-bounce {
	animation: brandIconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
	opacity: 0;
}

/* 品牌名称滑入动画 */
@keyframes brandNameSlide {
	0% {
		opacity: 0;
		transform: translateX(-15rpx);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.brand-name-slide {
	animation: brandNameSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
	opacity: 0;
}

/* 价格数字计数动画 */
@keyframes priceCountUp {
	0% {
		opacity: 0;
		transform: translateY(10rpx) scale(0.8);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.price-count-up {
	animation: priceCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
	opacity: 0;
}

/* 门店列表容器动画 */
@keyframes shopListContainer {
	0% {
		opacity: 0;
		transform: translateY(30rpx);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.shop-list-container {
	animation: shopListContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
	opacity: 0;
}

/* 门店项目错列动画 */
@keyframes shopItemStagger {
	0% {
		opacity: 0;
		transform: translateX(-30rpx) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.shop-item-stagger {
	animation: shopItemStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	opacity: 0;
}

/* 交互反馈动画 */
.brand-header-enter:active {
	transform: scale(0.98);
	transition: transform 0.1s ease-out;
}

.brand-icon-bounce:active {
	transform: scale(0.9) rotate(5deg);
	transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style>
