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

<template>
	<div class="new-syllabus-container">
		<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-if="isLoading"></Loading>
		<!-- 课纲头部 切换来源以及选择学段 -->
		<div class="new-syllabus-header" v-if="isSchool">
			<div class="new-syllabus-select">
				<span>当前学段：</span>
				<Select ref="periodSelect" v-model="currentPeriodIndex" style="width: 100px" @on-change="onPeriodChange">
					<Option v-for="(item, index) in periodList" :value="index" :key="index">{{ item.name }}</Option>
				</Select>
			</div>
		</div>
		<!-- 课纲主体内容 -->
		<div class="new-syllabus-content" :style="{ height: !isSchool ? '100%' : '' }">
			<!-- 选择学科 -->
			<div class="ns-col ns-col" v-if="isSchool">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadSubject"></Loading>
				<div class="ns-header">
					<!-- 切换头部以及搜索框 -->
					<div class="ns-header-content" v-if="!isSearchSubject">
						<span>
							<Icon type="md-bookmark" color="#fff" size="20" />
							<span style="margin-left: 5px">学科</span>
						</span>
						<Icon type="ios-search" color="#fff" size="18" style="cursor: pointer" @click="isSearchSubject = true" v-show="subjectList.length" />
					</div>
					<div class="ns-header-search" v-else>
						<Input icon="ios-close" v-model="searchSubject" placeholder="搜索学科..." autofocus style="width: 100%" @on-click="onSearchSubjectClose"
						 @on-change="onSearchSubjectChange" @on-enter="onSearchSubjectChange" />
					</div>
				</div>
				<vuescroll>
					<div v-if="subjectList.length === 0">
						<EmptyData :top="50"></EmptyData>
					</div>
					<div class="gl">
						<div :class="[
                'gl-item',
                index == activeSubjectIndex ? 'item-active' : '',
              ]"
						 v-for="(item, index) in subjectList" :key="index" @click="
                hasModify
                  ? handleConfirmSave({ index }, '2')
                  : handleSubjectTap(index)
              ">
							<p class="gl-item-name">{{ item.name }}</p>
							<p class="gl-item-info">
								<span></span>册别数：0 {{ tabIndex === 0  ? schoolVolCount[index]  : privateVolCount[index]  }}
							</p>
						</div>
					</div>
				</vuescroll>
			</div>
			<!-- 选择册别 -->
			<div class="ns-col ns-col2">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadVolumes"></Loading>
				<div class="ns-header">
					<!-- 切换头部以及搜索框 -->
					<div class="ns-header-content" v-if="!isSearchVolume">
						<span>
							<Icon type="md-bookmarks" color="#fff" size="20" />
							<span style="margin-left: 5px">册别</span>
						</span>
						<div>
							<Icon type="md-add" v-if="($access.can('admin.*|Volumn_Add') || !isSchool)" color="#fff" size="18" style="cursor: pointer; margin-right: 10px"
							 @click="onAddVolume" />
							<Poptip title="筛选册别" placement="bottom-end" @on-popper-show="onPopperShow" v-if="isSchool">
								<Icon type="ios-funnel" color="#fff" size="18" style="cursor: pointer; margin-right: 10px" />
								<div class="funnel-box" slot="content">
									<p>年级</p>
									<Select v-model="filterGrade" style="width: 200px" @on-change="onFilterGrade">
										<Option v-for="(item, index) in gradeList" :value="item.id" :key="index">{{ item.name }}</Option>
									</Select>
									<p>学期</p>
									<Select v-model="filterSemester" style="width: 200px" @on-change="onFilterSemester">
										<Option v-for="(item, index) in semesterList" :value="item.id" :key="index">{{ item.name }}</Option>
									</Select>
								</div>
							</Poptip>
							<Icon type="ios-search" color="#fff" size="18" style="cursor: pointer" @click="isSearchVolume = true" v-show="volumeList.length" />
						</div>
					</div>
					<div class="ns-header-search" v-else>
						<!-- 搜索册别部分 -->
						<Input icon="ios-close" v-model="searchVolume" placeholder="搜索册别..." autofocus style="width: 100%" @on-click="onSearchVolumeClose"
						 @on-change="onSearchVolumeChange" @on-enter="onSearchVolumeChange" />
					</div>
				</div>
				<vuescroll>
					<!-- 册别列表 -->
					<div class="vl gl">
						<div v-if="volumeList.length === 0">
							<EmptyData :top="50"></EmptyData>
						</div>
						<div v-else>
							<div :class="[
                  'gl-item',
                  index == activeVolumeIndex ? 'item-active' : '',
                ]"
							 v-for="(item, index) in volumeList" :key="index" @click="
                  hasModify
                    ? handleConfirmSave({ index, item }, '1')
                    : handleVolumeTap(index, item)
                ">
								<p class="gl-item-name" :style="{ margin: !isSchool ? '10px 0' : '' }">
									{{ item.volumeName }}
								</p>
								<p class="gl-item-info" v-if="isSchool">
									{{ item.gradeName }}<span></span>{{ item.semesterName }}
								</p>
								<p class="gl-item-info" v-if="isSchool">
									共编使用者：{{ item.editors ? item.editors.length : "0" }}
								</p>
								<div class="count-nums">
									<Icon type="md-folder" title="内容资源数" style="margin-left: 0" />
									{{ item.resourceCount }}
									<Icon type="md-cube" title="关联题目数" />
									{{ item.itemCount }}
								</div>
								<span class="btn-edit" :style="{ right: !isSchool ? '60px' : '90px' }" v-if="$access.can('admin.*|Volumn_Edit') || !isSchool"
								 title="编辑" @click.stop="onEditVolume(item)">
									<Icon type="md-create" size="20" color="#d2d2d2" /></span>
								<span class="btn-users" v-if="$access.can('admin.*|Volumn_Edit') && isSchool" title="共编使用者管理" @click.stop="onEditEditors(item)">
									<Icon type="md-people" size="22" color="#d2d2d2" /></span>
								<span class="btn-delete" v-if="$access.can('admin.*|Volumn_Delete') || !isSchool" title="删除" @click.stop="onDeleteVolume(item)">
									<Icon type="md-trash" size="22" color="#d2d2d2" /></span>
							</div>
						</div>
					</div>
				</vuescroll>
			</div>
			<!-- 展示课纲树形结构部分 -->
			<div class="ns-col ns-col3" :style="{ width: !isSchool ? '81%' : '66%' }">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadSyllabus"></Loading>

				<div v-if="volumeList.length === 0">
					<EmptyData :top="100"></EmptyData>
				</div>
				<div v-else>
					<div class="tree-info">
						<div>
							<Icon type="ios-book" />
							<span class="tree-name">{{
                volumeList[activeVolumeIndex].volumeName
              }}</span>
						</div>
						<div>
							<Button @click="onSaveSyllabus" type="text" :disabled="!hasModify" icon="md-folder" v-if="$access.can('admin.*|Syllabus_Edit') || tabIndex === 1">存储变更</Button>
						</div>
					</div>
					<Tree :volume="currentVolume" :treeData="treeData" ref="treeRef" :editable="$access.can('admin.*|Syllabus_Edit') || tabIndex === 1"
					 @onTreeUpdate="onTreeUpdate"></Tree>
				</div>
			</div>
		</div>

		<!-- 新增册别弹窗 -->
		<Modal v-model="isAddVolume" width="560" footer-hide class="add-volume-modal">
			<div class="modal-header" slot="header">
				{{ isEditVolume ? "编辑册别" : "新增册别" }}
			</div>
			<div class="modal-content">
				<AddVolume :originData="originSchoolData" :periodIndex="currentPeriodIndex" :subjectIndex="currentSubjectIndex"
				 :addType="addType" :editVolume="editVolume" @addFinish="onFinishAddVolume">
				</AddVolume>
			</div>
		</Modal>

		<!-- 共编使用者弹窗 -->
		<Modal v-model="isEditEditors" width="760" footer-hide class="add-volume-modal">
			<div class="modal-header" slot="header">共编使用者管理</div>
			<div class="modal-content">
				<AddEditors :editVolume="editVolume" @addFinish="onFinishAddVolume"></AddEditors>
			</div>
		</Modal>
	</div>
</template>

<script>
	import Tree from "@/components/syllabus/DragTree";
	import AddVolume from "./operation/AddVolume";
	import AddEditors from "./operation/AddEditors";
	export default {
		data() {
			return {
				isSchool: false,
				currentParams: {
					// 默认API传递参数
					code: "",
					periodId: "",
					subjectId: "",
					type: 0,
					status: 1,
				},
				addType: "school",
				isLoadSubject: false,
				isLoadVolumes: false,
				isLoadSyllabus: false,
				isLoading: false,
				volumnCounts: [],
				currentPeriodIndex: null,
				currentSubjectIndex: null,
				currentVolume: null,
				tabIndex: 0,
				originData: {},
				originSchoolData: {},
				schoolVolCount: [], // 校本科目册别数量
				privateVolCount: [], //个人科目册别数量
				periodList: [],
				gradeList: [],
				semesterList: [],
				subjectList: [],
				originSubjectList: [],
				volumeList: [],
				originVolumeList: [],
				treeData: [], // 课纲数据
				activePeriodIndex: 0,
				activeSubjectIndex: 0,
				activeVolumeIndex: 0,
				isSearchSubject: false,
				isSearchVolume: false,
				isAddVolume: false,
				isEditVolume: false,
				filterGrade: "all",
				filterSemester: "all",
				searchVolume: "",
				searchSubject: "",
				editVolume: null,
				hasModify: false,
				preSelectVal: null,
				isEditEditors: false,
			};
		},
		components: {
			Tree,
			AddVolume,
			AddEditors,
		},
		created() {
			/* 判断当前是个人课纲还是校本课纲 */
			this.isSchool = this.$route.name === "syllabus";
			if (this.isSchool) {
				// 校本课纲 则通过学段科目信息区进行查询
				this.initSchoolData().then((res) => {
					this.initSyllabusCount();
				});
			} else {
				// 个人课纲则直接根据老师CODE去查询所有个人册别
				this.getVolumesData();
			}
		},
		methods: {
			// 获取当前学校学段学科等基本信息
			initSchoolData() {
				return new Promise((r, j) => {
					this.$store.dispatch("user/getSchoolProfile").then((res) => {
						let schoolBaseInfo = res.school_base;
						if (schoolBaseInfo) {
							this.originSchoolData = schoolBaseInfo; // 默认选择第一个
							this.originData = schoolBaseInfo; // 默认选择第一个
							if (schoolBaseInfo.period.length) {
								this.periodList = schoolBaseInfo.period;
								this.currentParams.code = schoolBaseInfo.id;
								this.currentParams.periodId = schoolBaseInfo.period[0].id;
								this.currentPeriodIndex = 0; // 默认选择第一个学段
								this.onPeriodChange(0);
							}
						}
					});
				});
			},

			// 获取当前册别数量
			initSyllabusCount() {
				return;
				if (this.volumnCounts.length) {
					this.schoolVolCount = this.volumnCounts[this.currentPeriodIndex].map(
						(i) => i[0]
					);
					this.privateVolCount = this.volumnCounts[this.currentPeriodIndex].map(
						(i) => i[1]
					);
				} else {
					this.$api.syllabus
						.FindSyllabusCount({
							code: this.$store.state.userInfo.schoolCode,
						})
						.then((res) => {
							if (!res.error) {
								this.$nextTick(() => {
									this.volumnCounts = res;
									this.schoolVolCount = res[this.currentPeriodIndex || 0].map(
										(i) => i[0]
									);
									this.privateVolCount = res[this.currentPeriodIndex || 0].map(
										(i) => i[1]
									);
								});
							} else {
								this.$Message.warning("获取数据失败");
							}
						});
				}
			},

			// 根据学科获取所有册别信息
			getVolumesData() {
				let that = this;
				this.currentParams.type = this.isSchool ? 0 : 1;
				this.currentParams.code = this.isSchool ?
					this.$store.state.userInfo.schoolCode :
					this.$store.state.userInfo.TEAMModelId;
				if (!this.isSchool) {
					// 个人课纲 则规定查询参数
					this.currentParams.periodId = null;
					this.currentParams.gradeId = null;
					this.currentParams.subjectId = null;
				}
				this.$api.syllabus.GetVolumes(this.currentParams).then((res) => {
					if (res.volumes) {
						let list = res.volumes;
						list.forEach((item, index) => {
							// 如果是校本册别 则需要匹配年级学期等信息
							if (item.type === 0) {
								const matchGrade = this.periodList[
									this.currentPeriodIndex
								].grades.filter((grade) => grade.id === item.gradeId);
								const matchSemester = this.periodList[
									this.currentPeriodIndex
								].semesters.filter((semester) => semester.id === item.semesterId);
								/* 如果匹配的到区班校信息则换取年级以及学期信息 如果匹配不要就说明 是旧数据 不做显示 */
								if (matchGrade.length) {
									item.gradeName = matchGrade[0].name;
									item.semesterName = matchSemester[0].name;
								} else {
									list.splice(index, 1);
								}
							}
						});
						this.volumeList = list;
						this.originVolumeList = list;
						this.handleVolumeTap(0, list.length > 0 ? list[0] : null);
						this.searchVolume = "";
						setTimeout(function() {
							that.isLoadVolumes = false;
						}, 400);
					} else {
						this.$Message.warning("当前科目无册别数据");
						that.isLoadVolumes = false;
					}
				});
			},

			// 根据册别CODE来获取对应树形课纲数据
			getTreeByVolume(volumeCode) {
				let that = this;
				this.$api.syllabus
					.GetTreeByVolume({
						code: volumeCode,
					})
					.then((res) => {
						if (!res.error && res) {
							this.treeData = res;
							setTimeout(function() {
								that.isLoadSyllabus = false;
							}, 400);
						} else {
							this.$Message.warning("获取数据失败");
						}
					});
			},

			// 校本课纲与个人课纲切换
			//         async handleTabClick(index) {
			//             this.tabIndex = index
			//             this.currentParams.type = index
			//             if (index === 0 && this.currentParams.TEAMModelId) {
			//                 delete this.currentParams.TEAMModelId
			//             } else {
			//                 this.currentParams.TEAMModelId = this.$store.state.userInfo.TEAMModelId
			//             }
			//             this.addType = index === 0 ? 'school' : 'private'
			// if(!this.periodList.length){
			// 	await this.initSchoolData()
			// }
			// if(this.isSchool){
			// 	this.onPeriodChange(this.currentPeriodIndex)
			// }else{
			// 	this.getVolumesData()
			// }
			//         },

			// 学段 切换处理
			onPeriodChange(index) {
				if (this.$refs.periodSelect) {
					this.preSelectVal = this.$refs.periodSelect.value;
				}
				if (this.hasModify) {
					this.handleConfirmSave({}, "3");
				} else {
					let that = this;
					this.isLoadSubject = true;
					this.activePeriodIndex = index;
					this.currentParams.periodId = this.originData.period[index].id;
					this.subjectList = JSON.parse(
						JSON.stringify(this.periodList[index].subjects)
					); // 切换学段后更新 学科 列表
					this.originSubjectList = JSON.parse(
						JSON.stringify(this.periodList[index].subjects)
					); // 筛选学科源数据
					this.gradeList = JSON.parse(
						JSON.stringify(this.periodList[index].grades)
					); // 切换学段后更新 年级 列表
					this.semesterList = JSON.parse(
						JSON.stringify(this.periodList[index].semesters)
					); // 切换学段后更新 学期 列表
					if (this.subjectList.length) {
						this.handleSubjectTap(0);
						this.initSyllabusCount();
					} else {
						this.volumeList = [];
					}

					this.searchSubject = "";
					setTimeout(function() {
						that.isLoadSubject = false;
					}, 400);
				}
			},

			// 学科点击事件
			handleSubjectTap(index) {
				this.isLoadVolumes = true;
				this.currentSubjectIndex = index;
				this.currentParams.subjectId = this.subjectList[index].id;
				this.activeSubjectIndex = index;
				this.getVolumesData();
			},

			// 册别点击事件
			handleVolumeTap(index, volume) {
				this.activeVolumeIndex = index;
				this.currentVolume = volume;
				if (volume) {
					this.isLoadSyllabus = true;
					this.getTreeByVolume(volume.volumeCode);
				}
			},

			// 添加册别完成
			onFinishAddVolume(val) {
				if (val) {
					let isExist = this.volumeList.filter((item) => item.id === val).length; // 判断列表是否已存在该学期下的册别，有则更新，无则添加
					if (isExist) {
						this.$Message.success("更新成功");
					} else {
						this.$Message.success("添加新册别成功");
						this.volumnCounts = [];
						this.filterGrade = "all";
						this.filterSemester = "all";
					}

					if (this.isSchool) {
						this.handleSubjectTap(this.currentSubjectIndex); // 获取最新册别数据
						this.initSyllabusCount();
					} else {
						this.getVolumesData();
					}
				}
				this.isAddVolume = false; // 关闭窗口
			},

			// 删除册别事件
			onDeleteVolume(data) {
				data.status = 0;
				this.$Modal.confirm({
					title: "删除学科",
					content: "<p>确认删除该册别？</p>",
					okText: "确认",
					cancelText: "取消",
					onOk: () => {
						this.isLoading = true;
						this.$api.syllabus.DeleteVolume(data).then((res) => {
							if (res) {
								this.volumeList.splice(this.volumeList.indexOf(data), 1);
								this.$Message.success("删除成功");
								this.handleVolumeTap(
									0,
									this.volumeList.length ? this.volumeList[0] : null
								);
								this.volumnCounts = [];
								this.initSyllabusCount();
								this.isLoading = false;
							} else {
								this.$Message.success("删除失败");
							}
						});
					},
				});
			},

			// 编辑册别事件
			onEditVolume(data) {
				this.isAddVolume = true; // 打开新增窗口
				this.isEditVolume = true; // 设置成编辑状态
				this.editVolume = data;
			},

			// 新增册别事件
			onAddVolume() {
				this.isAddVolume = true;
				this.isEditVolume = false;
				this.editVolume = null;
			},

			// 管理共编使用者
			onEditEditors(data) {
				this.editVolume = data;
				this.isEditEditors = true;
			},

			// 筛选年级事件
			onFilterGrade(val) {
				if (val === "all" && this.filterSemester === "all") {
					this.volumeList = this.originVolumeList;
				} else if (val !== "all" && this.filterSemester === "all") {
					this.volumeList = this.originVolumeList.filter(
						(item) => item.gradeId === val
					);
				} else if (val === "all" && this.filterSemester !== "all") {
					this.volumeList = this.originVolumeList.filter(
						(item) => item.semesterId === this.filterSemester
					);
				} else {
					this.volumeList = this.originVolumeList.filter(
						(item) =>
						item.semesterId === this.filterSemester && item.gradeId === val
					);
				}

				this.handleVolumeTap(
					0,
					this.volumeList.length > 0 ? this.volumeList[0] : null
				); // 筛选完成 默认加载筛选结果第一个册别课纲
			},

			// 筛选学期事件
			onFilterSemester(val) {
				if (val === "all" && this.filterGrade === "all") {
					this.volumeList = this.originVolumeList;
				} else if (val !== "all" && this.filterGrade === "all") {
					this.volumeList = this.originVolumeList.filter(
						(item) => item.semesterId === val
					);
				} else if (val === "all" && this.filterGrade !== "all") {
					this.volumeList = this.originVolumeList.filter(
						(item) => item.gradeId === this.filterGrade
					);
				} else {
					this.volumeList = this.originVolumeList.filter(
						(item) => item.gradeId === this.filterGrade && item.semesterId === val
					);
				}

				this.handleVolumeTap(
					0,
					this.volumeList.length > 0 ? this.volumeList[0] : null
				); // 筛选完成 默认加载筛选结果第一个册别课纲
			},

			// 搜索册别输入框onchange事件
			onSearchVolumeChange() {
				this.volumeList = this.originVolumeList.filter(
					(item) => item.volumeName.indexOf(this.searchVolume) > -1
				);
				if (this.volumeList.length) this.handleVolumeTap(0, this.volumeList[0]); // 获取筛选后的第一个册别课纲数据
			},

			// 清空科目搜索框
			onSearchSubjectClose() {
				this.searchSubject = "";
				this.isSearchSubject = false;
				this.subjectList = this.originSubjectList;
				this.handleSubjectTap(0);
			},

			// 清空册别搜索框
			onSearchVolumeClose() {
				this.searchVolume = "";
				this.isSearchVolume = false;
				this.volumeList = this.originVolumeList;
				this.handleVolumeTap(0, this.volumeList[0]);
			},

			// 搜索学科输入框onchange事件
			onSearchSubjectChange() {
				this.subjectList = this.originSubjectList.filter(
					(item) => item.name.indexOf(this.searchSubject) > -1
				);
				if (this.subjectList.length) {
					this.handleSubjectTap(0);
				} else {
					this.volumeList = [];
					this.treeData = [];
				}
			},

			// 显示后添加全部选项
			onPopperShow() {
				if (!this.gradeList.filter((item) => item.id === "all").length) {
					this.gradeList.unshift({
						name: "全部",
						id: "all",
					});
					this.filterGrade = "all";
				}
				if (
					!this.semesterList.filter((item) => item.semesterId === "all").length
				) {
					this.semesterList.unshift({
						name: "全部",
						id: "all",
					});
					this.filterSemester = "all";
				}
			},

			// 存储变更保存最新课纲数据
			onSaveSyllabus() {
				this.isLoadSyllabus = true;
				let latestTree = this.$refs.treeRef.treeDatas[0].children;
				this.$api.syllabus.SaveOrUpdateAsTree(latestTree).then((res) => {
					if (!res.error && res) {
						this.treeData = res;
						this.isLoadSyllabus = false;
						this.hasModify = false;
						this.$Message.success("保存成功");
					} else {
						this.$Message.warning("获取数据失败");
					}
				});
			},

			// 更新当前课纲数据
			onTreeUpdate() {
				this.handleVolumeTap(this.activeVolumeIndex, this.currentVolume);
				this.$Message.success("更新完成");
			},

			// 判断用户是否放弃修改
			handleConfirmSave(param, type) {
				this.$Modal.confirm({
					title: "修改提示",
					content: "<p>您有未保存的课纲,将会丢失所有更改,确认放弃修改？</p>",
					okText: "确认",
					cancelText: "取消",
					onOk: () => {
						this.hasModify = false;
						switch (type) {
							case "1":
								this.handleVolumeTap(param.index, param.item);
								break;
							case "2":
								this.handleSubjectTap(param.index);
								break;
							case "3":
								this.onPeriodChange(this.currentPeriodIndex);
								break;
							default:
								break;
						}
					},
					onCancel: () => {
						switch (type) {
							case "3":
								this.currentPeriodIndex = this.preSelectVal;
								break;
							default:
								break;
						}
					},
				});
			},
		},
		mounted() {},
		watch: {
			$route: {
				handler: function(to, from) {
					// this.handleTabClick(this.$route.name === 'syllabus' ? 0 : 1)
				},
				immediate: true,
			},
		},
	};
</script>

<style>
	.new-syllabus-header .ivu-select-single .ivu-select-selection,
	.funnel-box .ivu-select-single .ivu-select-selection {
		background: transparent;
		color: #fbfbfb;
		border: 1px solid #424242;
	}

	.ns-header-search {
		line-height: 50px;
	}

	.ns-header .ivu-input {
		background: #3c3c3c;
		color: #fff;
		border: none;
		height: 35px;
	}

	.ns-header .ivu-input-icon {
		font-size: 20px;
		color: #cfc7c7;
		line-height: 32px;
		cursor: pointer;
	}

	.new-syllabus-header .ivu-select-single .ivu-select-arrow,
	.funnel-box .ivu-select-single .ivu-select-arrow {
		color: #fbfbfb;
	}

	.new-syllabus-header .ivu-input {
		background: #3c3c3c;
		color: #fff;
		border: none;
		height: 36px;
		margin-top: 6px;
	}

	.new-syllabus-content .ns-header .ivu-input-icon {
		font-size: 24px;
		color: #cfc7c7;
		line-height: 40px;
		cursor: pointer;
	}

	/* 修改iview Modal样式 */

	.add-volume-modal .ivu-modal-content {
		background: #3c3c3c;
		color: #fff;
	}

	.add-volume-modal .ivu-modal-header {
		border-bottom: none;
		font-size: 18px;
		font-weight: bold;
		padding: 25px;
	}

	.add-volume-modal .modal-content {
		padding: 10px 35px 30px 35px;
	}

	/* 修改iview popper样式 */

	.ns-col .ivu-poptip-inner {
		background: #3c3c3c;
	}

	.ns-col .ivu-poptip-title:after {
		background: #656565;
		left: 16px;
		right: 20px;
	}

	.ns-col .ivu-poptip-title-inner {
		color: #fff;
	}

	.ns-col .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow:after {
		border-bottom-color: #494949;
	}
</style>
