<template>
	<el-container class="mainBox mainBoxHeaderNoBorder">
		<el-main class="nopadding">
			<el-scrollbar>
				<div class="searchMain">
					<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData">
						<div class="searchItem">
							<label class="name">时间粒度</label>
							<el-select :size="size" class="input" placeholder="请选择时间粒度" v-model="reqParams.date_type">
								<el-option v-for="(item,index) in setMap.dataTypeList" :key="index" :label="item.label" :value="item.date_type"></el-option>
							</el-select>
						</div>
						<div class="searchItem">
							<label class="name">时间范围</label>
							<el-date-picker :size="size" class="input" :type="reqParams.date_type=='day'?'daterange':reqParams.date_type=='month'?'monthrange':reqParams.date_type=='year'?'yearrange':'datetimerange'" v-model="reqParams.dateSelect" value-format="YYYY-MM-DD"
								start-placeholder="开始时间"
								end-placeholder="结束时间">
							</el-date-picker>
						</div>
					</scSearch>
					<div class="searchItem searchBtn">
						<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
						<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
					</div>
					<div class="exportBtn">
						<scExport :size="size" @exportData="exportData" @updateShow="exportChangeShow" :show="exportShow" type="20">
							<el-button :size="size" v-auth="'costSummaryDownload'" icon="sc-icon-Download" :disabled="exportShow" @click="exportData">导出</el-button>
						</scExport>
					</div>
				</div>
				<div class="mainMiddle" v-loading="loading" element-loading-text="努力加载中...">
					<div class="echartsView">
						<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
					</div>
					<div class="tableView">
						<feesTable :info="feesData.tableList"></feesTable>
					</div>
				</div>
			</el-scrollbar>
		</el-main>
	</el-container>
</template>

<script>
import scEcharts from '@/components/scEcharts';
import feesTable from './components/table'
export default {
	name:"cost",
	components: {
		scEcharts,
		feesTable
	},
	data() {
		return {
			size:'small',
			loading:false,
			dialog: {
				save: false,
				show: false,
			},
			setMap:{
				dataTypeList:[
					{date_type:'hour',label:'按时'},
					{date_type:'day',label:'按天'},
					{date_type:'month',label:'按月'},
					{date_type:'year',label:'按年'},
				],
			},
			option:{},
			feesData:{
				tableList:{}
			},

			selection: [],
			exportShow:false,
			searchList:[
				{name:'成本类型',type:'select',code:['type_name'], data:[], placeholder:"请选择费用类型",show:true},
				{name:'成本类别',type:'select',code:['category_name'], data:[], placeholder:"请选择费用类别",show:true},
			],
			params: {},
			reqParams:{
				page:1,
				pageSize:30,
				date_type:'month',
				dateSelect:[],
				start:'',
				end:'',
			}
		}
	},
	watch:{
		'reqParams.dateSelect':function (val){
			if(val){
				this.reqParams.start = val[0];
				this.reqParams.end = val[1];
			}else{
				this.reqParams.start = "";
				this.reqParams.end = "";
			}
		}
	},
	computed:{

	},
	created(){

	},
	mounted() {
		this.getData();
	},
	methods: {
		async getSelectData(item) {
			let {data, params} = item;
			this.params = params;
			let searchParams = this.$TOOL.objCopy(params);
			searchParams.field = ""
			if (typeof data.code === 'string') {
				searchParams.field = data.code;
			} else {
				searchParams.field = data.code[0];
			}
			if (data.type == 'select') {
				const res = await this.$API.finance.cost.field.post(searchParams);
				if (res.code == 200) {
					if (res.data && res.data.length > 0) {
						res.data.forEach(item => {
							item.label = item[data.code];
							item.value = item.id;
						})
					}
					this.searchList.forEach(item => {
						if (item.code == data.code) {
							item.data = res.data;
						}
					})
				}
			}
		},

		async getData() {
			this.loading = true;
			const res = await this.$API.finance.cost.summary.post(this.reqParams);
			this.loading = false;
			if(res.code == 200){
				res.data.tableList.data = this.setTableList(res.data.tableList.data);
				this.feesData = res.data;
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function (params) {
							const filteredParams = params.filter(param => param.value !== 0);
							let totalData = 0;
							filteredParams.map(em=> {
								totalData += em.value
							})
							const formattedParams = filteredParams.map(param => {
								const percentage =  (param.value/totalData*100).toFixed(2);
								const seriesColor = param.color;
								return `<span style="display: flex;justify-content: space-between"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${seriesColor};"></span>${param.seriesName} </span><div style="display: flex;justify-content: space-between;margin-left: 15px"><span style="font-weight: 500;display: inline-block;text-align: right;">¥ ${param.value}</span><span style="display: inline-block;margin-left: 10px; width: 50px;text-align: left;font-weight: 500;">${percentage}%</span></div></span>`;
							}).join('');
							return params[0].name + '<br/>总金额：¥ '+ totalData.toFixed(2) + '<br/>' + formattedParams;
						}
					},
					toolbox:{
						show:true,
						feature: {
							magicType: { type: ['line', 'bar'] },
						}
					},
					grid:{
						bottom:40,
						left:10,
					},
					legend:{
						show:true,
						bottom:10
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: this.feesData.dateRange
					},
					yAxis: [{
						type: 'value',
						show:true,
						axisLabel:{
							margin:this.feesData.dateRange.length<13? 56:20
						},
						name: '',
						axisTick:{
							show:false
						},
						splitLine: {
							show: false
						}
					}],
					series: this.setList(this.feesData.summaryList),
				};
				this.option = option;
			}
		},
		setList(data){
			let newData = data[0].cost_item.map(item => ({
				name: item,
				data: [],
				type:'bar',
				symbol: 'none',
				stack:'fees',
				smooth: true,
			}));
			if(data && data.length>0){
				data.forEach(item => {
					item.cost_amount.forEach((amount, index) => {
						newData[index].data.push(amount);
					});
				});
			}
			return newData
		},
		setTableList(data){
			let newData = data.columns.map(column => [column]);
			if(data.rows && data.rows.length>0){
				data.rows.forEach((row, rowIndex) => {
					data.columns.forEach((columnName, columnIndex) => {
						newData[columnIndex][1 + rowIndex] = row[columnIndex]==0?'-':'¥'+row[columnIndex];
					});
				});
			}
			return newData
		},

		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},

		// 下载导出
		exportChangeShow(params){
			if(params.type == 20){
				this.exportShow = params.status==0?true:false
			}
		},
		async exportData() {
			if(this.exportShow) return
			const res = await this.$API.finance.cost.summaryExport.post(this.reqParams);
			if(res.code == 200){
				this.exportShow = true;
				this.$message.success('开始导出');
			}
		},
		upSearch(){
			this.reqParams = {...this.reqParams,...this.params};
			this.getData();
		},
		reset(){
			this.reqParams = {
				page:1,
				pageSize:30,
				date_type:'month',
				dateSelect:[],
				start:'',
				end:''
			};
			this.$refs.scSearch.reload();
			this.getData();
		},
	}
}
</script>

<style lang="scss" scoped>
.logoCell{
	display: flex;
	align-items: center;
	height: 20px;
	margin: 0 auto;
}
.mainMiddle{
	min-height: 600px;
}
</style>
