<template>
	<el-card shadow="never" id="chartCard">
		<el-row id="conditionArea" v-if="conditions.length > 0">
			<div class="conditiondiv" v-for="cond in conditions" :key="cond.field">
				<div v-if="cond.defaultType == '1'">
					<span>{{ cond.comment }}</span>
					<el-input
						v-if="cond.dbType != 'date'"
						size="mini"
						style="width: 160px; padding-right: 0;"
						clearable
						:placeholder="'请输入' + cond.comment"
						prefix-icon="el-icon-search"
						v-model="conditionValue[cond.field]"
						@keyup.enter.native="searchEnterFun"
					></el-input>

					<el-date-picker
						v-if="cond.dbType == 'date' && cond.condition == 'BETWEEN'"
						v-model="conditionValue[cond.field]"
						type="datetimerange"
						align="right"
						size="mini"
						start-placeholder="开始日期"
						end-placeholder="截止日期"
						:default-time="['00:00:00', '23:59:59']"
					></el-date-picker>

					<el-date-picker
						v-if="cond.dbType == 'date' && cond.condition != 'BETWEEN'"
						size="mini"
						v-model="conditionValue[cond.field]"
						type="datetime"
						style="width: 160px;"
						placeholder="选择日期"
					></el-date-picker>
				</div>
			</div>

			<div
				class="conditiondiv"
				style="text-align: center; float: right; width: 230px;"
			>
				<el-button
					size="mini"
					type="primary"
					icon="el-icon-search"
					@click="search"
					>查询</el-button
				>
				<el-button size="mini" icon="el-icon-refresh" @click="reset"
					>重置</el-button
				>
			</div>
		</el-row>

		<el-tabs type="card" style="margin-top: 10px;">
			<el-tab-pane label="查看图表">
				<div
					id="chartDiv"
					style="width: 100%; float: left; margin-left: 0px;"
				></div>
			</el-tab-pane>
			<el-tab-pane label="查看数据">
				<el-table
					:data="chartData.rows"
					id="chartDataTable"
					style="width: 100%; overflow: auto;"
					header-cell-class-name="todo-header-row"
					row-class-name="todo-row"
					size="small"
					v-loading="fullscreenLoading"
				>
					<el-table-column
						type="index"
						width="80"
						align="center"
						label="序号"
					></el-table-column>
					<el-table-column
						:label="showF.comment"
						:key="showF.field"
						v-for="showF in showFiled"
					>
						<template slot-scope="scope">
							<span class="todo-subject">{{ getValue(scope.row, showF) }}</span>
						</template>
					</el-table-column>
				</el-table>

				<el-row type="flex" justify="end" style="margin: 10px;">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagination.page"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total"
					></el-pagination>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>
<script>
import { mapState } from 'vuex';
import utils from '@/utils.js';

export default {
	props: ['id'],
	data() {
		return {
			queryOpTransObj: {
				EQ: 'equal',
				BETWEEN: 'between',
				GE: 'great_equal',
				LE: 'less_equal',
				LK: 'like',
				IN: 'in',
			},
			fullscreenLoading: false,
			dialogVisible: false,
			customChart: '',
			conditions: [],
			showFiled: [],
			pagination: { page: 1, pageSize: 10, showTotal: true },
			chartData: {},
			conditionValue: {},
		};
	},
	created() {
		let this_ = this;
		this.$store.dispatch('form/getCustomChart', this.id).then(function (data) {
			if (data) {
				data.conditionfield = JSON.parse(data.conditionfield);
				data.displayfield = JSON.parse(data.displayfield);
				data.xaxisField = JSON.parse(data.xaxisField);
				data.sortfield = JSON.parse(data.sortfield);
				for (var i = 0, c; (c = data.conditionfield[i++]); ) {
					c.condition = this_.queryOpTransObj[c.condition].toUpperCase();
				}
				this_.conditions = data.conditionfield;
				this_.customChart = data;
				this_.showFiled = JSON.parse(
					JSON.stringify(
						this_.customChart.xaxisField.concat(this_.customChart.displayfield)
					)
				);
				setTimeout(function () {
					var chartHeight = document.getElementById('chartCard').offsetHeight;
					var selectArea =
						document.getElementById('conditionArea') &&
						document.getElementById('conditionArea').offsetHeight
							? document.getElementById('conditionArea').offsetHeight
							: 0;
					document.getElementById('chartDiv').style.height =
						chartHeight - selectArea - 65 + 'px';
					document.getElementById('chartDataTable').style.height =
						chartHeight - selectArea - 95 + 'px';
					this_.search();
				}, 20);
			}
		});
	},
	methods: {
		buildQuerys() {
			let queryFilter = { pageBean: this.pagination, querys: [], sorter: [] };
			for (var i = 0, c; (c = this.conditions[i++]); ) {
				let queryValue = '';
				if (c.defaultType != '1' && c.defaultValue) {
					queryValue = c.defaultValue;
				} else if (c.defaultType == '1' && this.conditionValue[c.field]) {
					queryValue = this.conditionValue[c.field];
				}
				if (queryValue) {
					queryFilter.querys.push({
						property: c.field,
						operation: c.condition,
						value: queryValue,
					});
				}
			}

			for (var i1 = 0, s; (s = this.customChart.sortfield[i1++]); ) {
				queryFilter.sorter.push({
					property: s.field,
					direction: s.sortType.toUpperCase(),
				});
			}
			return queryFilter;
		},
		getValue(r, s) {
			var value = r[s.field.toUpperCase()];
			if (s.dbType == 'date') {
				var filter = this.$options.filters['dateformat'];
				value = filter(value, 'YYYY-MM-DD HH:mm:ss');
			}
			return value;
		},
		//重置
		reset() {
			this.conditionValue = {};
			this.search();
		},
		handleSizeChange: function (size) {
			//每页下拉显示数据
			this.pagination.pageSize = size;
			this.search();
		},
		handleCurrentChange: function (currentPage) {
			//点击第几页
			this.pagination.page = currentPage;
			this.search();
		},

		//查询
		search() {
			let queryFilter = this.buildQuerys(); //查询条件
			let param = { id: this.id, filter: queryFilter };
			let this_ = this;
			this.$store.dispatch('form/getChartData', param).then(function (data) {
				if (data) {
					this_.chartData = data;
					this_.pagination = {
						pageSize: data.pageSize,
						page: data.page,
						total: data.total,
					};
					this_.buildChart(data.rows);
				}
			});
		},
		//根据自定义图表的相关设置以及数据生产图表
		buildChart(data) {
			const echarts = require('echarts');
			var myChart = echarts.init(document.getElementById('chartDiv'));
			this.$root.$on('resize', () => {
				myChart.resize(); //监测图表自适应
			});
			myChart.clear();
			var displayfield = this.customChart.displayfield;
			var legendData = [];
			var xAxisData = [];
			var seriesData = [];
			var xaxisField = this.customChart.xaxisField;
			var value;
			if (xaxisField) xaxisField = xaxisField[0];
			for (var i = 0, d; (d = displayfield[i++]); ) {
				var arr = [];
				if (this.customChart.style == 3) {
					for (var j = 0, res; (res = data[j++]); ) {
						value = res[xaxisField.field.toUpperCase()];
						if (
							xaxisField.dbType == 'date' &&
							value &&
							typeof value == 'number'
						)
							value = new Date(value).format('yyyy-MM-dd HH:mm:dd');
						legendData.push(value);
						arr.push({
							value: res[d.field.toUpperCase()],
							name: value,
						});
					}
					seriesData.push({
						name: d.comment,
						type: 'pie',
						radius: '75%',
						center: ['50%', '55%'],
						data: arr,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					});
				} else {
					var type = this.customChart.style == 1 ? 'line' : 'bar';
					legendData.push(d.comment);
					for (var j1 = 0, res1; (res1 = data[j1++]); ) {
						if (i == 1) {
							value = res1[xaxisField.field.toUpperCase()];
							if (
								xaxisField.dbType == 'date' &&
								value &&
								typeof value == 'number'
							)
								value = new Date(value).format(defaultFmt);
							xAxisData.push(value);
						}
						value = res1[d.field.toUpperCase()];
						/*if(d.dbType=='date' && value && (typeof value=="number")) value=new Date(value).format(defaultFmt);*/
						arr.push(value);
					}
					seriesData.push({
						name: d.comment,
						type: type,
						areaStyle: { normal: {} },
						data: arr,
					});
				}
			}
			var option = {};
			if (this.customChart.style == 3) {
				option = {
					title: {
						text: this.customChart.name,
						x: 'center',
						y: 10,
						textStyle: {
							fontSize: 24,
						},
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)',
					},
					toolbox: {
						feature: {
							saveAsImage: {},
						},
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: legendData,
					},
					series: seriesData,
				};
			} else {
				option = {
					title: {
						text: this.customChart.name,
						x: 'center',
						y: 10,
						textStyle: {
							fontSize: 24,
						},
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: legendData,
						y: 50,
					},
					toolbox: {
						feature: {
							saveAsImage: {},
						},
					},
					grid: {
						y: 110,
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false, //类目起始和结束两端空白策略，默认为true留空，false则顶头
							data: xAxisData,
						},
					],
					yAxis: [
						{
							type: 'value',
						},
					],
					series: seriesData,
				};
				//柱状图的时候两端留空。避免柱状图挡住y轴。折线图则不留空，
				if (this.customChart.style == 2) option.xAxis[0]['boundaryGap'] = true;
				if (this.customChart.conf) {
					var obj = JSON.parse(this.customChart.conf);
					if (obj.yMin == 2) option.yAxis[0]['min'] = 'dataMin';
					if (obj.xShowAll == 2)
						option.xAxis[0]['axisLabel'] = {
							interval: 0, //横轴信息全部显示
							rotate: 30,
						};
				}
				if (
					(this.customChart.style == 2 || this.customChart.style == 1) &&
					data.length > 20
				) {
					option.dataZoom = [
						{
							type: 'inside',
							start: 0,
							end: 10,
						},
						{
							start: 0,
							end: 10,
							handleIcon:
								'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
							handleSize: '80%',
							handleStyle: {
								color: '#fff',
								shadowBlur: 3,
								shadowColor: 'rgba(0, 0, 0, 0.6)',
								shadowOffsetX: 2,
								shadowOffsetY: 2,
							},
						},
					];
					option.grid.bottom = 50;
				} else {
					option.grid.bottom = '3%';
					delete option.dataZoom;
				}
			}
			myChart.setOption(option);
		},
		//回车查询
		searchEnterFun: function (e) {
			var keyCode = window.event ? e.keyCode : e.which;
			if (keyCode == 13) {
				this.search();
			}
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.conditiondiv {
	display: inline-block;
	padding-top: 10px;
}

.conditiondiv > div > span {
	display: inline-block;
	margin-right: 8px;
	width: 60px;
	text-align: right;
}

/deep/.el-tabs__item {
	height: 30px;
	line-height: 30px;
}

.todo-subject {
	cursor: pointer;
}

.todo-subject {
	color: $--theme-color;
}

/deep/.el-tabs__header {
	margin: 0px;
}
</style>
