<template>
	<div class="weekly">
		<!-- <el-row class="chartRow" :gutter="12"> -->
			<!-- <el-col :span="24"> -->
				<!-- 本周总体对比 -->
                <!-- <comprehen-chart id="overallChart" class="overall-wrapper" :options="overall_ops" chartType="Pie"></comprehen-chart>   -->
			 <!-- </el-col>  -->
		<!-- </el-row> -->
		<el-row class="chartRow" :gutter="12">
			<el-col :span="24" class="download-parent">
				<!-- 本周每日对比 -->
				<comprehen-chart id="wnearfifChart" class="nearfif-wrapper" :options="dayTrend_ops" chartType="Line"></comprehen-chart>
				<span class="ehcarts-title">{{ i18nFormatter(Trend_title) }}</span>
				<span class="download-text" @click="exportDataHandle('wnearfifChart',i18nFormatter(Trend_title),'dayTrend')">{{$t('allPages.load')}}</span>
			</el-col>
		</el-row>
		<el-row class="chartRow" :gutter="12">
			<el-col :span="12" class="download-parent">
				<!-- 顾客性别对比 -->
				<!-- <div class="gender-wrapper"></div> -->
				<comprehen-chart id="wgenderChart" class="gender-wrapper" :options="customerfeatureGender_ops" chartType="GenderBar"></comprehen-chart>
				<span class="ehcarts-title">{{ i18nFormatter(customerfeature_gender_title) }}</span>
				<span class="download-text" @click="exportDataHandle('wgenderChart',i18nFormatter(customerfeature_gender_title),'customerfeature_gender')">{{$t('allPages.load')}}</span>
			</el-col>
			<el-col :span="12" class="download-parent">
				<!-- 顾客年龄对比 -->
				<!-- <div class="age-wrapper"></div> -->
				<comprehen-chart id="wageChart" class="age-wrapper" :options="customerfeatureAge_ops" chartType="AgeBar"></comprehen-chart>
				<span class="ehcarts-title">{{ i18nFormatter(customerfeature_age_title) }}</span>
				<span class="download-text" @click="exportDataHandle('wageChart',i18nFormatter(customerfeature_age_title),'customerfeature_age')">{{$t('allPages.load')}}</span>
			</el-col>
		</el-row>
		<export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
export default {
	props: {
        propparam: Object
    },
	data() {
		return {
			customerfeatureGender_ops: {},	// 顾客性别对比
			customerfeatureAge_ops: {},	// 顾客年龄对比
			dayTrend_ops: {},	// 近15天趋势对比
			tableKeyToId: {},
            tableIds: '',
			emitData: [],
			startTime:'',
			endTime:'',
			apiUrl:'',
			Trend_title: '',
			customerfeature_gender_title: '',
			customerfeature_age_title: '',
		}
	},
	components: {
		'comprehen-chart': publicChart,
		'export-data-dialog': exportData,
	},
	watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    mounted() {
        // this.getTableId();
    },
	methods: {
		refreshHandle(param) {
			if(param.dateType !== '/comprehen/weekly') return;
			this.emitData = param.data;
			if(this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
				this.getChartData(this.tableIds);
			} else {
				this.getChartId();
			}
		},
		getChartId() {
			this.tableKeyToId = {};
			this.tableIds = '';
			this.$api.baseReport.reportChart({
				report: 'SynthesizeCompare',
				// _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
				let tableItem = res.data.data;
				tableItem.forEach((item, index) => {
                    this.tableKeyToId[item.key] = item.id;
                    if(item.key === 'customerfeature_gender' || item.key === 'customerfeature_age' || item.key === 'dayTrend') {
                        if(index == tableItem.length - 1) {
                            this.tableIds += item.id;
                        } else {
                            this.tableIds += item.id + ',';
                        }
                    }
				});
				this.getChartData(this.tableIds);
			})
		},
		getChartData(tableIds) {
			if(!tableIds) return;
			this.customerfeatureGender_ops = {};
			this.customerfeatureAge_ops = {};
			this.dayTrend_ops = {};
			let param = {};
			if(this.emitData.asis_time) {
				this.startTime = this.getWeekTime(this.emitData.asis_time, false);
				this.endTime = this.getWeekTime(this.emitData.asis_time, true);
            } else {
				// let week_now_num = this.getWeekTime(new Date());
                // let week_now_time = new Date(Date.parse(new Date()) - (week_now_num * 24 * 60 * 60 * 1000));
                this.startTime = this.getWeekTime(new Date(), false);
                this.endTime = this.getWeekTime(new Date(), true);
            }
            if(this.emitData.asis_level === 'format') {
                // this.apiUrl = '/report/synthesize/mall';
				this.emitData.asis_level = 'mall';
                param = {
                    orgIds: this.emitData.asis_org,
                    startDate: this.startTime,
                    endDate: this.endTime,
                    chartIds: tableIds,
                    kpiType: this.emitData.asis_kpi,
                    formatIds: this.emitData.asis_format,
                    // _t: Date.parse(new Date()) / 1000
                }
            } else {
                // this.apiUrl = '/report/synthesize/' + this.emitData.asis_level;
                param = {
                    orgIds: this.emitData.asis_org,
                    startDate: this.startTime,
                    endDate: this.endTime,
                    chartIds: tableIds,
                    kpiType: this.emitData.asis_kpi,
                    // _t: Date.parse(new Date()) / 1000
                }
            }
			this.apiUrl = '/report/synthesize/' + this.emitData.asis_level;
			this.$api.analysisReport.synthesizeAnalysis(this.emitData.asis_level, param)
            .then(res => {
				let report = 'SynthesizeCompare';
				let gender_ops = {}, age_ops = {};
				gender_ops = res.data.data.body.customerfeature_gender;
				gender_ops['color'] = ['#3BB8FF', '#FFC62E'];
				this.customerfeatureGender_ops = gender_ops;
				// this.customerfeature_gender_title = gender_ops.title;
				this.customerfeature_gender_title = report + 'customerfeature_gender';
				age_ops = res.data.data.body.customerfeature_age;
				age_ops['color'] = ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'];
				this.customerfeatureAge_ops = age_ops;
				// this.customerfeature_age_title = age_ops.title;
				this.customerfeature_age_title = report + 'customerfeature_age';
				this.dayTrend_ops = res.data.data.body.dayTrend;
				// this.Trend_title = res.data.data.body.dayTrend.title;
				this.Trend_title = report + 'dayTrend';
			})
			.catch(err => {
				this.catchErrorHandle(err)
			})
		},
        exportDataHandle(domId, title, chartKey) {
            // 
            let chartId = this.tableKeyToId[chartKey];
            let exportNeed = {
                domId: domId,
                title: title,
                data: {
                    url: window._vionConfig.apiUrl + this.apiUrl + '/' + chartId + '/excel',
                    params: 'orgIds=' + this.emitData.asis_org + '&startDate=' + this.startTime + '&endDate=' + this.endTime + '&kpiType=' + this.emitData.asis_kpi
                }
            }
            // console.log('comprehen week exportNeed', exportNeed)
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
	}
}
</script>