<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 }}学情分析仪表盘</span>
					<div class="select-grade select-semester">
						<Select v-model="selectSemester">
							<Option v-for="(item, index) in semesterList" :value="index" :key="index">{{ item }}</Option>
						</Select>
					</div>
				</div>
			</div>
			<div class="section">
				<Tabs :value="tabName">
					<TabPane label="统计数据" name="tab1">
						<!-- 评测数据统计部分 -->
						<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">
										<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">
							<div class="section-title">
								{{$t('totalAnalysis.ti_title4')}}
							</div>
							<div class="section-box">
								<div class="genius-data-item block-item">
									<div class="select-grade">
										<Select v-model="selectGrade">
											<Option v-for="(item,index) in gradeList" :value="index" :key="index">{{ item.Grade }}</Option>
										</Select>
									</div>
									<BaseGeniusLine echartsId="myLine" :echartsData="geniusLineData" ref="geniusLine"></BaseGeniusLine>
								</div>
							</div>
						</div> -->

						<!-- 学科对比统计部分 -->
						<div class="section">
							<div class="section-title">
								{{ $t("totalAnalysis.ti_title3") }}
							</div>
							<div v-if="gradeList.length === 0" style="margin-top: 60px">
								<!-- <span class="no-data-text">暂无数据</span> -->
								<EmptyData></EmptyData>
							</div>
							<!-- 年级雷达图部分 -->
							<Collapse v-model="currentPanel" accordion @on-change="onRadarChange">
								<Panel v-for="(grade, index) in gradeList" :name="'panel' + index" :key="index" :style="{  marginLeft: index === 0 || index % 4 === 0 ? '0' : '1%', }">
									<p class="radar-title">{{ grade.Grade }}</p>
									<BaseGradeRadar :echartsId="'gradeRadar' + index" :echartsData="grade" v-if="grade.subjectName.length > 2"></BaseGradeRadar>
									<BaseSubjectBar :echartsId="'gradeBar' + index" :echartsData="grade" v-else></BaseSubjectBar>
									<p class="radar-details">查看班级</p>
									<div slot="content">
										<div class="section-box class-radar-box" :style="{ 'margin-left': panelLeft }" v-if="isShowClassRadar">
											<span class="box-arrow" :style="{ left: arrowLeft }"></span>
											<div class="radar-data-item block-item" v-for="(item, index2) in grade.className" :key="index2" :style="{ marginLeft:  index2 === 0 || index2 % 5 === 0 ? '0' : '1%',  }">
												<p class="radar-title">{{ item }}</p>
												<BaseClassRadar :echartsId="'grade' + index + 'c' + index2" :boxWidth="boxWidth" :echartsData="grade"
												 :cIndex="index2" v-if="grade.subjectName.length > 2"></BaseClassRadar>
												<BaseClassBar :echartsId="'grade' + index + 'c' + index2" :boxWidth="boxWidth" :echartsData="grade" :cIndex="index2"
												 v-else></BaseClassBar>
											</div>
										</div>
									</div>
								</Panel>
							</Collapse>
						</div>
					</TabPane>
					<TabPane label="评测数据" name="tab2">
						<!-- 评测列表数据部分 -->
						<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="全部">全部</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.condition7") }}:</span>
										<RadioGroup v-model="filterSubject" type="button" @on-change="filterSubjectChange">
											<!-- <Radio v-for="(item, index) in filterData.subjectList" :label="item.name" :key="index">{{ item.name }}</Radio> -->
											<Radio label="全部">全部</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.condition3") }}:</span>
										<RadioGroup v-model="filterTerm" type="button" @on-change="filterTermChange">
											<Radio v-for="(item, index) in filterData.termList" :label="item.name" :key="index">{{ item.name }}</Radio>
										</RadioGroup>
									</div>

									<!-- 考试范围暂未实际有效字段 -->
									<!-- <div class="el-filter-item">
                                        <span class="el-filter-title">{{ $t("totalAnalysis.condition5") }}:</span>
                                        <RadioGroup v-model="filterArea" type="button" @on-change="filterAreaChange">
                                            <Radio v-for="(item, index) in filterData.areaList" :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="filterFeedback" type="button" @on-change="filterFeedbackChange">
                                            <Radio v-for="(item, index) in filterData.feedbackList" :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-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 }}
										</span>
										<span>{{ $t("totalAnalysis.echarts_text14") }}：
											<!-- 暂无参与率数据 -->
											{{ getJoinRate(item) }}
										</span>
										<!-- <span>{{ $t("totalAnalysis.echarts_text15") }}：
										</span> -->
									</div>
								</div>
								<Page size="small" />
							</div>
						</div>
					</TabPane>
				</Tabs>
			</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() {
			return {
				currentPanel: "",
				isLoadingList: false,
				tabName: "tab1",
				panelLeft: 0,
				boxWidth: 292,
				isShowClassRadar: true,
				isShowFilter: true,
				classList: new Array(11).fill("1"),
				gradeList: [],
				geniusLineData: null,
				semesterList: ["2019上学期", "2019下学期"],
				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: [],
				filterPeriod: "全部",
				filterGrade: "全部",
				filterTerm: "全部",
				filterType: "全部",
				filterArea: "全部",
				filterFeedback: "全部",
				filterSubject: "全部",
				schoolData: {
					name: "",
					period: []
				},
				defaultAll: {
					name: '全部',
					id: '0'
				},
				evType: {
					regular: '正规考',
					simulation: '模拟考',
					normal: '普通考'
				}
			};
		},
		created() {
			this.getSchoolInfo();
			// this.getHomePageData();
			this.getExamList();
			// this.filterData =
		},
		methods: {
			/* 获取当前学校基础信息 */
			getSchoolInfo() {
				this.$store.dispatch("user/getSchoolProfile").then((res) => {
					let schoolBaseInfo = res.school_base;
					if (schoolBaseInfo) {
						this.schoolData = schoolBaseInfo;
						//默认选中第一个学段
						if (this.schoolData.period && this.schoolData.period.length) {
							this.filterPeriod = this.schoolData.period[0].name
							this.filterPeriodChange()
						}
						//年级和学科默认选中全部
						// if (this.filterConditions.period && this.schoolData.period[0].grades.length) {
						//     this.filterGrade = this.schoolData.period[0].grades[0].name
						//     this.filterGradeChange()
						// }
						console.log(this.filterConditions)
						let filterJson = this.$store.state.totalAnalysis.filterData
						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 = filterJson.typeList;
							this.filterData.areaList = filterJson.areaList;
							this.filterData.feedbackList = filterJson.feedbackList;
						}
					}
				});
			},
			// 获取学情首页数据
			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.isLoadingList = false;
						// this.$refs.geniusLine.dataLoading = false
					})
					.catch((err) => {
						console.log(err);
						this.isLoadingList = false;
						this.$Message.error("服务器繁忙，请稍后重试！");
					});
			},

			// 获取评测列表
			getExamList() {
				this.isLoadingList = true;
				// this.$api.totalAnalysis
				// 	.getExamList({
				// 		code: this.$store.state.totalAnalysis.campusCode,
				// 	})
				// 	.then((res) => {
				// 		// api请求
				// 		this.examList = res.result.data;
				// 		this.originList = res.result.data;
				// 		(this.searchList = this.examList.length ?
				// 			this.examList.map((item) => item.name) : []),
				// 		this.$store.commit("updateExamList", res.result.data);
				// 		this.isLoadingList = false;
				// 	})
				// 	.catch((err) => {
				// 		console.log(err);
				// 		this.isLoadingList = false;
				// 	});
				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.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;
							// setTimeout(() => {
							//     this.doFilter()
							// }, 2000);
							this.doFilter()
						} else {
							this$Message.error('API ERROR!')
						}
					}
				)
			},

			// 年级雷达图点击
			onRadarChange(val) {
				if (!val.length) return;
				// 根据雷达图位置来决定箭头位置以及展开面板偏移量
				let num = Number(val[0].split("panel")[1]) + 1;
				let firstDom = document.getElementsByClassName("ivu-collapse-header")[0];
				let curItem = document.getElementsByClassName("ivu-collapse-header")[
					num - 1
				];
				this.$nextTick(() => {
					let domNum = parseInt((num - 1) / 4);
					let scrollDistance = firstDom.offsetTop + 180 + domNum * 480;

					this.$refs["vs"].scrollTo({
							y: scrollDistance,
						},
						500,
						"easeInQuad"
					);
				});

				this.arrowLeft =
					num % 4 === 0 ?
					"87.5%" :
					(num + 1) % 4 === 0 ?
					"62.2%" :
					(num + 2) % 4 === 0 ?
					"36.5%" :
					"11.5%";
				this.panelLeft =
					num % 4 === 0 ?
					"-75.8%" :
					(num + 1) % 4 === 0 ?
					"-50.5%" :
					(num + 2) % 4 === 0 ?
					"-25.2%" :
					"0";
			},

			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.filterConditions.grade = null;
						break;
					case "term":
						this.filterTerm = "全部";
						this.filterConditions.term = null;
						break;
					case "type":
						this.filterType = "全部";
						this.filterConditions.type = null;
						break;
					case "area":
						this.filterArea = "全部";
						this.filterConditions.area = null;
						break;
					case "feedback":
						this.filterFeedback = "全部";
						this.filterConditions.feedback = null;
						break;
					case "subject":
						this.filterSubject = "全部";
						this.filterConditions.subject = null;
						break;
					default:
						break;
				}

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

			filterPeriodChange() {
				this.filterConditions.period = this.filterPeriod === "全部" ? null : this.filterPeriod;
				//切换学科后年级会变化，需要初始化年级状态 默认选中全部
				// if (this.filterGradeList && this.filterGradeList.length) {
				//     this.filterGrade = this.filterGradeList[0].name
				//     this.filterGradeChange()
				// }
				//切换学科后学科会变化，需要初始化学科状态 默认选中全部
				// if (this.filterSubjectList && this.filterSubjectList.length) {
				//     this.filterSubject = this.filterSubjectList[0].name
				//     this.filterSubjectChange()
				// }
				this.doFilter();
			},
			filterGradeChange() {
				this.filterConditions.grade =
					this.filterGrade === "全部" ? null : this.filterGrade;
				this.doFilter();
			},
			filterTermChange() {
				this.filterConditions.term =
					this.filterTerm === "全部" ? null : this.filterTerm;
				this.doFilter();
			},
			filterTypeChange() {
				//评测返回的是key eg：normal，不能直接用中文做过滤条件
				// this.filterConditions.type =
				//     this.filterType === "全部" ? null : this.filterType;
				if (this.filterType === "全部") {
					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();
			},
			filterAreaChange() {
				this.filterConditions.area =
					this.filterArea === "全部" ? null : this.filterArea;
				this.doFilter();
			},
			filterFeedbackChange() {
				this.filterConditions.feedback =
					this.filterFeedback === "全部" ? null : this.filterFeedback;
				this.doFilter();
			},
			filterSubjectChange() {
				this.filterConditions.subject =
					this.filterSubject === "全部" ? null : this.filterSubject;
				this.doFilter();
			},

			doFilter() {
				// 将条件转换成数组便于渲染
				this.filterList = this.objToArr(this.filterConditions);
				console.log(this.filterConditions)
				// 根据条件过滤所有的测验数据
				// this.examList = this.originList.filter((item) => {
				//     return (
				//         item.period.name.indexOf(this.filterConditions.period || "") >
				//         -1 &&
				//         item.grades.indexOf(this.filterConditions.grade || "") >
				//         -1 &&
				//         item.conditions.semester.indexOf(this.filterConditions.term || "") >
				//         -1 &&
				//         item.conditions.type.indexOf(this.filterConditions.type || "") > -1 &&
				//         item.conditions.range.indexOf(this.filterConditions.area || "") >
				//         -1 &&
				//         item.conditions.feedBackType.indexOf(
				//             this.filterConditions.feedback || ""
				//         ) > -1 &&
				//         (this.filterConditions.subject ?
				//             item.conditions.subject.indexOf(
				//                 this.filterConditions.subject || ""
				//             ) > -1 :
				//             true)
				//     );
				// });

				// 根据条件过滤所有的测验数据
				console.log('filter', this.filterConditions)
				this.examList = this.originList.filter((item) => {
					return (
						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
					);
				});
			},

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

			async handleChooseExam(item, index) {
				this.isLoadingList = true
				let examSummary = await this.getExamSummary(item)
				this.$store.commit('updateAnalysisJson', 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"
					});
				})
			},

			/* 获取当前点击评测的详情数据 */
			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)
								this.$Message.error('API ERROR!')
							}
					)
				})
			}
		},
		mounted() {
			if (this.$route.params.tabName) {
				this.tabName = this.$route.params.tabName;
			}
		},
		computed: {
			getJoinRate() {
				return (item) => {
					return (item.stuCount / 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 : []
			}
		},
		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>
