<template>
	<view>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container">
			<far-bottom></far-bottom>
			<view class="record-dialog dis-flex flex-x-center flex-y-center" v-if="filterDialog">
				<view class="record-dialog-main">
					<view class="m-top40 f-30 color-33 m-btm40 t-c">筛选时间</view>
					<view class="color-33 f-24 m-left30">起始时间</view>
					<picker-view class="record-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="starChange">
						<picker-view-column>
							<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
					<view class="color-33 f-24 m-left30">结束时间</view>
					<picker-view class="record-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="endChange">
						<picker-view-column>
							<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
					<view class="record-dialog-btns dis-flex flex-y-center">
						<view class="btn cancel" @click="filterDialog = false">取消</view>
						<view class="line"></view>
						<view class="btn confirm" @click="checkBind">确认</view>
					</view>
				</view>
			</view>
			<view class="pages-header p-r" :style="{ 'background-image': 'url(' + imageRoot + 'delaer_bg.png)' }">
				<view class="person-content dis-flex flex-y-center flex-x-around">
					<!-- <view class="user-avatar m-right30" :style="{'background-image':'url('+detalsData.avatar+')'}"></view> -->
					<view class="user-referrer-name flex-x-center">
						<view class="dis-flex flex-dir-column flex-y-center">
							<view class="user-name col-f f-50 f-w">{{ storeInfo.todaymoney }}</view>
						</view>
						<view class="referrer-name col-9 f-24 m-top10">今日交易额(元)</view>
					</view>
					<view class="user-referrer-name flex-x-center">
						<view class="dis-flex flex-dir-column flex-y-center">
							<view class="user-name col-f f-50 f-w">{{ storeInfo.todayordernum }}</view>
						</view>
						<view class="referrer-name col-9 f-24 m-top10">今日订单数(单)</view>
					</view>
				</view>
			</view>
			<view class="dealer-content p-r p-left-right-30">
				<view class="tool-tab bor-radius-10upx b-f">
					<view class="tool-list dis-flex">
						<view class="tool-item flex-box t-c" v-for="(tool_item, index) in tab_list" :key="index" @click="navgateTo($event, tool_item.item_navType)">
							<image class="tool-item-icon" :src="tool_item.item_icon" mode=""></image>
							<view class="f-24 col-3">{{ tool_item.item_name }}</view>
						</view>
					</view>
				</view>
				<view class="dealer-menu m-top-btm30" v-if="!!typeList[index1] && !!goodsTypeList[index2]">
					<view class="menu-style">
						<view class="select-box dis-flex flex-x-between f-24">
							<picker @change="changeType" :value="index1" :range="typeList" range-key="label">
								<view class="dis-flex">
									{{typeList[index1].label}}
									<view class="i icon iconfont icon-unfold"></view>
								</view>
							</picker>
							<picker @change="changeGoodsType" :value="index2" :range="goodsTypeList" range-key="label">
								<view class="dis-flex">
									{{goodsTypeList[index2].label}}
									<view class="i icon iconfont icon-unfold"></view>
								</view>
							</picker>
						</view>
						<view class="merchant-radio-group dis-flex">
							<view class="merchant-radio" :class="{ check: tabCheck === 1 }" @click="tabClick(1)">今日</view>
							<view class="merchant-radio" :class="{ check: tabCheck === 2 }" @click="tabClick(2)">昨日</view>
							<view class="merchant-radio" :class="{ check: tabCheck === 3 }" @click="tabClick(3)">7日</view>
							<view class="merchant-radio" :class="{ check: tabCheck === 4 }" @click="tabClick(4)">30日</view>
							<view class="merchant-radio" :class="{ check: tabCheck === 5 }" @click="tabClick(5)">自定义</view>
						</view>
					</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
					 @touchend="touchEndLineA" v-show="filterDialog==false"></canvas>
				</view>
			</view>

			<pop-view :show="showTabbar" type="top" @clickmask="showTabbar = false">
				<view class="tabbar-main b-f">
					<view class="tabBar-list dis-flex border-line border-bottom">
						<view class="tabBar-item dis-flex flex-x-center flex-y-center f-28 col-3" @click="swichClass('classfly')">
							<view>{{ class_one }}</view>
							<view class="iconfont" :class="classType === 'classfly' ? 'icon-unfold' : 'icon-fold'"></view>
						</view>
						<view class="tabBar-item dis-flex flex-x-center flex-y-center f-28 col-3" @click="swichClass('sort')">
							<view>{{ class_two }}</view>
							<view class="iconfont" :class="classType === 'sort' ? 'icon-unfold' : 'icon-fold'"></view>
						</view>
					</view>
					<block v-if="classType === 'classfly'">
						<view class="control-list padding-box-all" >
							<view class="f-28 col-3 m-btm40" v-for="(tabItem, index) in Control_sort" :key="tabItem.type" @click="swichClassType('classfly', tabItem)"
							 :class="{ selectTabbar: tabItem.name === class_one }">
								{{ tabItem.name }}
							</view>
						</view>
					</block>
					<block v-else>
						<view class="control-list padding-box-all">
							<view class="f-28 col-3 m-btm40" @click="swichClassType('classfly', 'all')" :class="{ selectTabbar: '全部' === class_one }">全部</view>
							<view class="f-28 col-3 m-btm40" v-for="(tabItem, index) in qmj" :key="tabItem.type" @click="swichClassType('sort', tabItem)"
							 :class="{ selectTabbar: tabItem.name === class_two }">
								{{ tabItem.name }}
							</view>
						</view>
					</block>
				</view>
			</pop-view>
		</view>
		<navBar :tabBarAct="0" />
	</view>
</template>
<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo';
	import navBar from '@/components/template/navBar.vue';
	import popView from '@/components/template/PopManager.vue';
	import uCharts from './js_sdk/u-charts/u-charts/u-charts.min.js';
	var _self;
	var canvaLineA = null;
	export default {
		data() {
			const date = new Date();
			const years = [];
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1;
			const days = [];
			const day = date.getDate();
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i);
			}
			return {
				filterDialog: false,
				plugin: 'rush',
				index2: 0,
				imgUrl:'',
				pluginList: [],
				goodsTypeList: [
					{value: 1,label:'技能培训'},
					{value: 2,label:'资格考试'},
					{value: 3,label:'学历提升'},
					{value: 4,label:'岗前培训'}
				],
				goodsType: 1,
				name: '支付金额',
				index1: 0,
				type: 1,
				Control_sort:[],
				typeList: [{
						label: '支付金额',
						value: 1
					},
					{
						label: '订单数量',
						value: 2
					}
				],
				timetype: 1,
				maxY: null,
				minY: null,
				categories: [

				],
				series: [],
				pixelRatio: 1,
				cWidth: '',
				cHeight: '',
				storeid: null,
				storeInfo: {},
				monidata: 'ikik',
				detalsData: null,
				showTabbar: false,
				class_one: '支付金额',
				class_two: null,
				classType: 'classfly',
				class_one_id: 1,
				class_two_id: null,
				current_page: 1,
				tabCheck: 1,
				qmj: [{
						id: '1',
						name: '111',
						thumb: 'http://weilamdemo.oss-cn-qingdao.aliyuncs.com/images/26/2018/10/JiO2I8742gkJK2k872g5G7Z7ITk48K.png'
					},
					{
						id: '2',
						name: '222',
						thumb: 'http://weilamdemo.oss-cn-qingdao.aliyuncs.com/images/26/2018/10/uwnIFbcR3N03Rqrr3r46r0Fuffrc33.png'
					},
					{
						id: '3',
						name: '333',
						thumb: 'http://weilamdemo.oss-cn-qingdao.aliyuncs.com/images/26/2018/10/sVdd5gVBbgxh83LKLJH6HLKjBXX33G.png'
					}
				],
				loadlogo: false,
				shopShow: false,
				tab_list: [{
						item_type: 'order',
						item_name: '订单核销',
						item_icon: 'centerMerchant/order.png',
						item_navType: 'order'
					},
					{
						item_type: 'evaluation',
						item_name: '用户评论',
						item_icon: 'centerMerchant/evaluation.png',
						item_navType: 'evaluation'
					},
					{
						item_type: 'release',
						item_name: '我的动态',
						item_icon: 'centerMerchant/release.png',
						item_navType: 'release'
					},
					{
						item_type: 'finance',
						item_name: '财务对账',
						item_icon: 'centerMerchant/finance.png',
						item_navType: 'finance'
					}
				],
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				time: '',
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
			};
		},
		components: {
			Loadlogo,
			navBar,
			popView
		},
		computed: {},
		onShow() {},
		mounted() {},
		onLoad(e) {
			this.imgUrl = uni.getStorageSync('imgPrefix');
			this.tab_list.map(item=>{
				item.item_icon = this.imgUrl + item.item_icon;
			})
			let _this = this;
			_self = this;
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					_this.storeid = res.data;
					_this.init(res.data);
				}
			});
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(452);
		},
		methods: {
			checkBind() {
				let _this = this
				_this.starTime = _this.starYear + '-' + _this.starMonth + '-' + _this.starDay
				_this.endTime = _this.endYear + '-' + _this.endMonth + '-' + _this.endDay
				let starData = new Date(_this.starTime)
				let endData = new Date(_this.endTime)
				_this.starTime = starData.getTime() / 1000
				_this.endTime = endData.getTime() / 1000
				console.info(_this.starTime)
				console.info(_this.endTime)
				_this.time = _this.starTime + ',' + _this.endTime
				console.info(_this.time)
				_this.filterDialog = false
				_this.getStoreInfo(_this.storeid, _this.time)
			},
			starChange: function(e) {
				const val = e.detail.value;
				this.starYear = this.years[val[0]];
				this.starMonth = this.months[val[1]];
				this.starDay = this.days[val[2]];
			},
			endChange: function(e) {
				const val = e.detail.value;
				this.endYear = this.years[val[0]];
				this.endMonth = this.months[val[1]];
				this.endDay = this.days[val[2]];
			},
			bindChange: function(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: 'canvasLineA',
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.categories,
					series: _self.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						// type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 5
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: Number(_self.minY),
						max: Number(_self.maxY),
						format: val => {
							return val;
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			changeType(e) {
				let _this = this
				_this.index1 = e.detail.value
				_this.categories = []
				_this.series = []
				_this.type = _this.typeList[e.detail.value].value
				_this.name = _this.typeList[e.detail.value].label
				_this.getStoreInfo()
			},
			changePlugin(e) {
				let _this = this;
				_this.index2 = e.detail.value;
				_this.categories = [];
				_this.series = [];
				_this.plugin = _this.pluginList[e.detail.value].value;
				_this.getStoreInfo();
			},
			changeGoodsType(e){
				let _this = this;
				_this.index2 = e.detail.value;
				_this.categories = [];
				_this.series = [];
				_this.goodsType = _this.goodsTypeList[e.detail.value].value;
				_this.getStoreInfo();
			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写

			},
			init(mid) {
				let _this = this;
				_this.getStoreInfo(mid);
			},
			// 商户中心信息
			getStoreInfo(mid, time) {
				let _this = this;
				let data = {
					storeid: mid || _this.storeid,
					timetype: _this.timetype,
					time: time,
					type: _this.type,
					plugin: _this.plugin,
					cc_id: _this.goodsType
				};
				App._post_form('&p=store&do=storeInfo', data, res => {
					let obj = {
						item_type: 'takeout',
						item_name: res.data.deliveryName,
						item_icon: this.imgfixUrls + 'citydeliveryicon.png',
						item_navType: 'takeout'
					}
					// debugger
					if(res.data.showDelivery == 1 && _this.tab_list.length !== 5){
						_this.tab_list.push(obj);
					}
					_this.storeInfo = res.data
					_this.maxY = res.data.maxY
					_this.minY = res.data.minY
					for (let i = 0; i < res.data.chart.xaxis.length; i++) {
						_this.categories.push(res.data.chart.xaxis[i])
					}
					let bb = []
					for (let i = 0; i < res.data.chart.yaxis.length; i++) {
						let aa = Number(res.data.chart.yaxis[i])
						bb.push(aa)
					}
					let aa = {
						name: _this.name,
						data: bb
					}
					_this.series.push(aa)
					let pluginListData = [];
					for (let key in res.data.typelist) {
						let aa = {
							label: res.data.typelist[key],
							value: key
						}
						pluginListData.push(aa)
					}
					_this.pluginList = pluginListData;
					_this.showLineA();
				});
			},
			// 跳转商家
			goStore() {
				App.navigationTo({
					url: 'pages/subPages/dealer/myStore/myStore'
				});
			},
			tabClick(index) {
				let _this = this
				this.tabCheck = index;
				_this.timetype = index
				_this.categories = []
				_this.series = []
				if (index == 5) {
					_this.filterDialog = true
				} else {
					_this.getStoreInfo(_this.storeid);
				}
			},
			swichClass(type) {
				let _this = this;
				_this.classType = type === 'classfly' ? 'classfly' : 'sort';
			},
			swichClassType(className, tabItem) {
				let _this = this;
				// if (className === 'classfly') {
				if (tabItem === 'all') {
					_this.setData({
						class_one: '全部',
						current_page: 1,
						class_one_id: ''
					});
				} else {
					_this.setData({
						class_one: tabItem.name,
						current_page: 1,
						class_one_id: tabItem.id
					});
				}
				// }
				// else {
				// 	_this.setData({
				// 		class_two: tabItem.title,
				// 		current_page: 1,
				// 		class_two_id: tabItem.typeData
				// 	})
				// }
			},
			new_navgateto() {
				App.navigationTo({
					url: 'pages/subPages/merchant/merchantPayDetails/merchantPayDetails'
				});
			},
			navgateTo(e, navType) {
				let _this = this;
				switch (navType) {
					case 'evaluation':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantComment/merchantComment'
						});
						break;
					case 'finance':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantPayDetails/merchantPayDetails'
						});
						break;
					case 'order':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantVerification/merchantVerification?storeid=' + _this.storeid
						});
						break;
					case 'merchantRecord':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantRecord/merchantRecord'
						});
						break;
					case 'merchantComment':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantComment/merchantComment'
						});
						break;
					case 'merchantUerCenter':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantUerCenter/merchantUerCenter'
						});
						break;
					case 'merchantMsg':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantMsg/merchantMsg'
						});
						break;
					case 'integralShop':
						App.navigationTo({
							url: 'pages/subPages/integral/integralShop/integralShop'
						});
						break;
					case 'release':
						App.navigationTo({
							url: 'pages/subPages/merchant/dynamicList/dynamicList'
						});
						break;
					case 'takeout':
						App.navigationTo({
							url: 'pages/subPages2/management/management'
						});
						break;
				}
			}
		}
	};
</script>

<style lang="less">
	.qiun-charts {
		width: 690upx;
		height: 426upx;
		background-color: #ffffff;
	}

	.charts {
		width: 690upx;
		height: 426upx;
		background-color: #ffffff;
	}

	page {
		font-size: 0;
		background-color: #f7f7f7;
	}

	.container {
		.select-box {
			color: #999999;

			.iconfont {
				font-size: 24upx;
				margin-left: 6upx;
			}
		}

		.tabbar-main {
			width: 101vw;
			padding-top: 90upx;
			padding-bottom: 0 !important;
		}

		.tabBar-list {
			height: 100upx;
			line-height: 100upx;
			width: 100%;

			.tabBar-item {
				width: 50%;
			}
		}

		.selectTabbar {
			color: #ff4444;
		}

		// 头部内容
		.pages-header {
			width: 100%;
			height: 400upx;
			background-repeat: no-repeat;
			background-size: 100% 400upx;

			//个人-邀请人信息
			.person-content {
				padding: 94upx 40upx 0;

				.user-avatar {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					background-repeat: no-repeat;
					background-size: 100upx 100upx;
				}

				.user-referrer-name {
					.level-label {
						background-color: #e7d4aa;
						border-radius: 18upx;
						padding: 0 16upx;
					}

					.referrer-name {
						color: #6b6e88;
					}
				}
			}
		}

		.merchant-radio-group {
			border-radius: 30upx;
			border: 1px solid rgba(44, 111, 255, 1);
			overflow: hidden;
			font-size: 24upx;
			margin-top: 42upx;
			white-space: nowrap;

			.merchant-radio {
				color: #333333;
				padding: 18upx 0;
				width: 20%;
				text-align: center;
			}

			.merchant-radio.check {
				background: #3388ff;
				color: #ffffff;
			}
		}

		// 详情内容
		.dealer-content {
			margin-top: -160upx;
			padding-bottom: 120upx;

			// 工具导航
			.tool-tab {
				padding: 30upx 0;

				.tool-tab-title {
					padding: 0 30upx;
				}

				.tool-item {
					.tool-item-icon {
						margin: 0 auto 20upx;
						display: block;
						width: 80upx;
						height: 80upx;
					}
				}
			}

			// 菜单样式
			.menu-style {
				background-color: #ffffff;
				position: relative;
				padding: 40upx 30upx;
				border-radius: 10upx;

				.menu-style-bg {
					width: 340upx;
					height: 160upx;
					background-repeat: no-repeat;
					background-size: 340upx 160upx;
					position: absolute;
					right: 0;
					top: 0;
					border-radius: 10upx;
				}
			}
		}
	}

	.item {
		font-size: 20upx;

	}

	.container {
		.record-dialog {
			z-index: 10;
			position: fixed;
			background: rgba(0, 0, 0, 0.7);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			.record-dialog-main {
				width: 600upx;
				border-radius: 10upx;
				z-index: 11;
				background: #ffffff;
				position: relative;
			}

			.record-dialog-btns {
				border-top: 1upx solid rgba(238, 238, 238, 1);
				color: rgba(51, 51, 51, 1);
				position: relative;
				bottom: 0;
				left: 0;
				right: 0;

				.btn {
					width: 50%;
					height: 86upx;
					font-size: 28upx;
					line-height: 86upx;
					text-align: center;
				}

				.btn.confirm {
					color: rgba(51, 136, 255, 1);
				}

				.line {
					width: 1px;
					height: 36upx;
					background: rgba(238, 238, 238, 1);
				}
			}

			.record-picker-view {
				margin: 0upx 30upx;
				box-sizing: border-box;
				width: 540upx;
				height: 240upx;
			}
		}

		// 搜索栏内容
		.search-main {
			.search-box {
				.search-input {
					position: relative;
					padding: 0 60upx 0 80upx;
					margin-right: 40upx;
					background: rgba(246, 246, 246, 1);
					height: 76upx;
					border-radius: 38upx;
					flex: 1;

					input {
						width: 100%;
						height: 100%;
					}

					.icon.icon-sousuo {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 30upx;
					}
				}

				.search-select {
					width: 100upx;
					white-space: nowrap;
					color: #333333;

					.icon {
						margin-left: 10upx;
					}
				}
			}
		}

		/deep/.uni-picker-view-indicator {
			height: 70upx !important;
		}

		//权限名字
		.permission-name {
			font-size: 28upx;

			color: rgba(153, 153, 153, 1);
		}

		// 头部内容
		.pages-header {
			width: 100%;
			height: 400upx;
			background-repeat: no-repeat;
			background-size: 100% 400upx;
		}

		// 详情内容
		.record {
			background-color: #ffffff;

			.record-search {
				padding: 30upx;
			}

			.record-body {
				padding: 30upx;
				background-color: #f6f6f6;

				.color-red {
					color: #ff4444;
				}

				.record-list-item {
					padding: 30upx;
					border-radius: 10upx;
					background: #ffffff;

					.record-list-item-header {
						border-bottom: 1px solid rgb(238, 238, 238);
						padding-bottom: 28upx;

						.tag {
							padding: 6upx 10upx;
							background: rgba(51, 136, 255, 1);
							border-radius: 4upx;
							text-align: center;
							color: #ffffff;
						}
					}

					.record-list-item-content {
						padding: 30upx 0;
						border-bottom: 1px solid rgb(238, 238, 238);

						.record-img {
							width: 114upx;
							height: 114upx;
							border-radius: 4upx;
							margin-right: 20upx;
							flex-shrink: 0;
						}

						.goods-name {
							color: #000000;
							line-height: 36upx;
						}

						.goods-sku {
							color: #999999;
						}
					}

					.record-list-item-footer {
						.footer-item {
							padding-top: 30upx;

							.footer-item-left {
								color: #999999;
							}

							.footer-item-right {
								color: #333333;
							}
						}
					}
				}
			}
		}
	}
</style>
