<template>
	<div class="page-body" v-if="showPage">
		<div class="box-card" v-if="!isBrandService">

			<div class="serverpart-name">{{pageMsg.Serverpart_Name}}</div>
			<div class="analysis-box-title">
				<div>
					<div class="analysis-total">{{ $util.fmoney(pageMsg.Revenue_Amount) }}</div>
					<span style="color:#959495;">日结营收</span>
				</div>
				<div>
					<div class="analysis-upload" :class="{'defferent':pageMsg.UploadShopCount!==pageMsg.TotalShopCount}">{{pageMsg.UploadShopCount}}/{{pageMsg.TotalShopCount}}</div>
					<span style="color:#959495;">上传门店</span>
				</div>
			</div>
		</div>
		<div class="service-brand-box" v-else>
			<div class="uni-flex align-center">
				<image src="/static/images/revenue/top1.png" mode="aspectFit"></image>
				<div class="band-name">{{pageMsg.Brand_Name}}</div>
			</div>
			<div class="price-num">{{pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,2) :'0.00'}}</div>
		</div>
		<!--服务区门店分析-->
		<div style="margin-top: 0 20rpx;" v-if="!isBrandService">
			<shopCell v-for="(item,i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>

		</div>
		<div style="margin-top: 0 20rpx;" v-else>
			<shopCell v-for="(item,i) in pageMsg.listBrandShopModel" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>

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

<script>
	import shopCell from './components/listUnit.vue'
	export default {
		data() {
			return {
				showPage:false,
				isBrandService:false,
				pageMsg: {},
				keyJson : {
						SHOWMORE_SIGN: { 1: '【长款】',2:'【异常长款】' }, // 长款
						SHOWLESS_SIGN:{ 1: '【短款】',2:'【异常短款】' }, // 短款
						SHOWABNORMAL_SIGN: { 1: '【异常校验】'},  // 异常日结
						SHOWSCAN_SIGN : { 1: '【扫】'},  // 扫码上传
						SHOWSSUPPLY_SIGN : { 1: '【补】' }, // 账期补录
						SHOWCHECK_SIGN : { 1: '【稽核检查】' }, // 稽核检查
						INTERFACE_SIGN : { 1: '【接口传输】' }, // 接口传输
					}
			}
		},
		components:{
			shopCell
		},
		methods: {
			toggleShow(i){

				let item = this.isBrandService ? this.pageMsg.listBrandShopModel[i] : this.pageMsg.ShopEndaccountList[i]
				item.show = !item.show
				this.$forceUpdate()
			},
			getData(obj) {
				let _this = this
				this.$request.$webGet('CommercialApi/Revenue/GetServerpartEndAccountList', {
					Serverpart_ID: obj.id,
					pushProvinceCode: obj.provinceId,
					Statistics_Date: obj.time,
					// EndDate: obj.time,
				}).then(res => {
					uni.hideLoading()
					if (res.Result_Code !== 100) return
					res.Result_Data.ShopEndaccountList.map(n=>{
						n.show = false
						n.detail =  this.getDetail(n)
					})
					res.Result_Data.UpLoadCount = res.Result_Data.ShopEndaccountList.length // 门店上传总数
					_this.pageMsg = res.Result_Data
					_this.showPage =true
				})
			},
			getOtherData(obj) { // 450000和330300 省份获取数据的方法
				let _this = this
				this.$request.$get('getShopRevenueList', {
					serverpartID: obj.id,
					pushProvinceCode: obj.provinceId,
					StartDate: obj.time,
					EndDate: obj.time,
				}).then(res => {
					uni.hideLoading()
					if (res.ResultCode != 100) return
					res.Data.List.map(n=>{
						n.show = false
						n.detail =  this.getDetail(n)
					})

					_this.pageMsg.Revenue_Amount = res.Data.CASHPAY
					_this.pageMsg.Serverpart_Name = res.Data.SERVERPART_NAME
					_this.pageMsg.UploadShopCount = res.Data.UpLoadCount
					_this.pageMsg.TotalShopCount = res.Data.TotalCount
					_this.pageMsg.ShopEndaccountList = res.Data.List
					_this.showPage =true
				})
			},
			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('/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.map(n=>{
						n.show = false
						n.detail =  this.getDetail(n)
					})

					_this.pageMsg = res.Result_Data
					_this.showPage = true
				})
			},

		},
		onUnload() {
			this.$util.addUserBehaviorNew()
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载...'
			})

			if(option.bid) {
				this.isBrandService = true
				this.getBrandRevenue(option)
			}else {
				if(option.provinceId==450000 || option.provinceId==330300 || option.provinceId==140000 || option.provinceId==500000) { //这两个省份用的是老接口获取数据
					this.getOtherData(option)
				}else{ // 其余省份使用webapi接口获取数据

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

<style scoped>
	.page-body {
		background-color: #fff;
	}
	/*服务区分析*/
	/* 头部卡片 */
	.box-card {
		padding: 24upx 24upx 0;

		width: 100%;
		box-sizing: border-box;
		transition: all .2s;
		background: url(/static/images/effective/bg-top.png) no-repeat center;

		background-repeat: no-repeat;
		background-position: top center;
	}
	.serverpart-name {
		font-size: 32rpx;
		height: 90rpx;
		font-weight: 700;
		color: #333;
		text-align: center;
		/* background-color: #fff; */
	}
	.analysis-box-title {
		/* background-color: #fff; */
		padding: 0 20rpx 20rpx ;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		color: #959495;
		font-size: 28rpx;
	}
	.analysis-total,.analysis-upload {
		color: #383838;
		font-size: 40rpx;
		font-family: Bahnschrift Regular;
		line-height: 1.2;
	}

	.analysis-upload.defferent {
		color: #D7565A;
	}

	/* 服务区品牌详情 */
	.service-brand-box {

		width: 693rpx;
		height: 103rpx;
		color: #fff;
		border-radius: 10rpx;
		background: url(/static/images/revenue/brand-card.png) no-repeat 60rpx center,linear-gradient(#98a1c2 0%, #aab3d0 100%);
		background-size: contain;
		display: flex;
		align-items: center;
		margin: 45rpx auto;

		padding: 0 25rpx;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.service-brand-box image {
		height: 60rpx;
		width: 60rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	.service-brand-box .price-num {
		font-size: 40rpx;
		font-family: Bahnschrift Regular;
	}
</style>
