<template>
	<div id="statisticalManagement">
		<el-tabs type="border-card" v-model="tabVal">
			<el-tab-pane :label="$t('dialog.statisTitel1')">
				<el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="68px">
					<el-form-item :label="$t('table.beginDate')" >
						<el-date-picker clearable
						v-model="queryParams1.beginDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.beginDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('table.endDate')">
						<el-date-picker clearable
						v-model="queryParams1.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.endDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">{{$t('btn.search')}}</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">{{$t('btn.Reset')}}</el-button>
					</el-form-item>
				</el-form>
				<div id="goodsCharts"></div>
			</el-tab-pane>
			<el-tab-pane :label="$t('dialog.statisTitel2')">
				<div id="byMonthCharts"></div>
			</el-tab-pane>
			<el-tab-pane :label="$t('dialog.statisTitel3')">
				<el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="68px">
					<el-form-item :label="$t('table.beginDate')" >
						<el-date-picker clearable
						v-model="queryParams2.beginDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.beginDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('table.endDate')">
						<el-date-picker clearable
						v-model="queryParams2.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.endDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">{{$t('btn.search')}}</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">{{$t('btn.Reset')}}</el-button>
					</el-form-item>
				</el-form>
				<div id="departure"></div>
			</el-tab-pane>
			<el-tab-pane :label="$t('dialog.statisTitel4')">
				<el-form :model="queryParams3" ref="queryForm3" size="small" :inline="true" label-width="68px">
					<el-form-item :label="$t('table.beginDate')" >
						<el-date-picker clearable
						v-model="queryParams3.beginDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.beginDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('table.endDate')">
						<el-date-picker clearable
						v-model="queryParams3.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.endDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery3">{{$t('btn.search')}}</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery3">{{$t('btn.Reset')}}</el-button>
					</el-form-item>
				</el-form>
				<div id="type"></div>
			</el-tab-pane>
			<el-tab-pane :label="$t('dialog.statisTitel5')">
				<el-form :model="queryParams4" ref="queryForm4" size="small" :inline="true" label-width="68px">
					<el-form-item :label="$t('table.beginDate')" >
						<el-date-picker clearable
						v-model="queryParams4.beginDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.beginDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('table.endDate')">
						<el-date-picker clearable
						v-model="queryParams4.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						:placeholder="$t('placeholder.endDate')">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery4">{{$t('btn.search')}}</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery4">{{$t('btn.Reset')}}</el-button>
					</el-form-item>
				</el-form>
				<div id="Bus"></div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import {commoditySaleStatis,statisByMonth,statis4Departure,statis4Type,statis4Bus} from '@/api/statis/statis'

export default {
	components:{},
	data(){
		return {
			tabVal:'0',
			queryParams1:{
				beginDate:'',
				endDate:''
			},
			queryParams2:{
				beginDate:'',
				endDate:''
			},
			queryParams3:{
				beginDate:'',
				endDate:''
			},
			queryParams4:{
				beginDate:'',
				endDate:''
			},
			goodsOption:{
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					name: this.$t('dialog.salesVolume'),
					type: 'value'
				},
				series: [
					{
						// name: '销量',
						data: [],
						type: 'bar',
						itemStyle: {        //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
								color: function(params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
							}
						}
					}
				]
			},
			byMonthOption:{
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					name: this.$t('dialog.salesVolume'),
					type: 'value'
				},
				series: [
					{
						// name: '销量',
						data: [],
						type: 'bar',
						itemStyle: {        //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
								color: function(params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
							}
						}
					}
				]
			},
			departureOption:{
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					name: this.$t('dialog.salesVolume'),
					type: 'value'
				},
				series: [
					{
						// name: '销量',
						data: [],
						type: 'bar',
						itemStyle: {        //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
								color: function(params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
							}
						}
					}
				]
			},
			typeOption:
			{
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					name: this.$t('dialog.salesVolume'),
					type: 'value'
				},
				series: [
					{
						// name: '销量',
						data: [],
						type: 'bar',
						itemStyle: {        //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
								color: function(params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
							}
						}
					}
				]
			},
			BusOption:{
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					name: this.$t('dialog.salesVolume'),
					type: 'value'
				},
				series: [
					{
						// name: '销量',
						data: [],
						type: 'bar',
						itemStyle: {        //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
								color: function(params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
							}
						}
					}
				]
			},
		}
	},
	watch:{
		tabVal(val){
			if(val=='0'){
				this.getStatisData1()
			}
			if(val=='1'){
				this.getStatisData2()
			}
			if(val=='2'){
				this.getStatisData3()
			}
			if(val=='3'){
				this.getStatisData4()
			}
			if(val=='4'){
				this.getStatisData5()
			}
			// this.setCharts()
		}
	},
	mounted(){
		this.getStatisData1()
	},
	methods:{
		/** 搜索按钮操作 */
		handleQuery1() {
			this.getStatisData1()
		},
		/** 重置按钮操作 */
		resetQuery1() {
			this.resetForm("queryForm1");
			this.handleQuery1();
		},
		/** 搜索按钮操作 */
		handleQuery2() {
			this.getStatisData3()
		},
		/** 重置按钮操作 */
		resetQuery2() {
			this.resetForm("queryForm2");
			this.handleQuery2();
		},
		/** 搜索按钮操作 */
		handleQuery3() {
			this.getStatisData4()
		},
		/** 重置按钮操作 */
		resetQuery3() {
			this.resetForm("queryForm3");
			this.handleQuery3();
		},
		/** 搜索按钮操作 */
		handleQuery4() {
			this.getStatisData5()
		},
		/** 重置按钮操作 */
		resetQuery4() {
			this.resetForm("queryForm4");
			this.handleQuery4();
		},
		getStatisData1(){
			// 商品
			commoditySaleStatis(this.queryParams1).then(res=>{
				if(res.code==200){
					let arrX = []
					let arrY = []
					for(let i=0;i<res.data.length;i++){
						arrX.push(res.data[i].commodityName)
						arrY.push(res.data[i].money)
					}
					this.goodsOption.xAxis.data = arrX
					this.goodsOption.series[0].data = arrY
					let goodsCharts = echarts.init(document.getElementById('goodsCharts'))
					goodsCharts.setOption(this.goodsOption)
				}
			})
		},
		getStatisData2(){
			// 月份
			statisByMonth().then(res=>{
				if(res.code==200){
					let arrX = []
					let arrY = []
					for(let i=0;i<res.data.length;i++){
						arrX.push(res.data[i].month)
						arrY.push(res.data[i].money)
					}
					this.byMonthOption.xAxis.data = arrX
					this.byMonthOption.series[0].data = arrY
					let byMonthCharts = echarts.init(document.getElementById('byMonthCharts'))
					byMonthCharts.setOption(this.byMonthOption)
				}
			})
		},
		getStatisData3(){
			// 出发地
			statis4Departure(this.queryParams2).then(res=>{
				if(res.code==200){
					let arrX = []
					let arrY = []
					for(let i=0;i<res.data.length;i++){
						arrX.push(res.data[i].departurePlace)
						arrY.push(res.data[i].money)
					}
					this.departureOption.xAxis.data = arrX
					this.departureOption.series[0].data = arrY
					let departureCharts = echarts.init(document.getElementById('departure'))
					departureCharts.setOption(this.departureOption)
				}
			})
		},
		getStatisData4(){
			// 类型
			statis4Type(this.queryParams3).then(res=>{
				if(res.code==200){
					let arrX = []
					let arrY = []
					for(let i=0;i<res.data.length;i++){
						arrX.push(res.data[i].typeName)
						arrY.push(res.data[i].money)
					}
					this.typeOption.xAxis.data = arrX
					this.typeOption.series[0].data = arrY
					let typeCharts = echarts.init(document.getElementById('type'))
					typeCharts.setOption(this.typeOption)
				}
			})
		},
		getStatisData5(){
			// 公司
			statis4Bus(this.queryParams4).then(res=>{
				if(res.code==200){
					let arrX = []
					let arrY = []
					for(let i=0;i<res.data.length;i++){
						arrX.push(res.data[i].busName)
						arrY.push(res.data[i].money)
					}
					this.BusOption.xAxis.data = arrX
					this.BusOption.series[0].data = arrY
					let BusCharts = echarts.init(document.getElementById('Bus'))
					BusCharts.setOption(this.BusOption)
				}
			})
		},
		// setCharts(){
		// 	let goodsCharts = echarts.init(document.getElementsByClassName('goodsCharts')[0])
		// 	goodsCharts.setOption(this.goodsOption)
		// }
	}
}
</script>

<style lang="scss" scoped>
#statisticalManagement{
	margin: 20px;
	#goodsCharts{
		width:1200px;
		height: 800px;
	}
	#byMonthCharts{
		width:1200px;
		height: 800px;
	}
	#departure{
		width:1200px;
		height: 800px;
	}
	#type{
		width:1200px;
		height: 800px;
	}
	#Bus{
		width:1200px;
		height: 800px;
	}
}
</style>
