<template>
	<div class="index-container">
		<Loading v-show="isLoadingList"></Loading>
		<vuescroll ref="vs">
			<!--学校名称部分 -->
			<!-- 			<div class="section school-info">
				<div class="school-info-box">
					<span class="school-info-name">{{ schoolData.name }}{{ $t('totalAnalysis.totalIndex.title') }}</span>
				</div>
			</div> -->
			<div class="section">
				<!-- 评测数据统计部分 -->
				<div class="section">
					<div class="section-title">
						{{ $t("totalAnalysis.ti_title2") }}
					</div>
					<div class="section-box">
						<div class="exam-data-item block-item">
							<div class="item-content" @click="goAnswerSheet">
								<div class="item-num">{{ originList.length }}</div>
								<div class="item-name">
									{{ $t("totalAnalysis.ti_text12") }}
								</div>
							</div>
						</div>
						<div class="exam-data-item block-item">
							<div class="item-content">
								<div class="item-num">{{ originList.filter(i => i.type === 'regular').length }}</div>
								<div class="item-name">
									{{ $t("totalAnalysis.ti_text6") }}
								</div>
							</div>
						</div>
						<div class="exam-data-item block-item">
							<div class="item-content">
								<div class="item-num">{{ originList.filter(i => i.type === 'simulation').length }}</div>
								<div class="item-name">
									{{ $t("totalAnalysis.ti_text7") }}
								</div>
							</div>
						</div>
						<div class="exam-data-item block-item">
							<div class="item-content">
								<div class="item-num">{{ originList.filter(i => i.type === 'normal').length }}</div>
								<div class="item-name">
									{{ $t("totalAnalysis.ti_text8") }}
								</div>
							</div>
						</div>
						<div class="exam-data-item block-item">
							<div class="item-content">
								<div class="item-num">0</div>
								<div class="item-name">
									{{ $t("totalAnalysis.ti_text9") }}
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 评测列表数据部分 -->
				<div class="section exam-list-wrap">
					<div class="section-title">
						{{ $t("totalAnalysis.ti_title5") }}
						<span class="filter-icon" @click="isShowFilter = !isShowFilter">
							<Icon type="ios-funnel" />{{$t("totalAnalysis.echarts_text10")}}
						</span>
					</div>

					<transition name="indexFade">
						<div class="el-filter-wrap" v-show="isShowFilter">
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition1") }}:</span>
								<RadioGroup v-model="filterPeriod" type="button" @on-change="filterPeriodChange">
									<Radio v-for="(item, index) in schoolData.period" :label="item.name" :key="index">{{ item.name }}</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition2") }}:</span>
								<RadioGroup v-model="filterGrade" type="button" @on-change="filterGradeChange">
									<Radio :label="$t('totalAnalysis.all')">{{ $t('totalAnalysis.all') }}</Radio>
									<Radio v-for="(item, index) in filterGradeList" :label="item.name" :key="index">{{ item.name }}</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition8") }}:</span>
								<RadioGroup v-model="filterYear" type="button" @on-change="filterYearChange">
									<Radio :label="$t('totalAnalysis.all')">{{ $t('totalAnalysis.all') }}</Radio>
									<Radio v-for="(item, index) in filterYearList" :label="item" :key="index">{{ item }}
									</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition7") }}:</span>
								<RadioGroup v-model="filterSubject" type="button" @on-change="filterSubjectChange">
									<Radio :label="$t('totalAnalysis.all')">{{ $t('totalAnalysis.all') }}</Radio>
									<Radio v-for="(item, index) in filterSubjectList" :label="item.name" :key="index">{{ item.name }}</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition4") }}:</span>
								<RadioGroup v-model="filterType" type="button" @on-change="filterTypeChange">
									<Radio v-for="(item, index) in filterData.typeList" :label="item.name" :key="index">{{item.name }}</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition6") }}:</span>
								<RadioGroup v-model="filterSource" type="button" @on-change="filterSourceChange">
									<Radio :label="$t('totalAnalysis.all')">{{ $t('totalAnalysis.all') }}</Radio>
									<Radio v-for="(item, index) in $GLOBAL.EV_MODE()" :label="item.value" :key="index">{{item.label }}</Radio>
								</RadioGroup>
							</div>
							<div class="el-filter-item">
								<span class="el-filter-title">{{ $t("totalAnalysis.condition3") }}:</span>
								<RadioGroup v-model="filterTerm" type="button" @on-change="filterTermChange">
									<Radio :label="$t('totalAnalysis.all')">{{ $t('totalAnalysis.all') }}</Radio>
									<Radio v-for="(item, index) in filterTermList" :label="item.name" :key="index">{{ item.name }}</Radio>
								</RadioGroup>
							</div>

						</div>
					</transition>
					<div class="el-bread">
						<!--<Icon type="ios-arrow-forward" />-->
						<span>{{ $t("totalAnalysis.text5") }}：</span>
						<span v-if="!hasCondition">{{$t("totalAnalysis.text9")}}</span>
						<span v-for="(item, index) in filterList" :key="index" class="filter-item"
							v-if="item.val">{{ item.val }}
							<Icon type="ios-close" @click="handleRemove(index, item.keyName)" />
						</span>
						<span class="list-length">{{ $t("totalAnalysis.text6") }} : {{ examList.length }}
						</span>
					</div>
					<div class="section-box list-box">
						<div v-if="examList.length === 0">
							<EmptyData></EmptyData>
						</div>
						<div class="genius-data-item exam-item" v-else v-for="(item, index) in examList" :key="index"
							@click="handleChooseExam(item, index)">
							<div class="exam-info-top">
								<span class="exam-type">{{ evType[item.type] }}</span>
								<span class="exam-type" style="margin: 0 12px 0 0;">{{ getModeLabel(item.source) }}</span>
								<span class="exam-name">{{ item.name }}</span>
								<span class="exam-grade">{{ item.period.name}}</span>
								<span class="exam-grade" v-for="(grade, gradeIndex) in item.grades"
									:key="gradeIndex">{{ grade.name}}</span>
								<!-- 评测简要数据API暂未返回学科数据 -->
								<span class="exam-subjects">
									<span class="exam-subject" v-for="(subject, index) in item.subjects"
										:key="index">{{ subject.name }}</span>
								</span>
							</div>
							<div class="exam-info-bottom">
								<span>{{ $t("totalAnalysis.echarts_text11") }}：
									{{ $tools.formatTime(item.startTime, "yyyy-MM-dd")  }}</span>
								<span>{{ $t("totalAnalysis.echarts_text12") }}：
									{{ item.stuCount }}</span>
								<span>{{ $t("totalAnalysis.echarts_text13") }}：
									<!-- 暂无实际参与人数数据 -->
									{{ item.stuCount - item.lostStu.length }}
								</span>
								<span>{{ $t("totalAnalysis.lostStu") }}：
									<!-- 缺考人数数据 -->
									{{ item.lostStu.length }}
								</span>
								<span>{{ $t("totalAnalysis.echarts_text14") }}：
									<!-- 暂无参与率数据 -->
									{{ getJoinRate(item) }}
								</span>
								<span>{{ $t("totalAnalysis.sca_chart_text1") }}：
									<!-- 得分率数据 -->
									{{ item.sRate.toFixed(2) + '%' }}
								</span>
								<!-- <span>{{ $t("totalAnalysis.echarts_text15") }}：
										</span> -->
							</div>
						</div>
						<!-- <Page size="small" /> -->
					</div>
				</div>
			</div>
		</vuescroll>
	</div>
</template>

<script>
	import BaseGradeRadar from "@/components/student-analysis/total/BaseGradeRadar.vue";
	import BaseClassRadar from "@/components/student-analysis/total/BaseClassRadar.vue";
	import BaseGeniusLine from "@/components/student-analysis/total/BaseGeniusLine.vue";
	import BaseSubjectBar from "@/components/student-analysis/total/BaseSubjectBar.vue";
	import BaseClassBar from "@/components/student-analysis/total/BaseClassBar.vue";
	export default {
		name: "totalIndex",
		components: {
			BaseGradeRadar,
			BaseGeniusLine,
			BaseClassRadar,
			BaseSubjectBar,
			BaseClassBar,
		},
		data(vm) {
			return {
				latestYear:null,
				currentPanel: "",
				isLoadingList: false,
				tabName: "tab1",
				panelLeft: 0,
				boxWidth: 292,
				isShowClassRadar: true,
				isShowFilter: true,
				classList: new Array(11).fill("1"),
				gradeList: [],
				geniusLineData: null,
				activeGradeIndex: null,
				arrowLeft: 0,
				selectSemester: 0,
				selectGrade: 0,
				contentLoading: false,
				questionList: [],
				dataList: [...new Array(6).keys()],
				hasCondition: false,
				examList: [],
				originList: [],
				filterList: [],
				filterConditions: {
					period: ''
				}, // 筛选条件
				filterData: {},
				searchValue: "",
				searchList: [],
				filterYearList:[],
				filterPeriod: vm.$t('totalAnalysis.all'),
				filterGrade: vm.$t('totalAnalysis.all'),
				filterTerm: vm.$t('totalAnalysis.all'),
				filterType: vm.$t('totalAnalysis.all'),
				filterSource: vm.$t('totalAnalysis.all'),
				filterArea: vm.$t('totalAnalysis.all'),
				filterFeedback: vm.$t('totalAnalysis.all'),
				filterSubject: vm.$t('totalAnalysis.all'),
				filterYear: vm.$t('totalAnalysis.all'),
				schoolData: {
					name: "",
					period: []
				},
				defaultAll: {
					name: vm.$t('totalAnalysis.all'),
					id: '0'
				},
				evType: {
					regular: vm.$t('totalAnalysis.ti_text6'),
					simulation: vm.$t('totalAnalysis.ti_text7'),
					normal: vm.$t('totalAnalysis.ti_text8')
				},
				typeList: [{
						"name": vm.$t('totalAnalysis.all'),
						"key": "all"
					},
					{
						"key": "regular",
						"name": vm.$t('totalAnalysis.ti_text6')
					},
					{
						"key": "simulation",
						"name": vm.$t('totalAnalysis.ti_text7')
					},
					{
						"key": "normal",
						"name": vm.$t('totalAnalysis.ti_text8')
					}
				],
				schoolClasses: [],
			};
		},
		created() {

			this.getSchoolInfo();
			// this.getHomePageData();
			this.getExamList();
			// this.filterData =
		},
		methods: {
			/**获取mode对应的label */
	        getModeLabel(code) {
	            for (let item of this.$GLOBAL.EV_MODE()) {
	                if (item.value == code) {
	                    return item.label
	                }
	            }
	        },
			goAnswerSheet() {
				this.$router.push({
					name: 'answerSheet',
					params: {
						paper: {
							name: '预设答题卡名称',
							item: null
						}
					}
				})
			},
			/* 获取当前学校基础信息 */
			getSchoolInfo() {
				this.$store.dispatch("user/getSchoolProfile").then((res) => {
					let schoolBaseInfo = res.school_base;
					if (schoolBaseInfo) {
						this.schoolClasses = res.school_classes
						this.schoolData = schoolBaseInfo;

						if (schoolBaseInfo.period.length) {
							this.filterData.periodList = [this.defaultAll].concat(schoolBaseInfo.period);
							this.filterData.gradeList = [this.defaultAll].concat(schoolBaseInfo.period[0].grades);
							this.filterData.subjectList = [this.defaultAll].concat(schoolBaseInfo.period[0]
								.subjects);
							this.filterData.termList = [this.defaultAll].concat(schoolBaseInfo.period[0]
								.semesters);
							this.filterData.typeList = this.typeList;
						}

						if (sessionStorage.getItem('filterConditions')) {
							this.filterConditions = JSON.parse(sessionStorage.getItem('filterConditions'))
							this.filterPeriod = this.filterConditions.period || this.$t('totalAnalysis.all')
							this.filterGrade = this.filterConditions.grade || this.$t('totalAnalysis.all')
							this.filterSubject = this.filterConditions.subject || this.$t('totalAnalysis.all')
							this.filterType = this.evType[this.filterConditions.type] || this.$t(
								'totalAnalysis.all')
							this.filterSource = this.filterConditions.source || this.$t('totalAnalysis.all')
							this.filterTerm = this.filterConditions.term || this.$t('totalAnalysis.all')
							this.filterYear = this.filterConditions.year || this.$t('totalAnalysis.all')
						}
						console.log(this.filterConditions)
						//默认选中第一个学段
						if (this.schoolData.period && this.schoolData.period.length && !sessionStorage.getItem(
								'filterConditions')) {
							this.filterPeriod = this.schoolData.period[0].name
							this.filterPeriodChange()
						}
					}
				});
			},
			// 获取学情首页数据
			getHomePageData() {
				this.isLoadingList = true;
				this.$api.totalAnalysis
					.getHomePageData({
						schoolCode: this.$store.state.userInfo.schoolCode,
						code: this.$store.state.totalAnalysis.campusCode,
					})
					.then((res) => {
						// api请求
						if (res.result.data.length) {
							this.gradeList = res.result.data;
							this.geniusLineData = res.result.data[0];
						} else {
							this.$Message.warning(this.$t('totalAnalysis.noData'));
						}
						this.isLoadingList = false;
						// this.$refs.geniusLine.dataLoading = false
					})
					.catch((err) => {
						console.log(err);
						this.isLoadingList = false;
						this.$Message.error(this.$t('http.error500'));
					});
			},

			// 获取评测列表
			getExamList() {
				this.isLoadingList = true;
				let requestData = {
					code: this.$store.state.userInfo.schoolCode
				}
				this.$api.learnActivity.FindExamInfo(requestData).then(
					res => {
						if (!res.error) {
							res.examInfo = res.examInfo.sort((a, b) => {
								return a.createTime - b.createTime > 0 ? -1 : 1
							})
							this.latestYear = res.year
							let startYear = res.year
							let endYear = new Date().getFullYear()
							let arr = [startYear]
							if(startYear === endYear){
								this.filterYearList = arr
							}else{
								for(let i = 0 ; i < endYear - startYear ; i++){
									arr.push(startYear + i + 1)
								}
								this.filterYearList = arr
							}
							this.examList = res.examInfo.filter(i => i.progress === 'finish')
							this.originList = res.examInfo.filter(i => i.progress === 'finish')
							this.searchList = this.examList.length ? this.examList.map((item) => item.name) : []
							this.$store.commit("updateExamList", res.examInfo);
							this.isLoadingList = false;

							this.doFilter()
						} else {
							this$Message.error('API ERROR!')
						}
					}
				)
			},



			handleSearch() {
				let that = this;
				this.contentLoading = true;
				let value = this.searchValue;
				this.examList = this.originList.filter(
					(item) => item.name.indexOf(value) !== -1
				);
				setTimeout(function() {
					that.contentLoading = false;
				}, 500);
			},
			handleChange() {
				let value = this.searchValue;
				this.examList = this.originList.filter(
					(item) => item.name.indexOf(value) !== -1
				);
			},
			handleAutoSelect(val) {
				this.examList = this.originList.filter((item) => item.name === val);
			},

			// 移除筛选项
			handleRemove(index, name) {
				this.filterList.splice(index, 1);
				switch (name) {
					case "period":
						// this.filterPeriod = "全部";
						// this.filterConditions.period = null;
						break;
					case "grade":
						this.filterGrade = this.$t('totalAnalysis.all');
						this.filterConditions.grade = null;
						break;
					case "term":
						this.filterTerm = this.$t('totalAnalysis.all');
						this.filterConditions.term = null;
						break;
					case "type":
						this.filterType = this.$t('totalAnalysis.all');
						this.filterConditions.type = null;
						break;
					case "source":
						this.filterSource = this.$t('totalAnalysis.all');
						this.filterConditions.source = null;
						break;	
					case "area":
						this.filterArea = this.$t('totalAnalysis.all');
						this.filterConditions.area = null;
						break;
					case "feedback":
						this.filterFeedback = this.$t('totalAnalysis.all');
						this.filterConditions.feedback = null;
						break;
					case "subject":
						this.filterSubject = this.$t('totalAnalysis.all');
						this.filterConditions.subject = null;
						break;
					case "year":
						this.filterYear = this.$t('totalAnalysis.all');
						this.filterConditions.year = null;
						break;
					default:
						break;
				}

				// console.log(this.filterList);
				this.doFilter();
			},

			filterPeriodChange() {
				this.filterConditions.period = this.filterPeriod === this.$t('totalAnalysis.all') ? null : this
					.filterPeriod;
				// 切换学科后年级会变化，需要初始化年级状态 默认选中全部
				if (this.filterGradeList && this.filterGradeList.length) {
					this.filterGrade = this.$t('totalAnalysis.all')
					this.filterGradeChange()
				}
				// 切换学科后学科会变化，需要初始化学科状态 默认选中全部
				if (this.filterSubjectList && this.filterSubjectList.length) {
					this.filterSubject = this.$t('totalAnalysis.all')
					this.filterSubjectChange()
				}
				this.doFilter();
			},
			filterGradeChange() {
				this.filterConditions.grade =
					this.filterGrade === this.$t('totalAnalysis.all') ? null : this.filterGrade;
				this.doFilter();
			},
			filterYearChange() {
				this.filterConditions.year =
					this.filterYear === this.$t('totalAnalysis.all') ? null : this.filterYear;
				this.doFilter();
			},
			filterTermChange() {
				this.filterConditions.term =
					this.filterTerm === this.$t('totalAnalysis.all') ? null : this.filterTerm;
				this.doFilter();
			},
			filterTypeChange() {
				//评测返回的是key eg：normal，不能直接用中文做过滤条件
				// this.filterConditions.type =
				//     this.filterType === "全部" ? null : this.filterType;
				console.log(this.filterType)
				if (this.filterType === this.$t('totalAnalysis.all')) {
					this.filterConditions.type = null
				} else {
					let res = this.filterData.typeList.find(item => {
						return item.name == this.filterType
					})
					this.filterConditions.type = res ? res.key : null
				}
				this.doFilter();
			},
			
			filterSourceChange(){
				this.filterConditions.source =
					this.filterSource === this.$t('totalAnalysis.all') ? null : this.filterSource;
				this.doFilter();
			},

			filterSubjectChange() {
				this.filterConditions.subject =
					this.filterSubject === this.$t('totalAnalysis.all') ? null : this.filterSubject;
				this.doFilter();
			},

			doFilter() {
				sessionStorage.setItem('filterConditions', JSON.stringify(this.filterConditions))
				// 将条件转换成数组便于渲染
				this.filterList = this.objToArr(this.filterConditions);
				this.originList.forEach(item => {
					item.term = this.compareTerm(this.getTermRange(this.filterPeriod), this.$tools.formatTime(item
						.createTime, 'MM-dd').split('-'))
				})
				// 根据条件过滤所有的测验数据
				this.examList = this.originList.filter((item) => {
					return (
						JSON.stringify(item.period.name).indexOf(this.filterConditions.period || "") >
						-1 &&
						JSON.stringify(item.grades).indexOf(this.filterConditions.grade || "") >
						-1 &&
						JSON.stringify(item.subjects).indexOf(this.filterConditions.subject || "") >
						-1 &&
						item.type.indexOf(this.filterConditions.type || "") >
						-1 &&
						item.source.indexOf(this.filterConditions.source || "") >
						-1 &&
						item.term.indexOf(this.filterConditions.term || "") >
						-1 &&
						JSON.stringify(this.getReleaseYear(item.createTime)).indexOf(this.filterConditions
							.year || "") >
						-1
					);
				});
			},

			getReleaseYear(timestamp) {
				return new Date(timestamp).getFullYear()
			},

			/* 获取当前学段学期时间范围 */
			getTermRange(period) {
				let schoolBase = this.$store.state.user.schoolProfile.school_base
				let curSemesters = schoolBase.period.filter(i => i.name === this.filterPeriod)[0].semesters
				let range = []
				for (var i = 0; i < curSemesters.length - 1; i++) {
					range.push([
						[+curSemesters[i].month, +curSemesters[i].day],
						[+curSemesters[i + 1].month, +curSemesters[i + 1].day]
					])
				}
				return range
			},

			/* 对比评测时间和学期分界点时间 */
			compareTerm(range, val) {
				let schoolBase = this.$store.state.user.schoolProfile.school_base
				let curSemesters = schoolBase.period.filter(i => i.name === this.filterPeriod)[0].semesters
				for (var i = 0; i < range.length; i++) {
					if (this.tranNum(val) >= this.tranNum(range[i][0]) && this.tranNum(val) < this.tranNum(range[i][1])) {
						return curSemesters[i].name
					}
				}
				return curSemesters[curSemesters.length - 1].name
			},

			tranNum(val) {
				return Number((Number(val[0])) + '' + (+val[1] > 10 ? +val[1] : '0' + (+val[1])))
			},

			objToArr(obj) {
				var arr = [];
				for (var key in obj) {
					//处理筛选条件是类型的情况
					if (key == 'type' && obj[key]) {
						arr.push({
							keyName: key,
							val: this.filterType,
						});
						continue
					}
					if (key == 'source' && obj[key]) {
						arr.push({
							keyName: key,
							val: this.getModeLabel(this.filterSource),
						});
						continue
					}
					arr.push({
						keyName: key,
						val: obj[key],
					});
				}
				return arr;
			},

			async handleChooseExam(item, index) {
				this.isLoadingList = true
				try {
					let examSummary = await this.getExamSummary(item)
					this.$store.commit('clearAnalysis', null)
					this.$store.dispatch('getAnalysisJson', {
						code: item.code.replace('Exam-', ''),
						id: item.id
					}).then(res => {
						console.log(res)
						localStorage.setItem('curExam', JSON.stringify(examSummary))
						this.isLoadingList = false
						this.$router.push({
							path: "/total"
						});
					}).catch(err => {
						console.log(err)
						this.$Message.error(this.$t('totalAnalysis.noData'))
						this.isLoadingList = false
					})
				} catch (e) {
					this.isLoadingList = false
					this.$Message.error('API ERROR!')
				}

			},

			/* 获取当前点击评测的详情数据 */
			getExamSummary(item) {
				return new Promise((r, j) => {
					this.$api.learnActivity.FindExamInfos({
						id: item.id,
						code: item.code
					}).then(
						async res => {
								if (!res.error) {
									r(res.examInfo[0])
								} else {
									this.$Message.error('API ERROR!')
								}
							},
							err => {
								j(err)
							}
					)
				})
			}
		},
		mounted() {
			if (this.$route.params.tabName) {
				this.tabName = this.$route.params.tabName;
			}


		},
		computed: {
			getJoinRate() {
				return (item) => {
					return item.stuCount === 0 ? 0 : ((item.stuCount - item.lostStu.length) / item.stuCount).toFixed(
						2) * 100 + "%";
				};
			},
			filterGradeList() {
				let res = this.schoolData.period.find(item => {
					return item.name == this.filterConditions.period
				})
				return res ? res.grades : []
			},
			filterSubjectList() {
				let res = this.schoolData.period.find(item => {
					return item.name == this.filterConditions.period
				})
				return res ? res.subjects : []
			},
			filterTermList() {
				let res = this.schoolData.period.find(item => {
					return item.name == this.filterConditions.period
				})
				return res ? res.semesters : []
			},
		},
		watch: {
			filterList(val) {
				let list = val.map((item) => item.val);
				this.hasCondition = list.filter((item) => item !== null).length;
			},
		},
	};
</script>

<style lang="less" scoped>
	@import "./TotalIndex.less";
</style>

<style lang="less">
	.index-container {
		.ivu-tabs-bar {
			border-bottom: 1px solid #464646;
			margin: 10px 20px;
		}

		.ivu-tabs-ink-bar {
			height: 4px;
			background: #0087af;
		}

		.ivu-collapse {
			display: flex;
			flex-wrap: wrap;
			background: none !important;
			border: none !important;

			canvas {
				cursor: pointer;
			}

			.ivu-icon-ios-arrow-forward {
				display: none;
			}
		}

		.ivu-collapse-header {
			height: auto !important;
			line-height: auto !important;
			background: #444444;
			border: none !important;
			border-radius: 5px;
			padding-top: 10px;
			padding-bottom: 4px;
			cursor: pointer;
		}

		.ivu-collapse-item {
			width: 24.2% !important;
			border: none !important;
			margin-top: 1%;
		}

		.ivu-collapse-content {
			background: none !important;
			border: none !important;
			padding: 0 !important;
			width: 1770px;
		}

		.ivu-select {
			width: auto;
		}

		.ivu-select-selection {
			width: 150px;
			background: #777777;
			margin-left: 100px;
			border: 2px solid #737373;
		}

		.ivu-select-selected-value {
			color: #fff;
		}

		.ivu-select-dropdown {
			width: 150px;
			min-width: 150px !important;
		}

		.ivu-select-arrow {
			color: #fff;
		}

		.ivu-radio-group {
			padding-bottom: 4px;
		}

		.ivu-radio-wrapper {
			padding: 0 10px;
			margin-left: 15px;
			height: 28px;
			line-height: 28px;
			box-shadow: none !important;
			border: none !important;
			font-size: 14px;
			border-radius: 0 !important;
			background: transparent !important;
			color: #e4eadb !important;
		}
	}

	.index-container .ivu-tabs-nav .ivu-tabs-tab:active,
	.index-container .ivu-tabs-nav .ivu-tabs-tab:hover,
	.index-container .ivu-tabs-nav .ivu-tabs-tab-active,
	.index-container .ivu-tabs-nav .ivu-tabs-tab {
		color: #fff;
		font-weight: bold;
		font-size: 16px;
	}

	.index-container .ivu-select-visible .index-container .ivu-select-selection,
	.index-container .ivu-select-selection-focused,
	.index-container .ivu-select-selection:hover {
		border: 2px solid #737373;
	}

	.el-filter-wrap {
		.ivu-radio-wrapper {
			.ivu-icon {
				margin-bottom: 2px;
			}
		}

		.ivu-radio-group-item {
			border-radius: 5px !important;
		}

		.ivu-radio-wrapper-checked {
			background: #0087af !important;
			box-shadow: none !important;
			color: white;
		}

		.ivu-radio-group-button {
			.ivu-radio-wrapper-checked {
				&:hover {
					color: #fff !important;
				}
			}
		}
	}

	.el-filter-wrap .ivu-radio-wrapper:after,
	.ivu-radio-group-button .ivu-radio-wrapper:before {
		content: none;
	}

	.indexFade-enter-active,
	.indexFade-leave-active {
		transition: all 0.4s;
	}

	.indexFade-enter,
	.indexFade-leave-active {
		transform: translate3d(0, 3rem, 0);
		opacity: 0;
	}

	.list-box {
		.ivu-page {
			margin-top: 60px;
		}

		.ivu-page-item {
			background: rgba(40, 40, 40, 0.5);
			border: none;

			&:hover {
				border-color: #e4eadb;
			}

			a {
				color: #f1f1f1;
			}
		}

		.ivu-page-item-active {
			background: #bfbfb9;

			a {
				color: #595959;
			}
		}
	}

	.list-box .ivu-page-next,
	.list-box .ivu-page-prev {
		background: rgba(0, 0, 0, 0);
		border: none;
	}

	.list-box .ivu-page-next a,
	.list-box .ivu-page-prev a {
		color: #e4eadb;
	}

	.list-box .ivu-page-next:hover,
	.list-box .ivu-page-prev:hover {
		border-color: #e4eadb;
	}

	.list-box .ivu-page-item-active,
	.list-box .ivu-page-item:hover a {
		border-color: #e4eadb;
	}
</style>
