<template>
	<view class="enterpriseDetails_body">
		<view class="header_car">
			<view class="flex jb ac">
				<view>
					<view class="flex ">
						<uni-icons v-if="routerIndex" color="#2866ff" custom-prefix="iconfont" type="iconjiayou"
							size="20"></uni-icons>
						<image v-if="!routerIndex" style="width: 60rpx; height: 60rpx;"
							src="../../../static/selegs.png"></image>
						<view class="header_text_left">
							<view class="text_ov">{{routerIndex?dedata.siteName:dedata.companyName}}</view>
							<view class="small_text text_ov ">{{dedata.id}}</view>
						</view>
						<view v-if="!routerIndex" :style="{background:dedata.parentMark=='0'?'':'#BC853B'}"
							class="list_item_tip">
							{{dedata.parentMark=='0'?'总公司':'子公司'}}
						</view>
					</view>
					<view class="flex header_text_top ">
						<uni-icons color="#2866ff" custom-prefix="iconfont" type="iconfengniao_shoujihao" size="20">
						</uni-icons>
						<view class="header_text_left">
							<view class="text_ov">{{dedata.siteContacts||'暂无'}} {{dedata.siteContactPhone||'暂无'}}</view>
							<view class="small_text text_ov">{{dedata.customerId||'暂无'}}</view>
						</view>
					</view>
				</view>
				<view v-if="routerIndex" class="t-icon">
					<image style="width: 100%;height: 100%;"
						:src="dedata.siteImages?dedata.siteImages: '../../../static/selegs.png' " mode=""></image>
				</view>
			</view>
			<view @click="jump(2)" class="account" v-if="detailsData">
				<view class="yuan"></view>
				<view>
					<view style="text-align: center;">账户余额</view>
					<view style="text-align: center;">{{detailsData.gasStationBalance|price}}</view>
				</view>
				<view v-if="!routerIndex">
					<view style="text-align: center;">企业余额</view>
					<view style="text-align: center;">{{detailsData.totalBalance|price}}</view>
				</view>
				<view>
					<uni-icons color="#FFFFFF" type="right" size="30"></uni-icons>
				</view>
			</view>
		</view>
		<view class="chart">
			<view class="chartSeleBar">
				<view v-for="(item,index) in chartSeleBarData" @click="chartSeleBarFn(item,index)"
					:class=" chartSeleIndex==index?'selechartSeleBar_item':'chartSeleBar_item' ">{{item.lable}}</view>
			</view>
			<view class="chart_scoll">
				<view class="swiper-item" v-if="chartSeleIndex == 0">
					<view style="height:75%;">
						<qiunDataCharts :canvas2d='true' canvasId='canvasIdw' type="area"
							:opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="Line" />
					</view>
					<view v-if="detailsData"
						style="height: 25%; display: flex; justify-content: space-around; align-items: center;">
						<view class="swiper-item_table">今日</view>
						<view> <text class="numberoli">{{detailsData.todaySalesRose.toFixed(2)}}</text> L</view>
						<view> <text class="numberoli">{{detailsData.siteDayBalance|price}}</text> ￥</view>
					</view>
				</view>
				<view class="swiper-item" v-if="chartSeleIndex == 1">
					<view style="height:75%;">
						<qiunDataCharts :canvas2d='true' canvasId='canvasIdt' type="area"
							:opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="LineTwo" />
					</view>
					<view v-if="chartsData"
						style="height: 25%; display: flex; justify-content: space-around; align-items: center;">
						<view class="swiper-item_table">今日</view>
						<view> <text class="numberoli">{{chartsData.rechargeAmountOnTheDay|price}}</text> ￥
						</view>
					</view>
				</view>
				<view class="swiper-item" v-if="chartSeleIndex == 2">
					<view style="height:75%;">
						<qiunDataCharts :canvas2d='true' canvasId='canvasIdx' type="area"
							:opts="{extra:{area:{type:'curve',addLine:true,gradient:true}},enableScroll:true,xAxis:{itemCount:7}}"
							:chartData="oneMonthLine" :ontouch="true" />
					</view>
					<view v-if="oneMonthData"
						style="height: 25%; display: flex; justify-content: space-around; align-items: center;">
						<view class="swiper-item_table">今日</view>
						<view> <text class="numberoli">{{oneMonthData.todaySalesRose.toFixed(2)}}</text> L
						</view>
						<view> <text class="numberoli">{{oneMonthData.siteDayBalance|price}}</text> ￥</view>
					</view>
				</view>
			</view>

			<view class="footer">
				<view @click="ishowFn()" class="footer_title" v-if="dedata">{{dedata.startTime|timeProcessing}} -
					{{dedata.endTime|timeProcessing}}
				</view>
				<view @click="jump(1)" class="footer_item">
					<view
						style=" margin-top: 60rpx; margin-bottom:32rpx;  display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view class="iicombody">
							<uni-icons custom-prefix="iconfont" type="iconwangdian1" size="30"></uni-icons>
						</view>
						<view>{{routerIndex?'企业':'油站'}}消费支出</view>
					</view>
					<view style="text-align: center;">
						<text>{{income|price}}</text>￥
					</view>
				</view>
				<view @click="jump(3)" class="footer_item">
					<view
						style=" margin-top: 60rpx; margin-bottom:32rpx;  display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view class="iicombody">
							<uni-icons custom-prefix="iconfont" type="iconwangdian1" size="30"></uni-icons>
						</view>
						<view>消费订单数量</view>
					</view>
					<view style="text-align: center;">
						{{quantity}}
					</view>
				</view>
			</view>
		</view>
		<datePopup style="z-index: 9999999999999;" @datePopupChange='datePopupChange' v-model="isShow.date"></datePopup>
	</view>
</template>

<script>
	import sy from '@/api/sy'
	import datePopup from '../../components/datePopup.vue'
	import convertW from '../../components/convertW.js'
	import qiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			datePopup,
			qiunDataCharts
		},
		data() {
			return {
				routerIndex: true,
				enterpriseData: null,
				isShow: {
					date: false
				},
				dedata: null,
				chartsData: null,
				detailsData: null,
				oneMonthData: null,
				income: 0,
				quantity: 0,
				chartSeleBarData: [{
					lable: '近五日动销',
					value: 0
				}, {
					lable: '近五次充值',
					value: 1
				}, {
					lable: '近一月动销',
					value: 2
				}],
				chartSeleIndex: 0,
				Line: {},
				LineTwo: {},
				oneMonthLine: {}
			}
		},
		onLoad(e) {

			let routes = getCurrentPages();
			let routerIndex = routes[(routes.length - 2)].$page.fullPath.indexOf('?') != -1 ?
				routes[(routes.length - 2)].$page.fullPath.split('?')[0].split('/')[routes[(routes.length - 2)]
					.$page.fullPath.split('?')[0].split('/').length - 1] :
				routes[(routes.length - 2)].$page.fullPath.split('/')[routes[(routes.length - 2)].$page
					.fullPath.split('/').length - 1];
			// 仅用于判断是从油站动销还是企业动销跳入
			this.routerIndex = routerIndex == 'enterpriseIndex' ? false : true;
			if (e.jsData) {
				this.dedata = JSON.parse(e.jsData);
				this.getdata(JSON.parse(e.jsData));
			}
		},
		filters: {
			timeProcessing(e) {
				return e ? e.split(' ')[0] : e
			},
			price(e = 0.00) {
				return convertW.convertW(e)
			},
			distinguish(e) {
				return this.routerIndex ? e.siteName : e.companyName
			}
		},
		methods: {
			getTouchMove(e) {
				// console.log('e',e)
			},
			datePopupChange(e) {
				sy[(this.routerIndex ? 'queryBusinessIncome' : 'queryEnterpriseIncome')]({
					[((this.routerIndex ? 'siteId' : 'companyId'))]: this.dedata.id,
					endTime: e[1],
					startTime: e[0]
				}).then(res => {
					this.enterpriseData = res.data
					this.income = res.data.enterpriseContributionAmount
					this.quantity = res.data.orderNumber
					this.dedata.startTime = e[0]
					this.dedata.endTime = e[1]
				})
				console.log(e)
			},
			ishowFn() {
				this.isShow.date = true
			},
			chartsDataFn() {

			},
			getdata(e) {
				sy[(this.routerIndex ? 'findSiteMovingPinVo' : 'findEnterpriSemovingPinVo')]({
					[((this.routerIndex ? 'siteId' : 'companyId'))]: e.id
				}).then(res => {
					if (res.code !== 20000) return
					this.detailsData = res.data
					let arr = []
					this.detailsData.createTime.forEach((item, index) => {
						arr.push(`${item.split('-')[1]}/${item.split('-')[2]}`)
						this.detailsData.money[index] = this.detailsData.money[index].toFixed(2)
					})
					this.Line = {
						categories: arr,
						series: [{
							name: "金额",
							data: this.detailsData.money
						}]
					}
				})
				sy[(this.routerIndex ? 'checkTheFiveDayRechargeAmount' : 'queryRechargeCompanyFiveDays')]({
					[((this.routerIndex ? 'siteId' : 'companyId'))]: e.id
				}).then(res => {
					this.chartsData = res.data
					let arrtwo = []
					res.data.createTime.forEach((item, index) => {
						arrtwo.push(`${item.split('-')[1]}/${item.split('-')[2]}`)
						res.data.money[index] = res.data.money[index].toFixed(2)
					})
					this.LineTwo = {
						categories: arrtwo,
						series: [{
							name: "金额",
							data: res.data.money
						}]
					}
				}).catch(e => {
					console.log(e, '///')
				})
				sy[(this.routerIndex ? 'queryBusinessIncome' : 'queryEnterpriseIncome')]({
					[((this.routerIndex ? 'siteId' : 'companyId'))]: e.id,
					endTime: e.endTime,
					startTime: e.startTime
				}).then(res => {
					this.enterpriseData = res.data
					this.income = res.data.enterpriseContributionAmount
					this.quantity = res.data.orderNumber
					console.log(res, '收入')
				})
				if (this.routerIndex) {
					// 近一个月动销 仅油站动销展示
					sy.findMonthlySiteMovingPinVo(e.id).then(res => {
						let dateArr = []
						let moneyArr = []
						res.data.siteMovingPins.forEach(item => {
							let date = item.createTime.split('-')
							dateArr.push(`${date[1]}-${date[2]}`)
							let money = (item.money + '').includes('.') ? item.money.toFixed(2) : item
								.money
							moneyArr.push(money)
						})
						this.oneMonthData = res.data
						this.oneMonthLine = {
							categories: dateArr,
							series: [{
								name: "金额",
								data: moneyArr
							}]
						}
					})
				}
			},
			jump(e) {
				this.dedata.routerIndex = this.routerIndex;
				switch (e) {
					case 1:
						uni.navigateTo({
							url: '../contribution/contribution?jsData=' + JSON.stringify(Object.assign(this
								.dedata, {
									liters: this.enterpriseData.liters,
									enterpriseContributionAmount: this.enterpriseData
										.enterpriseContributionAmount,
									...this.detailsData
								}))
						})
						break;
					case 2:
						console.log(this.dedata, 'rechargeRecordrechargeRecordrechargeRecordrechargeRecord')
						uni.navigateTo({
							url: '../rechargeRecord/rechargeRecord?jsData=' + JSON.stringify(Object.assign(this
								.dedata, {
									routerIndex: this.routerIndex,
									gasStationBalance: this.detailsData.gasStationBalance,
									amountYesterday: this.detailsData.amountYesterday,
									...this.detailsData
								}))
						})
						break;
					case 3:
						uni.navigateTo({
							url: '../orderQuantity/orderQuantity?jsData=' + JSON.stringify(Object.assign(this
								.dedata, this.enterpriseData))
						})
						break;
				}

			},
			swiperChange(e) {
				// this.chartSeleIndex = e.detail.current
			},
			chartSeleBarFn(item, index) {
				this.chartSeleIndex = index
			}
		}
	}
</script>

<style scoped>
	@import url("./enterpriseDetails.css");

	.swiper-item {
		width: 100%;
	}

	.list_item_tip {
		padding: 11rpx 14rpx;
		background-color: #9F43CC;
		color: #FFFFFF;
		font-size: 16rpx;
		width: fit-content;
		margin: 0 auto;
		height: fit-content;
	}

	.t-icon {
		width: 95rpx !important;
		height: 95rpx !important;
	}
</style>
