<template>
	<div class="div_main">
		<div>
			<div class="div_search">
				<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'">
					<div>
						<el-form-item label="所属组织" prop="gridId">
							<el-cascader
								class="customer_cascader"
								ref="myCascader"
								filterable
								v-model="formData.orgId"
								:options="orgOptions"
								:props="orgOptionProps"
								:show-all-levels="false"
								@change="handleChangeAgency"
							></el-cascader>
						</el-form-item>
						<el-form-item label="上报时间" prop="startTime">
							<el-date-picker
								v-model="formData.startDate"
								:picker-options="startPickerOptions"
								class="item_width_2"
								size="small"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								value="yyyy-MM-dd"
								placeholder="开始时间"
							></el-date-picker>
							<span class="data-tag">至</span>
							<el-date-picker
								v-model="formData.endDate"
								:picker-options="endPickerOptions"
								class="item_width_2 data-tag"
								size="small"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								value="yyyy-MM-dd"
								placeholder="结束时间"
							></el-date-picker>
						</el-form-item>
						<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
					</div>
				</el-form>
			</div>
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="div_table">
						<div class="div_table_title">社区活跃情况</div>
						<div class="census_searchcensus2">
							<div class="census_searchcensus_box">
								<img src="../../../assets/img/census/活跃.png" />
								<div>
									<h2>{{censusData.activityCount}}</h2>
									<h3>社区活跃数量</h3>
								</div>
							</div>
							<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button>
						</div>
						<el-table
							:data="tableData"
							border
							v-loading="tableLoading"
							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
							class="table"
							style="width: 100%"
							:height="maxTableHeight"
						>
							<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
							<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="loginCount" label="登录次数" min-width="140" align="center" :show-overflow-tooltip="true" />
							<el-table-column prop="accountActivityCount" label="活跃账号数" align="center" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="accountCount" align="center" width="110" label="总账号数" :show-overflow-tooltip="true"></el-table-column>
						</el-table>

						
					</div>
				</el-col>
				<el-col :span="12">
					<div class="div_table">
						<div class="div_table_title">社区不活跃情况</div>
						<div class="census_searchcensus2">
							<div class="census_searchcensus_box">
								<img src="../../../assets/img/census/不活跃.png" />
								<div>
									<h2>{{censusData.inactivityCount}}</h2>
									<h3>社区不活跃数量</h3>
								</div>
							</div>
							<el-button size="small" class="diy-button--output" @click="handleExport(0)">导出</el-button>
						</div>
						<el-table
							:data="tableData"
							border
							v-loading="tableLoading"
							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
							class="table"
							style="width: 100%"
							:height="maxTableHeight"
						>
							<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
							<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column>
						</el-table>
						
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { requestPost } from '@/js/dai/request';
import nextTick from 'dai-js/tools/nextTick';
import { mapGetters } from 'vuex';

import axios from 'axios';

export default {
	components: {},

	data() {
		let endDisabledDate = time => {
			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
			let nowData = Date.now();
			if (this.formData.startTime) {
				let startTime = new Date(this.formData.startTime);
				return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime;
			} else {
				return time.getTime() > nowData;
			}
		};
		let startDisabledDate = time => {
			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
			let nowData = Date.now();
			return time.getTime() > nowData;
		};

		return {
			tableLoading: false,
			pageType: 'list', // 列表list 新增add  处理dispose 详情info
			user: {},
			agencyId: '',
			gridList: [], //所属网格list--场所区域
			agencyIdArray: [],
			orgOptions: [],
			orgOptionProps: {
				multiple: false,
				value: 'agencyId',
				label: 'agencyName',
				children: 'subAgencyList',
				checkStrictly: true
			},
			tableData: [],

			formData: {
				orgId:"",
				startDate:"",
				endDate:"",
			},
			cateOptions: [],
			eventTypeCheck: [],
			pageNo: 1,
			pageSize: window.localStorage.getItem('pageSize') || 20,
			total: 1,
			endPickerOptions: {
				disabledDate: endDisabledDate
			},
			startPickerOptions: {
				disabledDate: startDisabledDate
			},
			censusData:{}
		};
	},
	computed: {
		maxTableHeight() {
			return this.$store.state.inIframe ? this.clientHeight - 400 + this.iframeHeigh : this.clientHeight - 400;
		},

		...mapGetters(['clientHeight', 'iframeHeight'])
	},
	watch: {
		'formData.endTime': function(val) {
			if (val && val != '') {
				let arrayTemp = val.split(' ');
				this.formData.endTime = arrayTemp[0] + ' 23:59:59';
			}
		}
	},
	mounted() {
		console.log(this.$store.state);
		this.user = this.$store.state.user;
		this.agencyId = this.user.agencyId;
		this.getOrgTreeList();
		this.getTableData();
		this.getTableData2();
		this.getCountLevel();
	},
	methods: {
		handleChangeAgency(val) {
			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
			console.log(obj);
			this.formData.orgId = obj.agencyId;
			this.formData.level = obj.level;
		},

		handleSearch(val) {
			console.log(this.formData);
			this.pageNo = 1;
			this.getTableData();
			this.getTableData2();
			this.getCountLevel();
		},

		getOrgTreeList() {
			const { user } = this.$store.state;
			this.$http
				.post('gov/org/customeragency/staffinagencylist', {})
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg);
					} else {
						console.log('获取组织树成功', res.data);
						let { agencyList, subAgencyList } = res.data;
						const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
						this.orgOptions = this.deepTree(_arr);
					}
				})
				.catch(() => {
					return this.$message.error('网络错误');
				});
		},

		async handleExport(type) {
			const url = '/gov/org/staffLoginLog/accountActivityInfo-export';
			const {formData } = this;
			axios({
				url: window.SITE_CONFIG['apiURL'] + url,
				method: 'post',
				data: {
					isActivity:type,
					...formData
				},
				responseType: 'blob'
			})
				.then(res => {
					let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
					console.log('filename', fileName);
					let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
					var url = window.URL.createObjectURL(blob);
					var aLink = document.createElement('a');
					aLink.style.display = 'none';
					aLink.href = url;
					aLink.setAttribute('download', fileName);
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink); //下载完成移除元素
					window.URL.revokeObjectURL(url); //释放掉blob对象
				})
				.catch(err => {
					console.log('获取导出情失败', err);
					return this.$message.error('网络错误');
				});
		},

		//加载组织数据
		async handleDispose(row) {
			this.eventId = row.icEventId;
			const url = '/gov/project/icEvent/detail';
			// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail";

			const { data, code, msg } = await requestPost(url, {
				icEventId: this.eventId
			});

			if (code === 0) {
				this.eventDetailData = { ...data };
				this.pageType = 'dispose';
			} else {
				this.$message.error(msg);
			}
		},

		async getCountLevel() {
			const url = '/gov/org/staffLoginLog/getActivityTotal';
			// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/count-level';
			let param = { ...this.formData };
			const { data, code, msg } = await requestPost(url, param);
			console.log('getCountLeveldata', data);
			if (code === 0) {
				this.censusData = data;
				console.log("this.censusData ",this.censusData )
			} else {
				this.$message.error(msg);
			}
		},
		async getTableData() {
			this.tableLoading = true;

			const url = '/gov/org/staffLoginLog/getAccountActivityInfo';

			const { formData } = this;
			const { data, code, msg } = await requestPost(url, {
				isActivity: 1,
				...formData
			});

			this.tableLoading = false;
			if (code === 0) {
				this.tableData = data.list
					? data.list.map(item => {
							return item;
					  })
					: [];
			} else {
				this.$message.error(msg);
			}
		},
		async getTableData2() {
			this.tableLoading2 = true;

			const url = '/gov/org/staffLoginLog/getAccountActivityInfo';

			const { formData } = this;
			const { data, code, msg } = await requestPost(url, {
				isActivity: 0,
				...formData
			});

			this.tableLoading2 = false;
			if (code === 0) {
				this.tableData2 = data.list
					? data.list.map(item => {
							return item;
					  })
					: [];
			} else {
				this.$message.error(msg);
			}
		},

		deepTree(arr, child) {
			if (Array.isArray(arr) && arr.length > 0) {
				return arr.map(item => {
					// if (child === 'subAgencyList') item.value = item.orgType + '-' + item.orgId
					return {
						...item,
						[child]: (item[child] && item[child].length > 0 && this.deepTree(item[child], child)) || null
					};
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/buttonstyle.scss';
@import '@/assets/scss/modules/management/list-main.scss';
@import '@/assets/scss/modules/shequzhili/event-info.scss';
.btnSearch {

	width: 100px;
	height: 36px;
	background: #2195fe;
	box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31);
	border-radius: 6px;
	color: #fff;
}
.div_search {
	.item_width_2 {
		width: 200px;
	}
}
// /这里是不一样的,居左，从下对齐
.census_searchcensus2 {
	text-align: center;
	margin: 0 auto;
	display: flex;

	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
	margin-top: 20px;
	.census_searchcensus_box {
		align-items: flex-end;
		display: flex;
		img {
			width: 64px;
			height: 64px;
			margin-right: 20px;
		}
		h2 {
			font-size: 28px;
			color: #333333;

			text-align: left;
			line-height: 40px;
			margin: 0px;
		}
		h3 {
			font-size: 14px;
			color: #333333;

			text-align: left;

			margin: 0px;
			font-weight: normal;
		}
	}
}
.div_table_title {
	margin-top: 20px;
	line-height: 30px;
	font-size: 20px;

	font-weight: bold;
	color: #333333;
}
.diy-button--output {
	width: 100px;
	height: 38px;
	background: #feb349;
	box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
	border-radius: 6px;
	color: #fff;
}
</style>
