<style>
.materialReport .chart-card-content {
  	display: none !important;
}
</style>
<style scoped>
	.bg {
		width: 100%;
		height: 100%;
	}
	.bg:after {
		content: '';
		width: 110%;
		height: 110%;
		position: absolute;
		left: -5%;
		top: -5%;
		background: inherit;
		filter: blur(10px);
		z-index: 2;
		background: rgba(0, 0, 0, 0.8);
	}
	.top-ul-style {
		width: 100%;
		padding-left: 0;
	}
	.top-ul-style li {
		height: 100px;
		border: 1px solid #f2f2f2;
		margin-bottom: 5px;
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}
	.li-cost {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-content: flex-end;
	}
	.li-cost span {
		font-size: 16px;
		font-weight: 500;
		min-width: 50px;
		text-align: right;
	}
</style>
<template>
	<div class="materialReport">
		<div class="card-containers">
			<a-tabs type="card">
				<a-tab-pane key="1">
					<span slot="tab"><a-icon type="unordered-list"/>大盘</span>
				</a-tab-pane>
			</a-tabs>
			<div class="option" style="justify-content: space-between">
				<div class="option" style="padding: 0">
					<div class="item">
						<span>日期选择</span>
						<a-range-picker
							v-model="dateValue"
							:ranges="dateRanges"
							:disabled-date="disabledDate"
							style="width: 250px"
						/>
					</div>
					<div class="item">
						<span>媒体维度</span>
						<a-radio-group v-model="mediaDimension" @change="mediaDimensionChange">
							<a-radio-button value="b">快手</a-radio-button>
							<a-radio-button value="a">头条</a-radio-button>
						</a-radio-group>
					</div>
					<div class="item">
						<span>数据维度</span>
						<a-radio-group v-model="dataDimension">
							<a-radio-button value="a">项目</a-radio-button>
							<a-radio-button value="b" disabled>设计组</a-radio-button>
						</a-radio-group>
						<a-select
							v-model="dataDimensionValue"
							style="width: 300px; margin-left: 10px"
							mode="multiple"
							:maxTagCount="2"
							:loading="specificLoading"
							:filterOption="filterOption"
							showSearch
							allowClear
						>
							<a-select-option v-if="dataDimensionList.length == 0 && specificLoading" value="no" disabled>
								数据请求中，请稍后。。。
							</a-select-option>
							<a-select-option
								v-for="(item, index) in dataDimensionList"
								:key="index"
								:value="item.projectId"
							>
								{{ item.projectName }}
							</a-select-option>
						</a-select>
					</div>
				</div>
				<div class="item" style="float: right">
					<a-button
						:loading="searchLoading"
						:disabled="dateValue.length == 0"
						type="primary"
						@click="handleSubmit"
					>
						搜索
					</a-button>
					<a-button
						:disabled="spinning"
						:loading="resetLoading"
						style="margin-left: 15px"
						@click="resetSubmit"
					>
						重置
					</a-button>
				</div>
			</div>
		</div>
		<a-spin :spinning="spinning">
			<a-row :gutter="24" style="margin-top: 20px">
				<a-col :sm="24" :md="12" :xl="6">
					<a-card title="总消耗" class="material-report-card">
						<span slot="extra">
							<a-tooltip title="显示该筛选条件内总消耗" slot="action">
								<a-icon type="info-circle-o"/>
							</a-tooltip>
						</span>
						<div class="report-card-result">
							<div class="report-card-money">￥{{ materialReportCardList.costTotal || 0 }}</div>
							<div class="report-card-msg">
								<span>
									同比
									<a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: green"/>
									<a-icon v-else type="caret-down" style="color: #f00"/>
									{{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
								</span>
								<span>
									日环比
									<a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: green"/>
									<a-icon v-else type="caret-down" style="color: #f00"/>
									{{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
								</span>
							</div>
						</div>
						<div class="report-card-line"></div>
						<div class="report-card-radio">
							<span>昨日消耗：￥{{ materialReportCardList.yesterdayCost }}</span>
						</div>
					</a-card>
				</a-col>
				<a-col :sm="24" :md="12" :xl="6">
					<a-card title="视频上新数" class="material-report-card">
						<span slot="extra">
							<a-tooltip title="显示该筛选条件内上新视频总数" slot="action">
								<a-icon type="info-circle-o"/>
							</a-tooltip>
						</span>
						<div class="report-card-result">
							<div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
							<div
								id="accountIndexEchart"
                                class="accountIndexEchart"
                                style="width:100%; height:50px; margin:0 auto;"
                                ref="accountIndexEchart"
                            >
                            </div>
						</div>
						<div class="report-card-line"></div>
						<div class="report-card-radio">
							<span>素材使用率：{{ Number(materialReportCardList.useCompare).toFixed(2) }}%</span>
						</div>
					</a-card>
				</a-col>
				<a-col :sm="24" :md="12" :xl="6">
					<a-card title="有效视频" class="material-report-card">
						<span slot="extra">
							<a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
								<a-icon type="info-circle-o"/>
							</a-tooltip>
						</span>
						<div class="report-card-result">
							<div class="report-card-money">{{ materialReportCardList.effectiveTotal || 0 }}</div>
							<div
                                class="accountIndexEchart"
                                id="effectiveVideoEcharts"
                                style="width:100%; height:50px; margin:0 auto;"
                                ref="effectiveVideoEcharts"
                            >
                            </div>
						</div>
						<div class="report-card-line"></div>
						<div class="report-card-radio">
							<span>素材有效率：{{ Number(materialReportCardList.effectiveCompare).toFixed(2) }}%</span>
						</div>
					</a-card>
				</a-col>
				<a-col :sm="24" :md="12" :xl="6">
					<a-card title="爆款视频" class="material-report-card">
						<span slot="extra">
							<a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
								<a-icon type="info-circle-o"/>
							</a-tooltip>
						</span>
						<div class="report-card-result">
							<div class="report-card-money">{{ materialReportCardList.hotTotal }}</div>
							<div
                                class="accountIndexEchart"
                                id="popularVideoEcharts"
                                style="width:100%; height:50px; margin:0 auto;"
                                ref="popularVideoEcharts"
                            >
                            </div>
						</div>
						<div class="report-card-line"></div>
						<div class="report-card-radio">
							<span>
								同比
								<a-icon v-if="materialReportCardList.hotYearOnYearCompare >= 0" type="caret-up" style="color: green"/>
								<a-icon v-else type="caret-down" style="color: #f00"/>
								{{ Number(materialReportCardList.hotYearOnYearCompare * 100).toFixed(2) }}%
							</span>
							<span>
								日环比
								<a-icon v-if="materialReportCardList.hostCompare >= 0" type="caret-up" style="color: green"/>
								<a-icon v-else type="caret-down" style="color: #f00"/>
								{{ Number(materialReportCardList.hostCompare * 100).toFixed(2) }}%
							</span>
						</div>
					</a-card>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin-top: 20px" id="getWidth">
				<a-col :xl="18">
					<a-card title="数据趋势" style="width: 100%" :bordered="false">
						<div class="echart">
							<div class="echartBody">
								<div
									id="echart"
									ref="echart"
									style="height: 350px"
									:style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
								>
								</div>
								<a-empty
									v-if="chartList.length == 0"
									style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
								/>
							</div>
						</div>
					</a-card>
				</a-col>
				<a-col :xl="6">
					<a-card title="标签占比" style="width: 100%" :bordered="false">
						<div class="echart">
							<div class="echartBody">
								<a-empty style="height: 350px; position: relative" />
								<!-- <div
									id="echartCircular"
									ref="echartCircular"
									style="height: 350px"
									:style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
								>
								</div> -->
							</div>
						</div>
					</a-card>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin-top: 20px">
				<a-col :xl="12">
					<a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
						<a-radio-group
							v-if="mediaDimension === 'b'"
							v-model="materialRankValue"
							style="margin-bottom: 15px;"
							@change="handleMaterialRanking"
						>
							<a-radio-button :value="0">内部</a-radio-button>
							<a-radio-button :value="1">素造</a-radio-button>
						</a-radio-group>
						<a slot="extra" @click="getMoreVideoList">查看更多</a>
						<div v-if="videoList.length > 0">
							<ul class="top-ul-style">
								<li v-for="(item, index) in videoList" :key="index">
									<div style="display: flex; position: relative; width: 80%; cursor: pointer">
										<span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
											<img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
										</span>
										<div
											style="
											width: 25%;
											height: 100%;
											text-align: center;
											background: #f2f2f2;
											margin-left: 40px;
											border-radius: 5px;
											position: relative;
											"
										>
											<div
												:style="{
													backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
													backgroundSize: 'cover',
													backgroundRepeat: 'no-repeat',
													backgroundPosition: 'center center',
													overflow: 'hidden',
													position: 'absolute',
													top: '0',
													zIndex: '0',
												}"
												class="showShare bg"
												@click="
													visibleVideo = true
													videoUrlShow = item.url
												"
											>
											</div>
											<img
												:src="item.coverUrl || noImg"
												style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
												srcset=""
												@click="
													visibleVideo = true
													videoUrlShow = item.url
												"
											/>
										</div>
										<div
											style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
											@click.stop="toDetail(item.signature)"
										>
											<p style="margin-left: 10px; color: #1890ff">
												{{ item.materialName ? item.materialName : '无素材名称' }}
											</p>
											<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
												<a-tag
													v-for="(items, index) in item.tag.split(',')"
													:key="index"
													style="margin-right: 5px"
													v-if="index <= 3"
												>
													{{ items }}
												</a-tag>
											</p>
										</div>
									</div>
									<div class="li-cost">
										<span>消耗</span>
										<span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
									</div>
								</li>
							</ul>
						</div>
						<div v-else style="height: 200px;line-height: 200px;text-align: center;">
							<a-spin/>
						</div>
					</a-card>
				</a-col>
				<a-col :xl="12">
					<a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
						<a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
							<a-radio-button :value="1">摄像</a-radio-button>
							<a-radio-button :value="2">剪辑</a-radio-button>
							<a-radio-button :value="3">编导</a-radio-button>
						</a-radio-group>
						<a-table
							:columns="columns"
							:data-source="designTopList"
							:loading="designTopLoading"
							:pagination="false"
							bordered
							size="middle"
						>
							<span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
						</a-table>
					</a-card>
				</a-col>
			</a-row>
		</a-spin>
		<a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
			<video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
				您的浏览器不支持 video 标签。
			</video>
		</a-modal>
	</div>
</template>
<script>
import moment from 'moment';
import YoutTable from '@/components/youtTable/YoutTable';
import ChartCard from '@/components/ChartCard';
import Trend from '@/components/Trend';
import {mapGetters} from 'vuex';
import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl'; // 停止除当前外的其他视频播放，及停止所有视频播放的方法

var echarts = require('echarts');
const columnsFixd = [
	{
		title: '排名',
		dataIndex: 'rowNumber',
		align: 'center',
		customRender:(t, r, index) => {
        	return index + 1;
		}
	},
	{
		title: '设计人员',
		dataIndex: 'userName',
		align: 'center'
	},
	{
		title: '角色',
		dataIndex: 'roleName',
		align: 'center'
	},
	{
		title: '消耗(元)',
		dataIndex: 'cost',
		align: 'center',
		scopedSlots: {customRender: 'cost'}
	}
];

export default {
	components: {
		YoutTable,
		ChartCard,
		Trend
	},
	data() {
		return {
			materialReportCardList: {},
			materialRankValue: 0,
			designRankingValue: 1,
			designTopLoading: false,
			noImg: require('@/assets/noImg.png'),
			visibleVideo: false,
			videoUrlShow: '',
			cost: '0',
			spinning: false,
			loading: false,
			chartList: [],
			videoList: [],
			designTopList: [],
			columns: [...columnsFixd], // table的表头
			columnsFixd,
			dateRanges: {
				昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
				近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
				近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
				近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
				近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
				近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
			},
			dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
			dataDimension: 'a',
			mediaDimension: 'b',
			dataDimensionValue: [],
			dataDimensionList: [],
			specificLoading: false,
			clientWidth: 0,
			resetLoading: false,
			searchLoading: false
		}
	},
	watch: {
		visibleVideo(n, o) {
			if (!n) {
				stopOtherVideo();
				closeAllVideoFun();
			}
		}
	},
	methods: {
		...mapGetters(['userInfo']),
		handleMaterialRanking(e) {
			this.materialRankValue = e.target.value;
			this.getVideoTopList();
		},
		handleDesignRanking(e) {
			this.designRankingValue = e.target.value;
			this.getDesignTopList();
		},
		initAccountIndexEchart(data) {
			let xData = data.videoList.length && data.videoList.map(item => item.time);
			let yData = data.videoList.length && data.videoList.map(item => item.count);
			let option = {
                tooltip: {
					trigger: 'axis'
				},
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0
                },
                xAxis: {
					type: 'category',
					show: false,
					boundaryGap: false,
					axisPointer: {
						type: 'none'
					},
					data: xData
				},
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        name: '上新数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#9907f5a6',
                            width: 3
                        },
                        itemStyle: {
                            color: '#9907f5a6',
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: '#9907f5a6' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1, color: 'white' // 100% 处的颜色
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
			return option;
		},
		handleEffectiveVideoEcharts(data) {
			let xData = data.effectiveList.length && data.effectiveList.map(item => item.time);
			let yData = data.effectiveList.length && data.effectiveList.map(item => item.count);
			let option = {
                tooltip: {
					trigger: 'axis'
				},
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0
                },
                xAxis: {
					type: 'category',
					show: false,
					boundaryGap: false,
					axisPointer: {
						type: 'none'
					},
					data: xData
				},
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        name: '上新数',
                        data: yData,
                        type: 'bar',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: '#2461F1' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1, color: 'white' // 100% 处的颜色
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
			return option;
		},
		handlePopularVideoEcharts(data) {
			let xData = data.hotList.length && data.hotList.map(item => item.time);
			let yData = data.hotList.length && data.hotList.map(item => item.count);
			let option = {
                tooltip: {
					trigger: 'axis'
				},
                grid: {
                    left: '5px',
                    top: 0,
                    right: '5px',
                    bottom: 0
                },
                xAxis: {
					type: 'category',
					show: false,
					boundaryGap: false,
					axisPointer: {
						type: 'none'
					},
					data: xData
				},
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        name: '上新数',
                        data: yData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        xAxisIndex: 0,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#2461F1',
                            width: 3
                        },
                        itemStyle: {
                            color: '#2461F1',
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: '#2461F1' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1, color: 'white' // 100% 处的颜色
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
			return option;
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		getData() {
			this.spinning = true
			Promise.all([
				this.getSumData(),
				this.getChartDataList(),
				this.getVideoTopList(),
				this.getDesignTopList()
			]).then(res => {
				this.spinning = false;
				this.resetLoading = false;
				this.searchLoading = false;
			}).catch(error => {
				this.spinning = false;
				this.resetLoading = false;
				this.searchLoading = false;
				this.$error({
					title: '页面数据加载出错',
					content: '请刷新重试或联系管理员查询'
				});
			});
		},
		getProjectList() {
			this.specificLoading = true;
			return new Promise((resolve, reject) => {
				this.postDataAction(
					'/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
				).then(res => {
					this.specificLoading = false;
					if (res.success) {
						this.dataDimensionList = res.result;
						resolve(res.result);
					}
					else {
						reject(res.message);
					}
				});
			});
		},
		getSumData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.postDataAction('/overView/sumData', {
					mediaId: this.mediaDimension == 'a' ? 1 : 2,
					startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
					projects: this.dataDimensionValue
				}).then(res => {
					if (res.success) {
						this.materialReportCardList = res.result;
						this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
						this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
						this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
						resolve(res.result);
					}
					else {
						reject(res.message);
					}
				});
			});
		},
		getChartDataList() {
			return new Promise((resolve, reject) => {
				this.postDataAction('/overView/chartData', {
					mediaId: this.mediaDimension == 'a' ? 1 : 2,
					startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
					projects: this.dataDimensionValue
				}).then(res => {
					if (res.success) {
						this.chartList = res.result;
						if (res.result.length == 0) {
							const myChart = echarts.init(document.getElementById('echart'));
							myChart.dispose();
						}
						else {
							this.initEchart('echart', this.handlerEchartOption(res.result));
						}
						resolve(res.result);
					} else {
						reject(res.message);
					}
				});
			});
		},
		getVideoTopList() {
			this.videoList = []
			return new Promise((resolve, reject) => {
				this.postDataAction('/overView/materialTop', {
					mediaId: this.mediaDimension == 'a' ? 1 : 2,
					startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
					channelType: this.materialRankValue,
					projects: this.dataDimensionValue
				}).then(res => {
					if (res.success) {
						this.videoList = res.result;
						resolve(res.result);
					}
					else {
						reject(res.message);
					}
				});
			});
		},
		getMoreVideoList() {
			var params = {
				mediaId: this.mediaDimension == 'a' ? 1 : 2,
				startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
				endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
				projects: this.dataDimensionValue
			};
			params = JSON.stringify(params);
			if (this.mediaDimension == 'a') {
				localStorage.setItem('TtmaterialParams', params);
				this.$router.push({path: '/materialReport/marterialTtList'});
			}
			else {
				localStorage.setItem('materialParams', params);
				this.$router.push({path: '/materialReport/marterialList'});
			}
		},
		toDetail(md5) {
			let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
			localStorage.setItem('videoInfo', JSON.stringify(params));
			this.$router.push({
				path: '/materialReport/marterialDetail'
			});
		},
		getDesignTopList() {
			this.designTopLoading = true;
			const paramsData = {
				startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
				endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
				mediaId: this.mediaDimension == 'a' ? 1 : 2,
				projects: this.dataDimensionValue,
				type: this.designRankingValue
			};
			this.postDataAction('/overView/designTop', paramsData).then(res => {
				if (res.success) {
					this.designTopLoading = false;
					this.designTopList = res.result;
				}
			});
		},
		getTagProportionAnalyseList() {
			return new Promise((resolve, reject) => {
				this.postDataAction('/overView/tagProportionAnalyse', {}).then(res => {
					if (res.success) {
						resolve(res.result);
					}
					else {
						reject(res.message);
					}
				});
			});
		},
		handleSubmit() {
			this.spinning = true;
			this.searchLoading = true;
			this.getData();
		},
		resetSubmit() {
			this.resetLoading = true;
			this.dateValue = [moment().subtract(7, 'days'), moment()];
			this.dataDimension = 'a';
			this.mediaDimension = 'b';
			this.dataDimensionValue = [];
			this.getData();
		},
		//获取echart的值
		initEchart(idName, optionName) {
			let that = this;
			const chart = this.$refs[idName];
			if (chart) {
				const myChart = echarts.init(document.getElementById(idName));
				myChart.setOption(optionName);
				window.addEventListener('resize', function () {
					that.clientWidth = document.documentElement.clientWidth - 224;
					myChart.resize();
				});
			}
		},
		handlerEchartOption(data) {
			let option = {
				noDataLoadingOption: {
					text: '暂无数据',
					effect: 'bubble',
					effectOption: {
						effect: {
							n: 0
						}
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				legend: {
					icon: 'circle',
					top: '5%',
					right: '5%',
					itemWidth: 6,
					itemGap: 20,
					textStyle: {
						color: '#556677'
					}
				},
				xAxis: {
					type: 'category',
					data: data.map(item => {
						return item.statDate;
					}),
					boundaryGap: false,
					// 坐标轴线
					axisLine: {
						show: false,
						lineStyle: {
							color: '#999'
						}
					},
					// 分割线
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed',
							color: '#e5e5e5'
						}
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false,
						lineStyle: {
							color: '#999'
						}
					},
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: '#e5e5e5'
						}
					}
				},
				series: [
					{
						smooth: true,
						name: '消耗',
						type: 'line',
						stack: '总量',
						data: data.map(item => {
							return item.cost.toFixed(3);
						}),
						symbol: 'circle',
						symbolSize: 6,
						lineStyle: {
							normal: {
								width: 2
							}
						},
						itemStyle: {
							borderColor: '#ffffff',
							borderWidth: 0
						}
					}
				]
			};
			return option;
		},
		handlerAgeOption(data) {
			const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
			let option = {
				color: colorList,
				backgroundColor: '#fff',
				tooltip: {
					formatter: '{b}：{c}'
				},
				legend: {
					orient: 'horizontal',
					top: 'top',
					icon: 'circle',
					width: '100%',
					data: ['形式标签', '场景标签', '基调标签', '其他']
				},
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '50%'],
						data: [
							{value: 0, name: '形式标签'},
							{value: 0, name: '基调标签'},
							{value: 0, name: '场景标签'},
							{value: 0, name: '其他'}
						],
						labelLine: {
							length: 5,
							length2: 5
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '18',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						itemStyle: {
							borderRadius: 5,
							color: params => {
								return colorList[params.dataIndex];
							}
						}
					}
				]
			};
			return option;
		},
		disabledDate(current) {
			return current && current > moment().subtract(1, 'days');
		},
		mediaDimensionChange(e) {
			if (e.target.value === 'b') {
				this.materialRankValue = 0;
			}
			else {
				this.materialRankValue = '';
			}
			this.dataDimensionList = [];
			this.dataDimensionValue = [];
			this.getProjectList();
		},
	},
	mounted() {
		this.clientWidth = document.documentElement.clientWidth - 224;
		this.$nextTick(() => {
			this.getProjectList();
			this.getData();
		});
	},
	activated() {
		this.$nextTick(() => {
			this.clientWidth = document.documentElement.clientWidth - 224;
		});
	}
};
</script>
<style lang="less" scoped>
.materialReport {
	.material-report-card {
		height: 220px;
		/deep/ .ant-card-head {
			border: none;
		}
		/deep/ .ant-card-body {
			padding-top: 5px;
		}
		.report-card-result {
			height: 88px;
		}
		.report-card-money {
			font-size: 30px;
			font-weight: bold;
		}
		.report-card-msg {
			display: flex;
    		justify-content: space-between;
			font-size: 14px;
			margin-top: 20px;
		}
		.report-card-line {
			width: 100%;
			height: 1px;
			margin-top: 20px;
			background: #e8e8e8;
		}
		.report-card-radio {
			display: flex;
    		justify-content: space-between;
			margin-top: 12px;
			font-size: 16px;
		}
	}
	.option {
		background: white;
		padding: 20px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.item {
			margin-right: 15px;
			margin-bottom: 15px;
			height: 32px;
			line-height: 32px;
			flex-shrink: 0;
			span {
				margin-right: 10px;
			}
		}
	}
	.echart {
		margin-top: 20px;
		padding: 0 20px 20px;
		background: white;
		.echart-header {
			padding: 20px 0;
			font-size: 15px;
			font-weight: 600;
		}
	}
	.tableBody {
		margin-top: 20px;
	}
}
</style>
<style>
.materialReport .card-containers {
	overflow: hidden !important;
}
.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
	margin-top: -16px !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
	background: #fff !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
  	border-color: #fff !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
	border-color: transparent !important;
	background: transparent !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
	border-color: #fff !important;
	background: #fff !important;
}
</style>