eta_front/src/views/dataEntry_manage/databaseList.vue

<template>
	<div class="database_container">
		<div class="database_top">
			<div class="top-left">
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_addEdb"
					type="primary" @click="addHandler"><!-- 添加指标 -->{{$t('EtaBasePage.add_edb_btn')}}</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_calcuEdb"
					type="primary" @click="addComputedHandler"><!-- 计算指标 -->{{$t('EtaBasePage.calculation_edb_btn')}}</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_replaceEdb"
					type="primary" @click="replaceEdbHandler"><!-- 替换指标 -->{{$t('EtaBasePage.replace_edb_btn')}}</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_codeRun"
					type="primary" @click="$router.push({path: '/codecount'})"><!-- 代码运算 -->{{$t('EtaBasePage.algorithm_btn')}}</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_dataAdjust"
					type="primary" @click="$router.push({path: '/adjustdata'})"><!-- 数据调整 -->{{$t('EtaBasePage.adjustment_btn')}}</el-button>
				<!-- <el-button v-permission="permissionBtn.edbDataPermission.edbData_batchUpdate"
					type="primary" plain @click="updateHandler">一键刷新</el-button> -->
			</div>
			<div class="top-right">

				<!-- <change-lang 
					v-permission="permissionBtn.edbDataPermission.edbData_switchEn"
					:lang="currentLang" 
					style="height: 32px;" 
					@changeLang="changeLanguage"
				/> -->

				<el-select
					v-model="search_txt"
					v-loadMore="searchLoad"
					ref="searchRef"
					:filterable="!search_txt"
					remote
					clearable
					:placeholder="$t('Edb.InputHolderAll.input_name_orid')"
					style="width: 260px;"
					:remote-method="searchHandle"
					@click.native="inputFocusHandle"
				>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					<el-option
						v-for="item in searchOptions"
						:key="item.EdbInfoId"
						:label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
						:value="item.EdbInfoId"
					>
						<div>
							<img 
								:src="$icons.lock_ico2" 
								width="18" 
								height="18" 
								style="vertical-align:middle" 
								v-if="!item.HaveOperaAuth"
							/>
							{{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}
						</div>
					</el-option>
				</el-select>
			</div>
		</div>
		<div class="database-label">
			<edb-label-list 
				:currentLang="currentLang"
				:labelList="labelList"
				:activeLabelId="select_node"
				@clickLabel="changeCurrentLabel"
				@deleteLabel="deleteLabel"
				@moveLabel="({oldIndex,newIndex})=>{labelList[oldIndex] = labelList.splice(newIndex, 1, labelList[oldIndex])[0];}"
				/>
		</div>
		<div class="database_main box" id="box" v-if="showData">
			<!-- 展开收起目录按钮 -->
			<span
				v-show="!isMainLeftShow"
				class="slide-btn-icon slide-right"
				@click="isMainLeftShow = !isMainLeftShow"
			>
				<i :class="{'el-icon-d-arrow-left':isMainLeftShow,'el-icon-d-arrow-right':!isMainLeftShow}"></i>
			</span>
			<!-- <target-tree /> -->
			<div class="main-left left" id="left" v-show="isMainLeftShow">
				<div class="tree-cont">
					<div style="padding-bottom:20px;padding-right:20px;display:flex;justify-content:space-between">
						<span><!-- 目录 -->{{$t('EtaBasePage.tab_menu')}}</span>
						<el-checkbox 
							v-model="IsOnlyMe"
							@change="onlyMeHandler"
						><!-- 只看我的 -->{{$t('Edb.only_see_mine')}}</el-checkbox>
					</div>
					<div class="target_tree">
					<el-tree
						ref="menuTree"
						:data="treeData"
						node-key="UniqueCode"
						:props="defaultProp"
						:allow-drag="canDragHandle"
						:allow-drop="canDropHandle"
						:current-node-key="select_node"
						:default-expanded-keys="defaultShowNodes"
						:draggable="isEdbBtnShow('moveCatalog')"
						:expand-on-click-node="false"
						check-strictly
						empty-text="暂无目录"
						lazy
						:load="getLazyTreeData"
						@node-expand="handleNodeExpand"
						@node-collapse="handleNodeCollapse"
						@current-change="nodeChange"
						@node-drop="dropOverHandle"
						@node-drag-end="dropMouseLeave"
						@node-drag-leave="dropMouseLeave"
						@node-drag-enter="dropMouseOver"
					>
						<span
							class="custom-tree-node"
							slot-scope="{ node, data }"
						>
							<el-input
								ref="editVal"
								style="width: 90px"
								placeholder="请输入值"
								class="label-input"
								v-model="new_label"
								v-if="data.isEdit&&isEdbBtnShow('editCatalog')"
								@blur="changeValue(node, data)"
							/>
							<span 
								@dblclick.stop="editNodeLabel(node, data)" 
								v-else 
								class="text_oneLine node_label" 
								:style="`width:${(select_node === data.UniqueCode && node.Nodewidth) || ''}`"
								:id="`node${data.UniqueCode}`"
							>
								<img 
									:src="$icons.lock_ico2" 
									width="18" 
									height="18" 
									style="vertical-align:middle" 
									v-if="!data.HaveOperaAuth&&data.EdbInfoId"
								/>
								<span>{{ currentLang==='en' ? (data.ClassifyNameEn||data.ClassifyName) : data.ClassifyName }}</span>
							</span>
							<span
								style="display: flex; align-items: center"
								v-if="select_node===data.UniqueCode&&data.HaveOperaAuth"
							>
								<img
									src="~@/assets/img/data_m/move_ico.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
									v-if="data.Button.MoveButton&&isEdbBtnShow('moveCatalog')"
								/>
								<!-- 添加子项 -->
								<img
									src="~@/assets/img/set_m/add.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
									@click.stop="addNode(node,data)"
									v-if="data.Button.AddButton&&isEdbBtnShow('editCatalog')&&node.level<6"
								/>
								<!-- 编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3) -->
								<img
									src="~@/assets/img/set_m/edit.png"
									alt=""
									style="width: 15px; height: 14px; margin-right: 8px"
									@click.stop="editNode(node,data)"
									v-if="!data.EdbCode&&(data.Button.OpButton)&&isEdbBtnShow('editCatalog')"
								/>
								<!-- 删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3) -->
								<img
									slot="reference"
									src="~@/assets/img/set_m/del.png"
									alt=""
									style="width: 14px; height: 14px;"
									@click.stop="removeNode(node,data)"
									v-if="!data.EdbCode&&(data.Button.DeleteButton)&&isEdbBtnShow('deleteCatalog')"
								/>
								<!-- 查看计算指标 -->
								<i class="el-icon-view" 
									v-if="data.EdbType===2&&![58,59,67,68,74].includes(data.Source)&&isEdbBtnShow('checkCalcChart')" 
									@click.stop="viewNode(node,data)"></i>
								<!-- 查看关联图表 -->
								<img 
									v-if="data.Button.ShowChartRelation&&isEdbBtnShow('checkRelatedChart')" 
									@click.stop="showAssociateChart=true,showAssociateComputeData=false"
									src="~@/assets/img/icons/associate_chart.png" 
									style="width: 14px; height: 14px;margin-left: 8px"
									alt=""
								/>
								<!-- 查看关联指标 -->
								<img 
									v-if="data.Button.ShowEdbRelation&&isEdbBtnShow('checkRelatedEdb')" 
									@click.stop="showAssociateComputeData=true,showAssociateChart=false"
									src="~@/assets/img/icons/associate_data.png" 
									style="width: 14px; height: 14px;margin-left: 8px"
									alt=""
								/>
							</span>
						</span>
					</el-tree>
					</div>
					<div class="noDepart" @click="addLevelOneHandle" v-if="CanOpClassify&&isEdbBtnShow('editCatalog')">
						<img
							src="~@/assets/img/set_m/add_ico.png"
							alt=""
							style="width: 16px; height: 16px; margin-right: 10px"
						/>
						<span>{{$t('EtaBasePage.add_first_menu_btn')}}</span>
					</div>
				</div>
				<span class="move-btn resize" v-drag id="resize" @mousemove="dynamicNode&&resetNodeStyle(dynamicNode)">
				</span>
				<span
					v-show="isMainLeftShow"
					class="slide-btn-icon slide-left"
					@click="isMainLeftShow = !isMainLeftShow"
				>
					<i :class="{'el-icon-d-arrow-left':isMainLeftShow,'el-icon-d-arrow-right':!isMainLeftShow}"></i>
				</span>
			</div>
			<!-- 指标关联图模块 -->
			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none" v-if="showAssociateChart">
				<dataAssociateChart :edbInfoId="selected_edbid"></dataAssociateChart>
			</div>
			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none;padding-top: 30px;box-sizing: border-box;" v-if="showAssociateComputeData">
				<dataAssociateComputeData :edbInfoId="selected_edbid"></dataAssociateComputeData>
			</div>
			<!-- 指标图表列表 -->
			<div class="main-right right list" id="right" v-show="isShowList">
				<p>{{$t('EtaBasePage.total_show',{limit: Total||0})}}</p>
				<div class="list-wrap" ref="listRef" @scroll="loadMoreHandle" v-if="Total">
					<div class="chart-list-item-wrap">
						<div class="list-item" v-for="item in chartList" :key="item.EdbInfoId">
							<div class="header">
								<span v-show="currentLang=='zh'">{{ item.EdbName }}</span> 
								<span v-show="currentLang=='en'">{{ item.EdbNameEn || item.EdbName }}</span>
							</div>
							<div class="image" @click="detailShowHandle(item)"
								:style="{background: `no-repeat top/cover url('${!item.HaveOperaAuth ? $icons.lock_big : item.ChartImage}')`}">
							</div>
							<div class="info">
								{{$t('EtaBasePage.time_show')}}：{{item.CreateTime.substring(0,10)}}
								<!-- wind和钢联化工的指标显示 启用/停用-->
								<span v-if="[2,34].includes(item.Source) && isEdbBtnShow('enableOrDisable')" 
								class="enable-toggle-btn" :style="{'color': item.NoUpdate==1?'#0052D9':'#D54941'}"
								@click="toggleEdbRefreshStatus(item)">{{item.NoUpdate==1?$t('SystemManage.DataRefresh.enable'):$t('SystemManage.DataRefresh.disable') }}</span>
							</div>
							<img src="~@/assets/img/icons/edb-stopping.png" class="stop-mark" v-if="[2,34].includes(item.Source) && item.NoUpdate==1" />
						</div>
					</div>
					
				</div>
				<div v-if="!Total" class="nodata">
					<tableNoData :text="$t('Table.no_edb_msg')"/>
				</div>
			</div>
			<!-- 指标详情 -->
			<div class="main-right right detail-wrap" id="right" v-show="isShowDetail">
				<div class="detail" v-if="EdbData.HaveOperaAuth">
					<div class="header">
						<el-tabs v-model="activeTab" @tab-click="rePainChart">
							<el-tab-pane :label="$t('Edb.trend_chart_tab')" name="Chart">
							</el-tab-pane>
							<el-tab-pane :label="$t('Edb.data_detail_tab')" name="Data">
							</el-tab-pane>
						</el-tabs>
						<div class="edb-tool-icon edb-tool" style="align-items: center;">
							<el-button v-if="[2,34].includes(EdbData.Source) && isEdbBtnShow('enableOrDisable')" 
								type="text" :style="{'color': EdbData.NoUpdate==1?'#0052D9':'#D54941'}"
								@click="toggleEdbRefreshStatus(EdbData,'detail')" 
							>{{EdbData.NoUpdate==1?$t('SystemManage.DataRefresh.enable'):$t('SystemManage.DataRefresh.disable') }}<!-- 启用/停用 --></el-button>
							<el-button 
								v-if="isEdbBtnShow('update')"
								type="text" 
								@click="refreshTargetHandle" 
							>{{$t('Edb.detail_refresh_btn')}}<!-- 刷新 --></el-button>
							<el-button 
								v-if="isEdbBtnShow('edit')"
								type="text" 
								:disabled="!(EdbData.Button.OpButton)"
								@click="editNode({},EdbData)"
							>{{$t('Edb.detail_edit_btn')}}<!-- 编辑 --></el-button>
							<!-- 指保存指标的上下限，在走势图才显示 -->
							<el-button 
								v-if="activeTab==='Chart'&&isEdbBtnShow('saveEdb')"
								type="text" 
								@click.stop="saveEdbLimit"
							>{{$t('Edb.detail_save_btn')}}<!-- 保存 --></el-button>
							<el-button 
								v-if="EdbData.EdbType===2&&isEdbBtnShow('toSource')"
								type="text" 
								@click="toHistoryPage(selected_edbid,$route.matched);lookEdbId=selected_edbid"
							>{{$t('Edb.detail_trace_btn')}}<!-- 指标溯源 --></el-button>
							<el-popover 
								v-if="showPopver"
								placement="bottom-end" 
								trigger="hover"
								popper-class="edb-tool-popover"
								width="300" style="display: inline-block;"
							>
								<div class="edb-tool-wrap">
									<el-button 
										v-if="isEdbBtnShow('setEn')"
										type="text" 
										@click="openLangInfoDia"
									>{{$t('Edb.detail_en_btn')}}<!-- 编辑信息 --></el-button>
									<el-button 
										v-if="EdbData.Button.InsertNewDataButton&&isEdbBtnShow('newValue')"
										type="text" 
										@click.stop="updateNewestDataHandle" 
									>{{(EdbData.DataInsertConfig.Date)?$t('Edb.detail_edit_latest'):$t('Edb.detail_add_latest')}}<!-- 添加最新值 --></el-button>
									<el-button 
										v-if="EdbData.EdbType===2&&isEdbBtnShow('calculateAgain')"
										type="text" 
										@click.stop="reCalculateHandler" 
										:loading="calculateLoading"
									>{{$t('Edb.detail_recalculate_btn')}}<!-- 重新计算 --></el-button>
									<el-button 
										v-if="EdbData.EdbType===1&&isEdbBtnShow('refreshAll')"
										type="text"
										@click.stop="refreshBaseHandler" 
										:loading="refreshLoading"
									>{{$t('Edb.detail_refresh_all')}}<!-- 全部刷新 --></el-button>
									<el-button 
										v-if="isEdbBtnShow('copyData')"
										type="text" 
										@click="copyCode"
									>{{$t('Edb.detail_copydata_btn')}}<!-- 复制数据 --></el-button>
									<el-button 
										v-if="EdbData.Button.DeleteButton&&isEdbBtnShow('deleteEdb')"
										type="text" 
										@click="removeNode(_,EdbData)" 
										style="color:#C54322;"
									>{{$t('Edb.detail_del_btn')}}<!-- 删除 --></el-button>
								</div>
								<div class="edb-btn" slot="reference">
									<el-button type="text">{{$t('Edb.detail_more_btn')}}<!-- 更多操作 --></el-button>
									<i class="el-icon-more" style="font-size: 14px;transform: rotate(90deg);cursor: pointer;color: #3375e1;"/>
								</div>
							</el-popover>
						</div>
					</div>
					<div class="container" id="detail-container">
						<div class="chart" v-show="activeTab==='Chart'">
							<chart-trend-render
								:edbid="selected_edbid"
								:chartLang="currentLang"
								:isShowChartBasis="isEdbBtnShow('showChartBasis')"
								:isAllowSwitchSeason="isEdbBtnShow('switchSeason')"
								:isAllowEditLimit="isEdbBtnShow('editLimit')"
								ref="createChart"
								@editEnName="openEnNameDia"/>
							<div class="info">
								<span>{{$t('Edb.Detail.source')}}：{{EdbData.SourceName}}</span>
								<span>{{$t('Edb.creater')}}：{{EdbData.SysUserRealName}}</span>
							</div>
							<ul class="value-ul"
								v-show="showTable&&dataList.length">
								<li class="value-item" style="background-color: #EBEFF6;">
									<span style="width:240px">{{$t('Edb.Detail.e_date')}}（{{$t('Edb.Detail.e_fre')}}：{{getFrequencyTrans(EdbData.Frequency)}}）</span>
									<span style="flex:1;">{{$t('Edb.Detail.e_value')}}</span>
								</li>
								<li class="value-item"
									v-for="item in dataList.slice(0,3)"
									:key="item.EdbDataId">
									<span class="value-label date" style="width:240px">
										<span style="position: relative;">
											<i class="new-tag" v-if="EdbData.LatestDate===item.DataTime"></i>
											{{item.DataTime}}
										</span>
									</span>
									<span :class="['value-label',{'predict-act': EdbData.DataInsertConfig.Date===item.DataTime}]" style="flex:1;">
										<span :class="['value-style',{'predict-act': EdbData.DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
									</span>
								</li>
								<li class="nodata value-item" v-if="!dataList.length"><!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}</li>
							</ul>
						</div>
						<div class="list" v-show="activeTab==='Data'">
							<edb-detail-data 
								ref="edb_detail_data"
								:currentLang="currentLang"
								:table-data="tableData"
								:table-colums-one="tableColumsOne"
								:table-colums-two="tableColumsTwo"
								:data-list="dataList"
								:haveMore="haveMore"
								@getNextData="()=>{page_no++;getDataList();}"
							/>
						</div>
					</div>
				</div>

				<noDataAuth v-if="EdbData.HaveOperaAuth===false" :text="$t('MsgPrompt.no_edb_auth')"/>
				
			</div>
		</div>
		<!-- 输入英文指标弹窗 -->
		<!-- <set-en-name-dia :isOpenDialog="setEnName" @cancel="setEnName=false" 
		:formData="formItemArray" @updateEnName="updateEnName" cType="ebd" /> -->

		<!-- 目录弹窗 -->
		<openDialog 
			:isOpenDialog="isOpenDialog"
			:title="dialog_title"
			:formData="dialogForm"
			@closeDia="isOpenDialog=false"
			@sucessCallback="sucessCallback"
		/>
		<!-- 指标弹窗 -->
		<addTargetDiaBase
			ref="addTargetDiaBase"
			:isAddTarget="isAddTarget"
			@cancelHandle="isAddTarget = false"
			@addSuccessHandle="addTargetSuccess"
		/>
		<!-- 完善指标信息 -->
		<completeTargetDia
			:isOpenDialog="isComplete"
			@cancel="cacelCompleteCallback"
			:params="add_params"
			@addTargetCallback="addTargetCallback"
		/>
		<!-- 计算指标弹窗 -->
		<computedDialog
			:isOpenComputed="computed_type === 4"
			:title="computedTit"
			:calulateForm="calulateForm"
			:calulateList="calulateList"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
		/>
		<!-- 计算弹窗控制 -->
		<el-dialog
		:visible.sync="isOpenComputed"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="isOpenComputed=false;"
		custom-class="dialog-computed"
		top="6vh"
		center
		width="920px"
		v-dialogDrag>
			<div class="dialog-computed-header">
				<el-radio-group :value="1" size="medium">
					<el-radio-button :label="1">{{$t('EtaBasePage.normal_calculate_tab')}}</el-radio-button>
					<span @click="showBatchComputedPop=true">
					<el-radio-button :label="2">{{$t('EtaBasePage.batch_calculate_tab')}}</el-radio-button>
					</span>
				</el-radio-group>
			</div>
			<ul class="computed-ul">
				<li
					:class="['cpmputed-li',item.type === computed_type?'act':'']" 
					v-for="item in computedShowTypes" 
					:key="item.type" 
					@click="changeComputedType(item.type)">
					{{item.name}}

					<el-popover
						placement="top-start"
						width="500"
						trigger="hover"
						v-if="tips.get(item.type)"
					>
						<p style="padding:20px;line-height:25px;" v-html="tips.get(item.type)"/>
						<i slot="reference" class="el-icon-warning-outline"/>
					</el-popover>
				</li>
			</ul>
		</el-dialog>
		<!-- 转月值 同比 同差 平均值弹窗 -->
		<operationDialog
			:isOperation="([5,6,7,8,12,13,14,22,35,51,52,61,62,63,75].includes(computed_type) || (computed_type===40&&operationForm.view)) && computed_source===1"
			:type="computed_type"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
			@changeSource="changeComputedType"
		/>

		<!-- 一键更新弹窗 -->
		<update-dialog
			:isUpdate="isUpdate"
			@cancel="isUpdate = false"
		/>

		<!-- 替换指标弹窗 -->
		<replace-dialog
			:isShow="isReplaceDia"
			@cancel="isReplaceDia = false"
		/>

		<!-- 拼接弹窗 -->
		<joint-target-dia
			:isShow="computed_type === 'joint'"
			:params="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 拟合残差弹窗 -->
		<fittingResidueDia
			:isShow="computed_type === 37 && computed_source===1"
			:type="37"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 批量计算弹窗 -->
		<batchComputedDialog
			:isBatchComputed="[6,7,8,12,13,14,5,61,62,63,75].includes(computed_type) && computed_source===2"
			:type="computed_type"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
			@changeSource="changeComputedType"
		/>

		<!-- 扩散指数弹窗 -->
		<diffusionIndexDialog
			:isShow="computed_type === 53 && computed_source===1"
			:type="computed_type"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 添加最新值弹窗 -->
		<updateNewestDataDia
			:isShow.sync="isUpdateNewestData"
			:edbinfo="tableData[0]"
			:dataList="dataList"
			@success="updateNewest"
		/>

		 <!-- 指标历史记录 -->
    <!-- <edbHistoryDialog
      :isOpenDialog.sync="isLookHistory"
      :edbId="lookEdbId"
    /> -->
		<!-- 指数修匀弹窗 -->
		<SmoothEdbDialog 
			:is-open-smooth="computed_type==='alpha'"
			:computed-source="computed_source"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@openPrev="isOpenComputed=true"
			@addCallBack="addComputedCallBack"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
		/>

		<!-- 批量计算指标 -->
		<batchComputedV2 
			:isShow="showBatchComputedPop" 
			:type="computed_type"
			:operationForm="operationForm"
			@close="isOpenComputed=false;showBatchComputedPop=false" 
			@closeSelf="handleCloseBatchPopSelf"
			@addCallBack="addComputedCallBack"
		/>

		<!-- 设置对应版本信息弹窗 -->
		<setLangInfoDia
			:isOpenDialog="isLangInfoDia"
			:formData="formItemArray"
			@cancel="isLangInfoDia=false" 
			@updateLang="updateLang"
			cType="ebd" 
		/>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { getComputedTypes,getBatchComputedTypes,getFormulaTip } from './databaseComponents/util';

import openDialog from './databaseComponents/openDialog';
import addTargetDiaBase from './databaseComponents/addTargetDiaBase';
import completeTargetDia from './databaseComponents/completeTargetDia'
import computedDialog from './databaseComponents/computedDialog';
import operationDialog from './databaseComponents/operationDialog';
import createChart from './databaseComponents/createChart';
import updateDialog from './databaseComponents/updateDialog';
import replaceDialog from './databaseComponents/replaceDialog';
import jointTargetDia from './databaseComponents/jointTargetDia';
import changeLang from "./components/changeLang.vue"
import setEnNameDia from "./components/setEnNameDia.vue"
import dataAssociateChart from './databaseComponents/dataAssociateChart.vue'
import dataAssociateComputeData from './databaseComponents/dataAssociateComputeData.vue'
import fittingResidueDia from './databaseComponents/fittingResidueDia.vue';
import batchComputedDialog from './databaseComponents/batchComptedDialog.vue';
import diffusionIndexDialog from './databaseComponents/diffusionIndexDia.vue';
import updateNewestDataDia from './databaseComponents/updateNewestDia.vue';
import EdbLabelList from '@/components/edbLabelList.vue';
import chartTrendRender from './databaseComponents/chartTrendRender.vue';
import edbDetailData from './databaseComponents/edbDetailData.vue';
import SmoothEdbDialog from './databaseComponents/smoothEdbDialog.vue';
import batchComputedV2 from './databaseComponents/batchComputedV2.vue';
import setLangInfoDia from './components/setLangInfo.vue'
export default {
	name: '',
	components: {
		openDialog,
		addTargetDiaBase,
		completeTargetDia,
		computedDialog,
		operationDialog,
		createChart,
		updateDialog,
		replaceDialog,
		jointTargetDia,
		changeLang,
		setEnNameDia,
		dataAssociateChart,
		dataAssociateComputeData,
		fittingResidueDia,
		batchComputedDialog,
		diffusionIndexDialog,
		updateNewestDataDia,
		EdbLabelList,
		chartTrendRender,
		edbDetailData,
		SmoothEdbDialog,
		batchComputedV2,
		setLangInfoDia
	},
	directives: {
		drag(el, bindings,vnode) {
			el.onmousedown = function(e) {
				var init = e.clientX;
				var box = $("#box")[0]
				let total_wid = box.offsetWidth
				var left = $("#left")[0];
				var right = $("#right")[0];
				var initWidth = left.offsetWidth;
				document.onmousemove = function(e) {
					var end = e.clientX;
					if(end > 310){
						var newWidth = end - init + initWidth;
						right.style.width = total_wid - newWidth + 'px'
						left.style.width = newWidth + "px";
					}else{
						end = 350;
						// 最小宽度300
						left.style.width = 300 + "px";
						// right.style.width = total_wid-300-20 +'px'
					}
					
				};
				document.onmouseup = function() {
					document.onmousemove = document.onmouseup = null;
					e.releaseCapture && e.releaseCapture();
					//移动结束触发重绘
					vnode.context.rePainChart()
				};
				e.setCapture && e.setCapture();
				return false;
			};
		}
	},
	data() {
		return {
			IsOnlyMe:false,//只看我的
			showData: false,
			search_txt: '', //搜索词
			searchOptions:[],//搜索到的筛选列表
			treeData: [], //树形数据
			defaultShowNodes:[], //默认展开的节点
			defaultProp: {
				label: 'ClassifyName',
				children: 'Children',
				isLeaf:'isLeaf'
			},//树结构配置项
			tableData: [],
			loading:null,
			showTable:false,
			page_no: 1,
			haveMore: true,
			selected_edbid: 0,//选中的指标id
			dataList: [],//指标数值
			new_label: '',//新的节点label值
			select_node:'',//当前选中的节点
			/* 新增编辑目录弹窗 */
			isOpenDialog:false,
			dialog_title: '',
			dialogForm:{
				level:''
			},
			/* 新增指标弹窗 */
			isAddTarget: false,
			/* 完善信息 */
			isComplete:false,
			add_params:{},
			defaultWarn:'请在左侧选择指标',//缺省文字
			/* 计算指标弹窗 */
			isOpenComputed:false,
			computedTit:'',
			calulateForm:{},
			calulateList:[],
			computed_type:0,//打开弹窗的类型
			operationForm:{},
			dynamicNode:null,
		
			edb_source:0,//指标来源 显示计算按钮
			calculateLoading: false,//计算指标刷新loading
			refreshLoading: false,//基础指标刷新loading
			/* 一键成图弹窗 */
			isCreateChart: false,
			/* 一键更新弹窗 */
			isUpdate:false,
			/* 替换指标弹窗 */
			isReplaceDia: false,
			/* 拼接指标弹窗 */
			isJoint: false,

			search_page: 1,
			search_have_more: false,
			current_search:'',
			// currentLang:'ch', // 语言 ch 中文 en 英文
			// -----------------设置英文指标弹窗
			setEnName:false,
			// 传入的formItem所需内容
			formItemArray:[],
			// 在哪里更新的英文指标 table(表格上) chart(图表里)
			updateType:'table',
			// ----------------------
			edb_levels:[],//指标的父级分类id

			showAssociateChart:false,//显示指标关联的图
			showAssociateComputeData:false,//显示指标关联的引用计算指标

			computed_source: 1,//计算类型 1常规 2批量
			isBatchComputed: false,//批量计算弹窗

			//添加最新值弹窗
			isUpdateNewestData: false,

			/* 查看历史弹窗 */
			isLookHistory: false,
			lookEdbId: 0,
			labelList:[],//标签列表

			CanOpClassify: false,

			select_classifyId:0,//指标分类id
			PageSize:20,
			CurrentIndex:1,
			Total:0,
			IsListEnd:false,//是不是到底了
			chartList:[],

			activeTab:'',
			activeName:'second',

			isMainLeftShow:true,

			showBatchComputedPop:false,

			/* 修改对应版本信息弹窗  替换原有设置英文*/
			isLangInfoDia: false
		};
	},
	watch: {
		selected_edbid(newval) {
			if(!newval) {
				this.tableData = [];
				this.dataList = [];
				this.defaultWarn = '请在左侧选择指标';
				this.activeTab=''
			}else {
				console.log('new val')
				this.activeTab='Chart'
				this.initGetData();
			}
		},
		/* 选中搜索指标 展开目录 选中指标 展示数据 */
		search_txt(newval) {
			if (newval) {
				let [search_obj] = this.searchOptions.filter(
					(item) => item.EdbInfoId === newval
				);
				this.page_no = 1;
				if(this.$refs.edb_detail_data){
					this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
				}
				this.select_node = search_obj.UniqueCode;
				this.selected_edbid = newval;
			}
		},
		select_classifyId(newval){
			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
			if(newval){
				this.CurrentIndex = 1
				this.getEdbChartList()
			}
		},
		isMainLeftShow(newVal){
			this.rePainChart()
		},
	},
	computed: {
		/* 计算弹窗控制 */
		computedShowTypes() {
			return this.computed_source===1 ? getComputedTypes() : getBatchComputedTypes();
		},
		role() {
			let role = localStorage.getItem('Role') || '';
			if (['rai_researcher', 'ficc_researcher', 'researcher','ficc_seller','rai_seller','seller'].includes(role)) {
				return 'researcher'
			}else if(['rai_admin','ficc_admin'].includes(role)) {
				return 'admin'
			}
			else {
				return role;
			}
		},
		/* 登录角色id */
		roleId() {
			let id = parseInt(localStorage.getItem('AdminId'));
			return id;
		},
		//指标详情，也就是tableData[0]
		EdbData(){
			return this.tableData[0]?this.tableData[0]:{Button:{},DataInsertConfig:{},DataList:[]}
		},
		//是否显示指标列表
		isShowList(){
			return !this.showAssociateChart&&!this.showAssociateComputeData&&!this.selected_edbid
		},
		//是否显示指标详情
		isShowDetail(){
			return !this.showAssociateChart&&!this.showAssociateComputeData&&this.selected_edbid
		},
		//是否显示更多操作
		showPopver(){
			return this.isEdbBtnShow('setEn')||
			this.EdbData.Button.InsertNewDataButton&&this.isEdbBtnShow('newValue')||
			this.EdbData.EdbType===2&&this.isEdbBtnShow('calculateAgain')||
			this.EdbData.EdbType===1&&this.isEdbBtnShow('refreshAll')||
			this.isEdbBtnShow('copyData')||
			this.EdbData.Button.DeleteButton&&this.isEdbBtnShow('deleteEdb')
		},
		
		/*表格列 */
		tableColumsOne(){
			return [
				{
					label: this.$t('Edb.Detail.e_id'),
					key: 'EdbCode',
					minwidthsty: '150px'
				},
				{
					label: this.$t('Edb.Detail.e_name'),
					key: 'EdbName',
					enKey:'EdbNameEn',
					inputTip:'点击输入英文指标名称',
					minwidthsty: '200px'
				},
				{
					label: this.$t('Edb.Detail.e_fre'),
					key: 'Frequency',
					enKey:'FrequencyEn',
					widthsty: '100px'
				},
				{
					label: this.$t('Edb.Detail.e_unit'),
					key: 'Unit',
					enKey:'UnitEn',
					inputTip:'英文单位',
					// minwidthsty: '50px'
					widthsty: '100px'
				},
				{
					label: this.$t('Edb.Detail.source'),
					key: 'SourceName',
					widthsty: '160px'
				},
			]
		},
		tableColumsTwo() {
			return [
				{
					label: this.$t('Edb.Detail.e_menu'),
					key: 'Menu',
					minwidthsty: '150px',
				},
				{
					label: this.$t('Edb.Detail.e_start_time'),
					key: 'StartDate',
					minwidthsty: '115px',
				},
				{
					label: this.$t('Edb.Detail.e_update_time'),
					key: 'ModifyTime',
					minwidthsty: '120px',
				},
				{
					label: this.$t('Edb.creater'),
					key: 'SysUserRealName',
					widthsty: '160px',
				}
			]
		},

		tips() {//公式说明
			return getFormulaTip()
		},

		currentLang() {
			return this.$store.state.lang
		}
	},
	methods: {
		//控制页面按钮权限
		isEdbBtnShow(type){
			const {edbDataPermission,checkPermissionBtn}=this.permissionBtn
			const BtnMap = {
				'update':edbDataPermission.edbData_update,//指标更新
				'edit':edbDataPermission.edbData_edit,//指标编辑
				/* 'toImg':edbDataPermission.edbData_toImgs, */
				'copyData':edbDataPermission.edbData_copyData,//复制数据
				'toSource':edbDataPermission.edbData_edbSource,//指标溯源
				'setEn':edbDataPermission.edbData_enNameSetting,//设置英文名称
				'newValue':edbDataPermission.edbData_newestValue,//添加/编辑最新值
				'refreshAll':edbDataPermission.edbData_refreshAll,//全部刷新
				'saveEdb':edbDataPermission.edbData_saveEdb,//保存指标
				'deleteEdb':edbDataPermission.edbData_deleteEdb,//删除指标
				'showChartBasis':edbDataPermission.edbData_showChartBasis,//展示/隐藏同比图
				'switchSeason':edbDataPermission.edbData_switchSeason,//切换季节性图
				'editLimit':edbDataPermission.edbData_editLimit,//编辑上下限
				'calculateAgain':edbDataPermission.edbData_calculateAgain,//重新计算

				'editCatalog':edbDataPermission.edbData_classifyOpt_add,//添加编辑目录
				'deleteCatalog':edbDataPermission.edbData_classifyOpt_delete,//删除目录
				'moveCatalog':edbDataPermission.edbData_classifyOpt_move,//删除目录
				'checkRelatedChart':edbDataPermission.edbData_checkRelatedChart,//查看关联图表
				'checkRelatedEdb':edbDataPermission.edbData_checkRelatedEdb,//查看关联指标
				'checkCalcChart':edbDataPermission.edbData_checkCalcChart,//查看计算指标
				'enableOrDisable':edbDataPermission.edbData_enableOrDisable,//启用/停用
			}
			return checkPermissionBtn(BtnMap[type])
		},
		/* 获取树分类数据 */
		getTreeData(params) {
			
			dataBaseInterface.targetCatalog({IsOnlyMe:this.IsOnlyMe,ParentId:0}).then(res=>{
				if(res.Ret===200){
					const arr=res.Data.AllNodes || []
					this.treeData=arr.map(item=>{
						return {
							...item,
							// isLeaf:item.Children.length?false:true
						}
					})
					this.CanOpClassify = res.Data.CanOpClassify;
					// this.currentLang = res.Data.Language === 'EN' ? 'en' : 'ch';
					// this.setLangIntoStore()
					this.showData = true;
					/* 处理树展开和选中图表 */
					params && this.selectCurrentNode(params);
					!params && this.select_node && this.$refs.menuTree.setCurrentKey(this.select_node);
				}
			})
		},
		/* 获取最新的指标 默认展示 */
		getNewTargetList: _.throttle(function() {
			dataBaseInterface.targetNew().then(res => {
				if(res.Ret === 200) {
					/* 默认选中 默认指标id */
						this.select_node = res.Data ? res.Data.UniqueCode : '';
						this.selected_edbid = res.Data ? res.Data.EdbInfoId : 0;
						this.getTreeData();
				}
			})
		}),
		/* 获取指标数据 */
		getDataList: _.throttle(function(type) {
			dataBaseInterface.targetList({
				PageSize: 20,
				CurrentIndex: this.page_no,
				EdbInfoId: this.selected_edbid,
				// KeyWord: this.search_txt,
			}).then(res => {
				if(res.Ret === 200) {
					this.showTable = true;
					if(res.Data) {
						// res.Data.Item.ModifyTime = res.Data.Item.ModifyTime.substr(0,10);
						let classify_arr = res.Data.ClassifyList || [];
						let str = '';
						classify_arr.length && classify_arr.reverse().map((item) => str += item.ClassifyName + '/');
						this.edb_levels = classify_arr;
						this.$set(res.Data.Item,'Menu',str);
						this.tableData = [res.Data.Item] || [];
						this.edb_source = res.Data.Item.Source;
						this.haveMore =  this.page_no < res.Data.Paging.Pages ? true : false;
						this.dataList = this.page_no === 1 ? (res.Data.Item.DataList || []) : this.dataList.concat(res.Data.Item.DataList);
						
						//将指标添加进标签列表中
						const {EdbNameEn,EdbName,EdbInfoId,UniqueCode,ClassifyId}=res.Data.Item
						this.addLabel({code:UniqueCode,id:EdbInfoId,classifyId:ClassifyId,EdbName,EdbNameEn})
						// 展开目录
						this.defaultShowNodes=classify_arr.map(item=>item.UniqueCode)
						//设置tree高亮
						this.$nextTick(()=>{
							setTimeout(() => {
								this.$refs.menuTree.setCurrentKey(UniqueCode);
							}, 1000);
						})
						

					}else {
						this.tableData = [];
						this.dataList = [];
						this.defaultWarn = type=== 'search' ? '未搜索到该指标' : '请在左侧选择指标'

						this.$refs.menuTree.setCurrentKey(null)
						// 清除当前的label
						this.$message.warning('该图表已删除，自动查看下一图表')
						this.deleteLabel({code:this.select_node,id:this.selected_edbid,classifyId:''})
						
					}
					if(type==='refresh') {
						if(this.$refs.edb_detail_data){
							this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
						}
					}
					this.$nextTick(()=>{
						const _node = this.$refs.menuTree.getNode(this.select_node)
						this.dynamicNode = _node;
						this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
						//滚动到高亮位置
						setTimeout(() => {
							let node = document.getElementById(`node${this.select_node}`)||{}
							let parent = document.getElementsByClassName('target_tree')[0];
							//parent可视区间：[scrollTop,scrollTop+offsetHeight]
							//node位置:node.offsetTop
							const overTop = node.offsetTop+node.clientHeight+30<parent.scrollTop
							const overBottom = node.offsetTop+node.clientHeight+30>parent.scrollTop+parent.offsetHeight
							if(overTop){
								parent.scrollTop = node.offsetTop-60
							}
							if(overBottom){
								parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
							}
						},1500)
					})
					
				}
			})
		}),
		//获取指标图表列表
		getEdbChartList(){
			dataBaseInterface.getEdbChartList({
				PageSize:this.PageSize,
				CurrentIndex:this.CurrentIndex,
				ClassifyId:this.select_classifyId,
				IsOnlyMe:this.IsOnlyMe
			}).then(res=>{
				if(res.Ret!==200) return
				if(res.Data){
					this.chartList = this.CurrentIndex===1?res.Data.List:[...this.chartList,...res.Data.List]
					this.Total = res.Data.Paging.Totals||0
					this.IsListEnd = res.Data.Paging.IsEnd
				}


			})
		},
		// 切换刷新状态
		async toggleEdbRefreshStatus(item,type='list'){
			let flag = true
			if(item.NoUpdate==0){
				flag=false
				await this.$confirm(this.$t('SystemManage.DataRefresh.disable_indicator_prompt'),this.$t('Confirm.prompt'),{
					type:"warning"
				}).then(res=>{
					flag=true
				}).catch(()=>{})
			}
			if(!flag) return
			let ModifyStatus = item.NoUpdate==1?'启用':'暂停'
			dataBaseInterface.edbRefreshStatusSet({EdbInfoId:item.EdbInfoId,ModifyStatus}).then(res=>{
				if(res.Ret == 200){
					item.NoUpdate=1-item.NoUpdate
					if(type=='detail'){
						this.$refs.createChart.toggleEdbRefreshStatusFun()
					}
					this.$message.success(this.$t('MsgPrompt.operate_success_msg'))
				}
			})
		},
		//指标图表列表-加载更多
		loadMoreHandle: _.throttle(function() {
			let scrollTop = this.$refs.listRef.scrollTop;
			let clientHeight = this.$refs.listRef.clientHeight;
			let scrollHeight = this.$refs.listRef.scrollHeight;
			if(scrollTop + clientHeight >= scrollHeight-210 && !this.IsListEnd){
				this.CurrentIndex++;
				this.getEdbChartList();
			}
			},300),
		/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
			dataBaseInterface.targetSearchByPage({
				KeyWord:query,
				CurrentIndex: page
			}).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;
				this.search_have_more = page < Paging.Pages;
				this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
					
			})
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
			this.searchApi(this.current_search);
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},

		/* 存储中英文状态 */
		// setLangIntoStore() {
		// 	this.$store.commit('edb/SET_LANG',this.currentLang)
		// },

		/* 数值滚动加载 */
		scrollHandle: _.throttle(function() {
			let scrollTop = this.$refs.valueUl.scrollTop;
      let clientHeight = this.$refs.valueUl.clientHeight;
      let scrollHeight = this.$refs.valueUl.scrollHeight;
      console.log('scrollTop:',scrollTop)
      console.log('clientHeight:',clientHeight)
      console.log('scrollHeight:',scrollHeight)
			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
				this.page_no ++;
				this.getDataList();
			}
		},200),
		/* 切换中英文 */
		// changeLanguage: _.debounce(async function (lang){
		// 	this.search_txt = '';
		// 	this.currentLang = lang;
		// 	await dataBaseInterface.setUserLang({
		// 		ConfigCode: 'edb_language',
		// 		ConfigValue: lang === 'en' ? 'EN' : 'CN'
		// 	})

		// 	this.setLangIntoStore()
		// },200),
		// 打开 编辑英文名称弹窗
		// openEnNameDia(type='table'){
		// 	this.updateType = type
		// 	this.formItemArray=[{
		// 		label:/* '指标名称' */ this.$t('Edb.Detail.e_name'),
		// 		value:this.tableData[0].EdbName,
		// 		key:'EdbName',
		// 		notEdit:true
		// 	}]
		// 	// 中文单位有 才能编辑英文单位
		// 	if(this.tableData[0].Unit && this.tableData[0].Unit!='无'){
		// 		this.formItemArray.push({
		// 			label:this.$t('Edb.Detail.e_unit') /* '单位' */,
		// 			value:this.tableData[0].Unit,
		// 			key:'Unit',
		// 			notEdit:true
		// 		},
		// 		{
		// 			label:this.$t('Edb.Detail.e_en_name')/* '英文指标名称' */,
		// 			value:this.tableData[0].EdbNameEn,
		// 			key:'EdbNameEn',
		// 			placeholder: this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_name')}) /* '请输入英文指标名称' */
		// 		},
		// 		{
		// 			label:this.$t('Edb.Detail.e_en_unit') /* '英文单位' */,
		// 			value:this.tableData[0].UnitEn,
		// 			key:'UnitEn',
		// 			placeholder:this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_unit')})  /* '请输入英文单位' */
		// 		})
		// 	}else{
		// 		this.formItemArray.push({
		// 			label:this.$t('Edb.Detail.e_en_name') /* '英文指标名称' */,
		// 			value:this.tableData[0].EdbNameEn,
		// 			key:'EdbNameEn',
		// 			placeholder:this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_name')}) /* '请输入英文指标名称' */
		// 		})
		// 	}

		// 	this.setEnName = true
		// },
		// updateEnName(item){
		// 	let params={
		// 		EdbInfoId: Number(this.selected_edbid),
		// 		...item
		// 	}
		// 	dataBaseInterface.edbInfoEditEn(params).then(res=>{
		// 		if(res.Ret ==200){
		// 			this.$message({
		// 				message:res.Msg,
		// 				type:"success"
		// 			})

		// 			this.getTreeData()
		// 			this.getDataList()
		// 			if(this.updateType=='chart'){
		// 				// 重绘图表，刷新数据
		// 				this.$refs.createChart.getEdbData()
		// 			}
		// 			this.setEnName = false
		// 		}
		// 	})
		// },
		openLangInfoDia(type='table') {
				this.updateType = type
				this.formItemArray=[
					{
						label:/* '指标名称' */ this.$t('Edb.Detail.e_name'),
						value: this.currentLang==='en'?this.tableData[0].EdbNameEn:this.tableData[0].EdbName,
						key:'EdbName',
						placeholder:this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_name')})  /* '请输入指标名称' */
					},
					{
						label:this.$t('Edb.Detail.e_unit') /* '单位' */,
						value: this.currentLang==='en'?this.tableData[0].UnitEn:this.tableData[0].Unit,
						key:'Unit',
						placeholder:this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_unit')})  /* '请输入单位' */
					}
				]

				this.isLangInfoDia = true
		},

		updateLang(item) {
			let params={
				EdbInfoId: Number(this.selected_edbid),
				...item
			}
			dataBaseInterface.setEdbLangInfo(params).then(res=>{
				if(res.Ret !==200) return

				this.$message.success(res.Msg)

				this.getTreeData()
				this.getDataList()
				if(this.updateType=='chart'){
					// 重绘图表，刷新数据
					this.$refs.createChart.getEdbData()
				}
				this.isLangInfoDia = false
			})
		},

		/* 新增指标 */
		addHandler() {
			this.isAddTarget = true;
		},
		/* 完善指标信息 */
		completeTargetHandle(params) {
			this.add_params = params;
			this.isComplete = true;
		},
		/* 新增指标成功回调 */
		addTargetCallback(params) {
			this.$refs.addTargetDiaBase.init();
			this.isComplete = false;
			this.isAddTarget = false;
			this.getTreeData(params);
			this.changeTreeNode()
			// this.getNewTargetList();
		},
		/* 取消新增回调 */
		cacelCompleteCallback() {
			this.isComplete = false
			this.add_params = {}
		},
		/* 节点变化时 */
		nodeChange(data,node) {
			this.search_txt = '';
			this.select_classifyId = !data.EdbInfoId?data.ClassifyId:0;
			this.select_node = data.UniqueCode;
			this.selected_edbid = data.EdbInfoId;
			this.resetNodeStyle(node);
			this.dynamicNode = node;
			this.showAssociateChart=false
			this.showAssociateComputeData=false
		},
		resetNodeStyle: _.debounce(function(node) {
			const tree = $('.target_tree')[0];
			let width = tree.offsetWidth;
			console.log(width)
			// let label_wid = width > 500 ? 'auto' : (width <= 300 && width < 360) ?  100 : 0.7*width;
			let label_wid =
				width > 500
					? 'auto'
					: width <= 260
					? 80
					: 0.4 * width;
			this.$set(node, 'Nodewidth', label_wid + 'px');
		},200),
		/* 双击label出现input修改框 */
		editNodeLabel(node, data) {
			//目录名称可以双击修改 指标不能
			if(!data.EdbCode && this.role === 'admin'&&this.isEdbBtnShow('editCatalog')) {
				this.$set(data,'isEdit',true)
				this.new_label = this.currentLang==='en' ? data.ClassifyNameEn : data.ClassifyName;
				this.$nextTick(() => {
					this.$refs.editVal.focus();
				});
			}
		},
		/* input失去焦点恢复node 修改最新的值*/
		changeValue(node, data) {
			if(this.new_label) {
				this.$set(data,'isEdit',false)
				dataBaseInterface.nodeEdit({
						ClassifyId: data.ClassifyId,
						ClassifyName: this.new_label
					}).then(res => {
						if(res.Ret === 200) {
							this.getTreeData();
						}
					})
			}else {
				this.$message.warning('名称不能为空')
			}
		},
		/* 添加一级目录 */
		addLevelOneHandle() {
			this.dialog_title = '添加';
			this.dialogForm = {
				level_1: '',
				parent_id: '',
				level: 0
			}
			this.isOpenDialog = true;
		},
		// 递归节点
		getNodeParentData(data,arr){
			if(data.level===0) return
			arr.push({classifyName:this.currentLang==='en'?data.data.ClassifyNameEn:data.data.ClassifyName,classifyId:data.data.ClassifyId})
			this.getNodeParentData(data.parent,arr)
			return arr
		},
		/* 添加节点 */
		addNode(node,data) {
			console.log(node);
			this.dialog_title = '添加';
			let arr=[]
			arr=this.getNodeParentData(node,arr)
			// console.log(arr);
			
				/* 添加目录 */
			this.dialogForm = {
				parentArr:arr,
				parent_id: data.ClassifyId,
				level: node.level,
				levelVal:'',
				isEDB:false
			}
			//存储当前要新增子级的目录code
			sessionStorage.setItem('expandCode', data.UniqueCode);
			this.isOpenDialog = true;
		},
		/* 编辑节点 */
		editNode(node,data) {
			// console.log(node);
			this.dialog_title = '编辑';
			if(data.EdbCode) {
				/* 编辑指标 基础弹窗 */
				
				(data.EdbType===1 || [58,59,67,68,74].includes(data.Source)) && dataBaseInterface.targetDetail({
					EdbInfoId: data.EdbInfoId
				}).then(res => {
					if(res.Ret === 200) {
						// 处理所在目录
						let menuArrId=res.Data.ClassifyList&&res.Data.ClassifyList.map(item=>{
							return item.ClassifyId
						}).reverse()
						this.dialogForm = {
							parentArr:[],
							level: 0,
							levelVal: this.currentLang==='en'?res.Data.EdbNameEn:res.Data.EdbName,
							level_menu:menuArrId||[],
							edbinfo_id: res.Data.EdbInfoId,
							frequency:res.Data.Frequency,
							unit:this.currentLang==='en'?res.Data.UnitEn:res.Data.Unit,
							isEDB:true
						}
						this.isOpenDialog = true;
					}
				});

				/* 编辑计算指标 同比同差转月 */
				(data.EdbType === 2 && ![27,40,58,59].includes(data.Source)) && dataBaseInterface.calculateDetail({
					EdbInfoId: data.EdbInfoId
				}).then(res => {
					if(res.Ret === 200) {
						this.setComputedDialogForm(data.Source,res.Data);
						
						switch (data.Source) {
							case 23: 
							case 24: 
								this.computed_type = 'joint';
								break
							case 72:
							case 73:
								this.computed_type = 'alpha';
								break
							default:
								this.computed_type = data.Source;
								break
						}
						// this.computed_type = [23,24].includes(data.Source) ? 'joint' : data.Source;
						// this.computed_type = [72,73].includes(data.Source)? 'alpha': data.Source;
					}
				})

				/* 代码运算 */
				data.Source === 27 && this.$router.push({
					path: '/codecount',
					query: {
						edbid: data.EdbInfoId
					}
				})

				/* 数据调整 */
				data.Source === 40 && this.$router.push({
					path: '/adjustdata',
					query: {
						edbid: data.EdbInfoId,
					}
				})


			}else {
				let arr=[]
				arr=this.getNodeParentData(node.parent,arr)
				/* 编辑目录 */
				this.dialogForm = {
					isEDB:false,
					parentArr:arr,
					levelVal: this.currentLang==='en'?data.ClassifyNameEn:data.ClassifyName,
					classify_id: data.ClassifyId,
					level: node.level-1
				}
				this.isOpenDialog = true;
			}
		},
		/* 保存成功 */
		sucessCallback(type) {
			this.isOpenDialog = false;
			this.getTreeData();
			type==='update' && this.getDataList();
			if(type === 'add') {
				//新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
				let code = sessionStorage.getItem('expandCode');
				let flag = 	this.defaultShowNodes.some((item) => {
					return item === code
				});
				// console.log(flag)
				!flag &&code&& this.defaultShowNodes.push(code);
				sessionStorage.removeItem('expandCode');
			}
		},
		/* 刷新获取指标最新数据 */
		refreshTargetHandle: _.debounce(function() {
			//如果该指标为暂停刷新，则提示
			if(this.EdbData.NoUpdate){
				this.$message.warning("该指标已暂停刷新")
				return
			}
			if(this.selected_edbid) {
				this.loading = this.$loading({
					lock: true,
					target:'.detail',
					text: this.$t('MsgPrompt.refresh_ing_msg'),
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
				dataBaseInterface.targetRefresh({
					EdbInfoId: this.selected_edbid
				}).then(res => {
					if(res.Ret === 200) {
						this.loading.close();
						this.$message.success(res.Msg);

						this.page_no = 1;
						this.getDataList('refresh')
					}else{
						this.loading.close();
					}
				})
			}
		},500), 
		/* 删除节点校验 */
		removeNode(node,data) {
			dataBaseInterface.nodeDelCheck({
				ClassifyId: data.ClassifyId,
				EdbInfoId: data.EdbInfoId
			}).then(res => {
				if(res.Ret === 200) {
					/**
					 * 0 可删除
					 * 1 关联指标
					 * 2 有子目录无指标
					*/
					const deleteLabelMap = {
						1: /* '该目录关联指标不可删除' */this.$t('Edb.MsgPrompt.del_not_relate_edb'),
						2: /* '确认删除当前目录及包含的子目录吗？' */this.$t('Edb.MsgPrompt.del_confirm_menu_or_children'),
						3: /* '当前指标已用作画图，不可删除' */this.$t('Edb.MsgPrompt.del_edb_use_chart'),
						4: res.Data.TipsMsg
					}

					if([1,3,4].includes(res.Data.DeleteStatus)) this.$confirm(
							deleteLabelMap[res.Data.DeleteStatus],
							/* '删除失败' */this.$t('Edb.MsgPrompt.del_failed'),
							{
							confirmButtonText:/*  '知道了' */this.$t('Dialog.known'),
							showCancelButton:false,
							type: 'error'
						})
					else if([0,2].includes(res.Data.DeleteStatus)) this.$confirm(
							res.Data.DeleteStatus === 2 
							? deleteLabelMap[res.Data.DeleteStatus]
							: data.EdbCode? this.$t('Edb.MsgPrompt.del_edb_confirm')/* '删除后指标和指标值均不可使用，确认删除吗？' */:/* '确定删除当前目录吗?' */this.$t('Edb.MsgPrompt.del_menu_confirm'), 
							/* '提示' */this.$t('Dialog.warn_tit'),
							{
							confirmButtonText: /* '确定' */this.$t('Dialog.confirm_btn'),
							cancelButtonText: /* '取消' */this.$t('Dialog.cancel_btn'),
							type: 'warning'
						}).then(() => {
							this.delHandle(data.ClassifyId,data.EdbInfoId);
						}).catch(() => {         
						});
				}
			})

		},
		/* 删除方法 */
		delHandle(ClassifyId,EdbInfoId) {
			dataBaseInterface.nodeDelete({
				ClassifyId,
				EdbInfoId
			}).then(res => {
				if(res.Ret === 200) {
					this.$message.success(this.$t('MsgPrompt.delete_msg'));
					this.getTreeData();
					this.selected_edbid = 0;
					this.deleteLabel({code:this.select_node,id:EdbInfoId,classifyId:ClassifyId})
					// this.getNewTargetList();
				}
			})
		},
		/* 判断节点是否能被拖拽 */
		canDragHandle({data}) {
      		return data.Button.MoveButton;
		},
		/* 判断节点是否能被拖入 */
		canDropHandle(draggingNode, dropNode, type) {
			let canDrop=false
			
			// 如果拖动的是指标
			if(draggingNode.data.EdbCode){
				if(!(dropNode.level===1&&type!=='inner')){
					canDrop=true
				}
			}else{//拖动的是目录
				// console.log(dropNode.level,draggingNode.level);
				//目录层级不能改变
				if((dropNode.level+1==draggingNode.level&&type==='inner'&&!dropNode.data.EdbCode)||(dropNode.level===draggingNode.level&&type!=='inner')){
					canDrop=true
				}
			}
			return canDrop
		},
		/* 拖拽完成 */
		dropOverHandle(b,a,i,e) {
			// 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
			console.log(b,a,i);
			const isEDB=b.data.EdbCode?true:false
			let list=a.parent.childNodes;
			let targetIndex=0,PrevClassifyId=0,NextClassifyId=0,ParentClassifyId=0;
			let ClassifyId=0,EdbInfoId=0,PrevEdbInfoId=0,NextEdbInfoId=0;

			ClassifyId=isEDB?0:b.data.ClassifyId
			EdbInfoId=isEDB?b.data.EdbInfoId:0
			

			if(i!=='inner'){
				ParentClassifyId=a.parent.data.ClassifyId||0
				list.forEach((item,index)=>{
					if(isEDB){
						if(item.data.EdbInfoId===b.data.EdbInfoId){
							targetIndex=index
						}
					}else{
						if(item.data.ClassifyId===b.data.ClassifyId){
							targetIndex=index
						}
					}
					
				})

				console.log(targetIndex);
				
				
				if(targetIndex===0){
					const data=list[targetIndex+1].data
					NextClassifyId=data.EdbCode?0:data.ClassifyId
					NextEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else if(targetIndex===list.length-1){
					const data=list[targetIndex-1].data
					PrevClassifyId=data.EdbCode?0:data.ClassifyId
					PrevEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else{
					const pData=list[targetIndex-1].data
					PrevClassifyId=pData.EdbCode?0:pData.ClassifyId

					PrevEdbInfoId=pData.EdbCode?pData.EdbInfoId:0

					const nData=list[targetIndex+1].data
					NextClassifyId=nData.EdbCode?0:nData.ClassifyId
					NextEdbInfoId=nData.EdbCode?nData.EdbInfoId:0
				}
			}else{
				ParentClassifyId=a.data.ClassifyId||0
			}

			const params={
				ClassifyId,
				ParentClassifyId,
				EdbInfoId,
				PrevClassifyId,
				NextClassifyId,
				PrevEdbInfoId,
				NextEdbInfoId
			}
			console.log(params);
			dataBaseInterface.classifyMoveSort(params).then(res=>{
				if(res.Ret===200){
					// this.$message.success('移动成功!')
					this.$message.success(this.$t('MsgPrompt.move_sort_success'))
				}
				this.getTreeData()
				if(this.selected_edbid){
					this.getDataList();
				}
				
			})
		},

		/* 拖拽覆盖添加背景色 */
		dropMouseOver(node1,node2,e) {
			// console.log(e.layerY);
			
			// 被拖拽节点对应的 Node、所进入节点对应的 Node、event
			if(!node2.data.EdbInfoId&&(node1.level>node2.level||(node1.data.EdbInfoId>0&&!node2.data.EdbInfoId)) && (e.target.childNodes[0].className.includes('el-tree-node__content') 
			|| e.target.className.includes('el-tree-node__content'))) {
				// console.log(e.target.childNodes[0])
				e.target.childNodes[0].className.includes('el-tree-node__content') 
				? e.target.childNodes[0].style.backgroundColor = '#409eff' 
				: e.target.style.backgroundColor = '#409eff';
			}
			
		},
		/* 拖拽离开/拖拽完成重置背景色 */
		dropMouseLeave(node1,node2,e) {
			let arrs = $('.el-tree-node__content');
			for( let a of arrs ) {
				a.style.backgroundColor = 'transparent';
			}
		},
		// 树节点展开
		handleNodeExpand (data) {
			// 保存当前展开的节点
			let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);
			if (!flag) { // 不存在则存到数组里
				this.defaultShowNodes.push(data.UniqueCode)
			}
		},
		// 树节点关闭
		handleNodeCollapse (data) {
			this.defaultShowNodes.some((item, index) => {
				if (item === data.UniqueCode) {
					// 删除关闭节点
					this.defaultShowNodes.length = index
				}
			})
		},
		/* 根据unicode展开树结构并选中指标 */
		selectCurrentNode({ code, id,classifyId }) {
			console.log(code, id,classifyId);
			this.select_node = code;
			this.selected_edbid = id;

			//this.defaultShowNodes=this.findParentNodeForClassifyId(classifyId,code)
			const containerDom = document.getElementById('detail-container')
			containerDom&&(containerDom.scrollTop = 0)
			
			 //滚动到高亮节点位置
			/* this.$nextTick(()=>{
				setTimeout(() => {
					let node = document.getElementById(`node${this.select_node}`)||{}
					let parent = document.getElementsByClassName('tree-cont')[0];
					//console.log('滚动',node,parent);
					if(node.offsetTop > parent.offsetHeight) {
						parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
					}
				},400)
			}) */
		},
		// 查找树节点所有父节点
		findParentNodeHandle(arr, id) {
			// 遍历取父级code push数组
			for (let i of arr) {
				if (i.ClassifyId === id) {
					return [i.UniqueCode];
				}
				if (i.Children) {
					let node = this.findParentNodeHandle(i.Children, id);
					if (node) {
						return node.concat(i.UniqueCode);
					}
				}
			}
		},
		// 通过分类id找到指标所属的分类
		findParentNodeForClassifyId(id,code){
			let arr=[]
			this.treeData.forEach(item=>{
				if(item.Children){
					item.Children.forEach(_item=>{
						if(_item.ClassifyId==id){
							arr=[item.UniqueCode,_item.UniqueCode]
						}
					})
				}
			})
			return [...arr,code]
		},
		/* 添加计算指标 */
		addComputedHandler() {
			this.computedTit = '计算指标';
			this.calulateList = [];
			this.calulateForm = {};
			this.operationForm = {};
			this.computed_type=0
			this.isOpenComputed = true;
		},
		/* 新增计算指标回调 */
		addComputedCallBack(type, params) {
			this.computed_type = 0;
			this.computed_source = 1;
			this.showAssociateChart=false
			this.showAssociateComputeData=false
			this.showBatchComputedPop=false
			this.isOpenComputed = false
			console.log(type, params);
			// this.getTreeData();
			type === 'add' ? this.getTreeData(params) : this.getTreeData();
			type === 'edit' && this.initGetData()
		},

		initGetData() {
			this.page_no = 1;
			if(this.$refs.edb_detail_data){
				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
			}
			this.getDataList();
		},

		/* 选择计算类型 */
		changeComputedType(type) {
			//保证source的对应关系
			let typeMapSource = {
				'toMonthSeason': 5,
				'accumulate': 62
			}
			this.computed_type = typeMapSource[type] || type;
			this.isOpenComputed = false;
		},
		/* 重新计算 */
		reCalculateHandler() {
			this.calculateLoading = true;
			dataBaseInterface.reCalculateTarget({
				EdbInfoId: Number(this.selected_edbid)
			}).then(res => {
				this.calculateLoading = false;
				if(res.Ret !== 200) return;
				this.$message.success(res.Msg);
				this.initDataStatus();
			}).catch(() => {
				this.calculateLoading = false;
			})
		},

		/* 查看计算公式 打开弹窗 */
		viewNode(node,data) {
			const { EdbInfoId,Source } = data;

			//代码运算指标
			if( Source === 27 ) return this.$router.push({
				path: '/codecount',
				query: {
					edbid: EdbInfoId,
					isView: true
				}
			})

			dataBaseInterface.calculateDetail({
				EdbInfoId,
			}).then(res => {
				if(res.Ret !== 200) return
				this.setComputedDialogForm(Source,res.Data,true);
				switch (data.Source) {
					case 23: 
					case 24: 
						this.computed_type = 'joint';
						break
					case 72:
					case 73:
						this.computed_type = 'alpha';
						break
					default:
						this.computed_type = data.Source;
						break
				}
			})
		},

		/* 设置回显计算指标的表单 */
		setComputedDialogForm(type,res,view=false) {
			//指标运算 or 其他计算类型指标

			// 处理所在目录
			let menuArrId=res.EdbInfoDetail.ClassifyList&&res.EdbInfoDetail.ClassifyList.map(item=>{
				return item.ClassifyId
			}).reverse()

			if( type === 4 ) {
				/* 回显指标和表单 */
				const list = res.CalculateList;
				this.computedTit = view ? '查看计算指标' : '编辑计算指标';
				/* 依赖的指标列表 */
				this.calulateList = list.map(item => {
					return {
						tag: item.FromTag,
						edb_name: item.FromEdbName,
						target: item.FromEdbInfoId,
						start_date: item.StartDate,
						end_date: item.EndDate
					}
				})
				const { EdbInfoId,CalculateFormula,EdbName,EdbNameEn,Unit,UnitEn,Frequency,EmptyType,MaxEmptyType,Extra } = res.EdbInfoDetail;
				/* 公式和表单 */
				this.calulateForm =  {
					edb_id: EdbInfoId,
					formula: CalculateFormula,
					menu: menuArrId||[],
					targetName: this.currentLang==='en'?EdbNameEn:EdbName,
					unit: this.currentLang==='en'?UnitEn:Unit,
					frequency: Frequency,
					emptyType: EmptyType,
					maxEmptyType: MaxEmptyType,
					Extra,
					view
				};
			} else  {
				// 多指标求和求平均
				if([81,82].includes(type)){
					this.operationForm={...res,view}
					this.showBatchComputedPop=true
					return
				}


				let dataInfo = res.EdbInfoDetail;
				let old_edb = res.CalculateList;

				let public_params = {
					edb_id: dataInfo.EdbInfoId,
					targetName: this.currentLang==='en'?dataInfo.EdbNameEn:dataInfo.EdbName,
					frequency: dataInfo.Frequency,
					unit: this.currentLang==='en'?dataInfo.UnitEn:dataInfo.Unit,
					menu: menuArrId||[],
					Extra:dataInfo.Extra,
					view
				}

				this.operationForm = [23,24,37,53].includes(type)
					? {
							...public_params,
							source: dataInfo.Source,
							date: dataInfo.CalculateFormula,
							pre_edb: type === 23 ? old_edb.find(item => item.FromTag === 'A').FromEdbInfoId : '', //俺也不懂为什么这么定义都是江西老表的锅
							after_edb: type === 23 ? old_edb.find(item => item.FromTag === 'B').FromEdbInfoId : '',
							old_stay_edb: type === 24 ? old_edb.find(item => item.FromTag === 'A').FromEdbInfoId : '',
							concat_edb: type === 24 ? old_edb.find(item => item.FromTag === 'B').FromEdbInfoId : '',
							from_arr: old_edb,
							correlationStr: dataInfo.CorrelationStr
						} 
					: {
							...public_params,
							oldedb_id: old_edb[0].FromEdbInfoId,
							oldEdb_name: old_edb[0].FromEdbName,
							formula: dataInfo.CalculateFormula || '',
							moveType: dataInfo.MoveType,
							moveUnit: dataInfo.MoveFrequency,
							moveVal: type === 22 ? dataInfo.CalculateFormula : '',
							calendar_type: type === 35 ? dataInfo.Calendar : '',
					}

				if([72,73].includes(type)){
					const {EdbName,EdbNameEn,EdbInfoId,Frequency,Unit,UnitEn,ClassifyId,CalculateFormula} = dataInfo
					this.operationForm = {
						edb_id: EdbInfoId,
						oldedb_id: old_edb[0].FromEdbInfoId,
						oldEdb_name: old_edb[0].FromEdbName,
						EdbName: this.currentLang==='en'?EdbNameEn:EdbName,
						Frequency,
						Unit:this.currentLang==='en'?UnitEn:Unit,
						ClassifyId,
						Formula:CalculateFormula,
						view
					}
				}
				
			}
		},

		/* 基础指标刷新 */
		refreshBaseHandler() {
			if(this.EdbData.NoUpdate){
				this.$message.warning("该指标已暂停刷新")
				return 
			}
			this.refreshLoading = true;
			this.loading = this.$loading({
					lock: true,
					target:'.detail',
					text: this.$t('MsgPrompt.refresh_ing_msg'),
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
			dataBaseInterface.refreshBaseTarget({
				EdbInfoId: Number(this.selected_edbid)
			}).then(res => {
				this.refreshLoading = false;
				this.loading&&this.loading.close()
				if(res.Ret !== 200) return;
				this.$message.success(res.Msg);
				this.initDataStatus();
			}).catch(() => {
				this.refreshLoading = false;
			})
		},

		/* 	一键成图 */
		createChartHandle() {
			this.isCreateChart = true;
		},
		
		/* 重新刷新 重新计算后重置刷数据 */
		initDataStatus() {
			this.page_no = 1;
			if(this.$refs.edb_detail_data){
				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
			}
			this.getDataList();
		},
		/* 用于复制指标 */
		async copyCode(){
			const res = await dataBaseInterface.targetList({
				PageSize: 100000,
				CurrentIndex: 1,
				EdbInfoId: this.selected_edbid,
			})
			if (res.Ret===200){
				let arr = res.Data.Item.DataList ||[]
				let str = '日期\t 值\n'
				arr.forEach((item=> str += `${item.DataTime}\t${item.Value}\n`))
				this.$copyText(str).then(
		        res => {
		          // this.$message.success("已成功复制!");
		          this.$message.success(this.$t('MsgPrompt.copy_success_msg'));
		        },
		        err => {
		         this.$message.error(/* "复制失败!" */this.$t('MsgPrompt.copy_fail_msg'));
		        } )
		 	}
		},

		/* 一键更新 */
		updateHandler() {
			this.isUpdate = true;
		},

		/* 替换指标 */
		async replaceEdbHandler () {

			const { Data } = await dataBaseInterface.replaceCheck();
      Data === 2 
      ? this.isReplaceDia = true
      : await this.$confirm(this.$t('EtaBasePage.replace_ing_msg'), this.$t('Dialog.warn_tit'), {
          type: 'warning',
          showCancelButton: false,
        })
		},

		/* 添加最新值 */
		updateNewestDataHandle() {
			this.isUpdateNewestData = true;
		},
		updateNewest(){
				this.initGetData()
				this.rePainChart()
		},
		/* 获取标签列表 */
		getlabelList(){
			const List = JSON.parse(sessionStorage.getItem('database'))||[]
			this.labelList = List
		},
		/* 添加标签  params :{code,id,classifyId,EdbName,EdbNameEn}*/
		addLabel(params){
			const index = this.labelList.findIndex(i=>i.code===params.code)
			//标签已存在列表中,更新标签的值
			if(index!==-1){
				this.labelList.splice(index,1,params)
				return
			}
			//根据页面宽度 判断标签数量是否达到上限
			const listWidth = document.querySelector('.database-label').offsetWidth
			const minWidth=170+20
			const maxNum = Math.floor(listWidth/minWidth)
			if(this.labelList.length>=maxNum){
				//达到上限则挤出第一个,再添加
				this.labelList.shift()
			}
			this.labelList.push(params)
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		},
		//改变选中标签,
		changeCurrentLabel(params){
			if(params.code!==this.select_node){
				this.selectCurrentNode(params)
			}
		},
		//删除标签
		deleteLabel(params){
			const index = this.labelList.findIndex(i=>i.code===params.code)
			//如果删除的标签是选中状态
			if(this.select_node===params.code){
				//删除的是唯一一个标签
				if(this.labelList.length===1){
					this.selected_edbid=0
					this.select_node = ''
					this.$refs.menuTree.setCurrentKey(null)
				//不是唯一的标签,则默认选中上一个/下一个
				}else{
					index===0&&this.changeCurrentLabel(this.labelList[1])
					index!==0&&index!==-1&&this.changeCurrentLabel(this.labelList[index-1])
				}
			}
			index!==-1&&this.labelList.splice(index,1)
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		},
		changeTreeNode(){
			this.$refs.menuTree.setCurrentKey(this.select_node);
			this.$nextTick(()=>{
				const _node = this.$refs.menuTree.getCurrentNode()
				this.dynamicNode = _node;
				this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
			})
		},
		//只看我的
		onlyMeHandler(){
			this.getTreeData()

			this.CurrentIndex = 1;
			this.$refs.listRef.scrollTop = 0;
			this.getEdbChartList();
		},
		//绑定el-tree的load属性
		async getLazyTreeData (node,resolve){
			if(node.level===0){
				resolve(this.treeData)
			}else{
				let arr=[]
				const res=await dataBaseInterface.targetCatalog({ParentId:node.data.ClassifyId,IsOnlyMe:this.IsOnlyMe})
				if (res.Ret === 200) {
					const temarr = res.Data.AllNodes || [];
					arr=temarr.map(item=>{
						return {
							...item,
							isLeaf:item.EdbInfoId?true:false
						}
					})
				}
				resolve(arr)
			}
		},
		//保存指标上下限
		saveEdbLimit(){
			if(!this.$refs.createChart) return
			//获取指标的上下限
			const {MaxValue=0,MinValue=0} = this.$refs.createChart.chartInfo
			dataBaseInterface.saveEdbChartLimit({
				EdbInfoId:this.EdbData.EdbInfoId,
				MaxValue:Number(MaxValue),
				MinValue:Number(MinValue)
			}).then(res=>{
				if(res.Ret!==200) return 
				// this.$message.success('保存成功')
				this.$message.success(this.$t('MsgPrompt.saved_msg'))

				this.$refs.createChart.saveEdbImg(this.EdbData)
				this.$refs.createChart.oldOptions = {}
			})
		},
		//重绘指标图表
		rePainChart(){
			if(this.activeTab!=='Chart') return
			this.$nextTick(()=>{
				this.$refs.createChart.getDataByPath()
			})
		},
		/* 展开对应菜单 显示详情 */
		detailShowHandle({ UniqueCode, EdbInfoId,ClassifyId}) {
			let params = {
				code: UniqueCode,
				id: EdbInfoId,
				classifyId:ClassifyId
			};
			this.selectCurrentNode(params);
			this.select_classifyId = 0;
		},
		// 添加wind wsd指标成功
		addTargetSuccess(params){
			this.getTreeData(params);
		},

		handleCloseBatchPopSelf(){
			this.showBatchComputedPop=false
			this.$nextTick(()=>{//重新打开计算指标选择类型弹窗
				this.isOpenComputed=true
			})
		}
	},
	//离开页面时保存标签
	beforeRouteLeave(to,from,next){
		sessionStorage.setItem('database',JSON.stringify(this.labelList))
		next()
	},
	mounted() {
		this.getlabelList()
		this.getEdbChartList()
		this.$route.query.code 
		? this.getTreeData({code: this.$route.query.code,id: this.$route.query.id,classifyId:this.$route.query.classifyId})
		: this.getTreeData();

		//离开页面时保存标签
		window.onbeforeunload = ()=>{
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		}
	},
	destroyed(){
		window.onbeforeunload = null
	}
};
</script>
<style lang="scss">
@import "~@/styles/theme-vars.scss";
.database_container {
	$mini_font: 12px;
	$normal_font: 14px;
	.firstColumTable .el-table__empty-block {
		display: none;
	}
	.firstColumTable .el-table__header th:first-child .cell{
		overflow: visible;
	}
	.el-table td,.el-table th {
		padding: 10px 0;
	}

	.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
		background-color: $theme-color !important;
		border-color: $theme-color;
	}
	.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
		background-color: $theme-color !important;
		border-color: $theme-color;
	}
	.el-icon-refresh {
		font-size: 17px;
		margin-left: 5px;
		cursor: pointer;
	}
	@media screen and (min-width: 1711px) {
		.target_tree { 
			font-size: $normal_font; 
		}
	}
	@media screen and (max-width: 1710px) {
		.target_tree { 
			font-size: $mini_font; 
		}
	}

	.database_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 20px 30px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.top-right,.top-left{
			display: flex;
			align-items: center;
			gap:20px;
			flex-wrap: wrap;
			.el-button + .el-button{
				margin-left: 0;
			}
		}
		/* .top-left{
			display: flex;
			
		} */
	}
	.database_main {
		display: flex;
		margin-top: 20px;
		position:relative;
		width:100%;
		overflow-x: auto;
		/* div::-webkit-scrollbar {
			width: 5px !important;
		} */
		.main-left {
			width: 400px;
			min-width: 300px;
			background: #fff;
			margin-right: 20px;
			border: 1px solid #ececec;
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			height: calc(100vh - 225px);
			overflow: hidden;
			position: relative;
			box-sizing: border-box;
			.tree-cont {
				padding: 30px;
				/* height: calc(100vh - 290px);
				overflow: auto; */
			}
			.target_tree {
				color: #333;
				height: calc(100vh - 400px); 
				overflow: auto;
				.label-input .el-input__inner {
					height: 25px;
					line-height: 25px;
				}
				.custom-tree-node {
					display: flex !important;
					justify-content: space-between;
					align-items: center;
					display: block;
					flex: 1;
					.node_label {
						margin-right: 2px;
					}
					.el-icon-view {
						color: #409eff;
						font-size: 18px;
						margin-left: 5px;
					}
				}
				.el-tree__drop-indicator{
					/* position:absolute; */
					/* left:0;
					right:0; */
					height:3px;
					// margin-top: 8px;
					background-color:$theme-color;
				}
				.el-tree-node__content {
					margin-bottom: 14px !important;
				}
				.el-tree-node__children {
					.el-tree-node {
						/* margin-bottom: 8px !important; */
						margin-bottom: 0px !important;
						padding-left: 18px;
					}
					.el-tree-node__content {
						margin-bottom: 5px !important;
						padding-left: 0 !important;
					}
				}
				.expanded.el-icon-caret-right:before {
					content: url('../../assets/img/set_m/down.png') !important;
				}
				.el-icon-caret-right:before {
					content: url('../../assets/img/set_m/slide.png') !important;
				}
				.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
					content: '' !important;
				}
				.el-tree-node__expand-icon.expanded {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				.el-tree-node.is-current > .el-tree-node__content {
					background-color: #f0f4ff !important;
				}
				.el-tree-node__content {
					padding-right: 10px !important;
				}
			}
			.noDepart {
				margin: 30px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $theme-color;
				font-size: 16px;
				cursor: pointer;
			}
			.move-btn {
				height: 100%;
				width: 4px;
				/* opacity: 0; */
				position: absolute;
				right: 0px;
				top: 0;
				&:hover {
				cursor: col-resize;
					/* background-color: orange */
				}
			}
		}
		.main-right {
			flex: 1;
			/* width:70%; */
			height: calc(100vh - 225px);
			background: #fff;
			border: 1px solid #ececec;
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			overflow: hidden;
			.value-ul {
				margin-top: 10px;
				border-bottom: 1px solid #EBEFF6;
				//max-height: calc(100vh - 495px);
				//overflow-y: auto;
				.value-item {
					/* width: 100%; */
					padding: 10px 0;
					border: 1px solid #dcdfe6;
					border-bottom: none;
					display: flex;
					justify-content: space-around;
					>span{
						padding:0 16px;
						box-sizing: border-box;
					}
					.value-label {
						position: relative;
						color: #666;
						.value-style{
							/* background-color: #ECF2FE;
							color: #0052D9; */
							padding:5px;
							border-radius: 4px;
							&.predict-act {
								color: orange;
							}
						}
						&.date{
							&::after{
								content: '';
								position:absolute;
								right:0;
								top:-14px;
								height:calc(100% + 28px);
								width:1px;
								background-color: #dcdfe6;
							}
						}
					}
					.predict-act {
						color: orange;
					}
					.new-tag {
						width: 6px;
						height: 6px;
						display: inline-block;
						position: absolute;
						left: -12px;
						top: 50%;
						transform: translateY(-50%);
						border-radius: 50%;
						background: #f00;
					}
				}
				.nodata {
					text-align: center;
					padding: 40px 0;
					color: #999;
				}
			}
			&.list{
				background-color: transparent;
				box-shadow: none;
				border:none;
				padding-left:30px;
				display: flex;
				flex-direction: column;
				.list-wrap{
					flex: 1;
					margin-top: 20px;
					overflow-y: auto;
					.dragShdow {
						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
						opacity: 0.5;
					}
					.list-item{
						width:23%;
						min-width: 210px;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						border-radius: 4px;
						border:1px solid #DCDFE6;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
						position: relative;
						.header{
							padding:10px;
							box-sizing: border-box;
							text-align: left;
						}
						.info{
							padding:10px;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.enable-toggle-btn{
								cursor: pointer;
								color: #0052D9;
								font-size: 14px;
							}
						}
						.header{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 16px;
							font-weight: 600;
							box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
						}
						.image{
							margin:10px;
							margin-bottom: 0;
							height: 0;
							padding-bottom: 67%;
							cursor: pointer;
						}
						.stop-mark{
							height: 48px;
							width: 48px;
							position: absolute;
							right: -1px;
							top: 0;
							pointer-events: none;
						}
					}
				}
			}
			&.detail-wrap{
				overflow-x:auto;
			}
			.detail{
				display: flex;
				flex-direction: column;
				min-width: 780px;
				height:100%;
				>.header{
					display: flex;
					position: relative;
					height: 60px;
					.el-tabs{
						width:210px;
						.el-tabs__header{
							margin-bottom: 0;
						}
						.el-tabs__nav{
							display: flex;
							width: 100%;
							.el-tabs__item{
								flex: 1;
								text-align: center;
								font-size: 16px;
								height: 60px;
								line-height: 60px;
							}
						}
					}
					.edb-tool{
						flex: 1;
						text-align: right;
						display: flex;
						gap: 16px;
						justify-content: flex-end;
						padding-right: 15px;
						position: relative;
						&::after{
							position: absolute;
							content:'';
							width:100%;
							left: 0;
							bottom: 0;
							height:2px;
							background-color: #E4E7ED;
						}
					}
				}
				.container{
					flex: 1;
					overflow-y: auto;
					padding:15px;
					.chart{
						.info{
							display: flex;
							justify-content: space-between;
						}
						.table{
							margin-top: 16px;
							border:1px solid #E7E7E7 ;
							.table-header{
								display: flex;
								padding:6px;
								span{
									flex: 1;
									border-bottom: 1px solid #E7E7E7;
								}
							}
						}
					}
					.list{
						height: 100%;
					}
				}
			}

		}
		.slide-btn-icon{
			&.slide-left{
				right:0;
			}
			&.slide-right{
				left: 0;
			}
		}
	}
	.dialog-computed {
		.el-dialog__header {
			background-color: #fff;
			.el-dialog__close {
				color: #333;
			}
		}
		.computed-ul {
			box-sizing: border-box;
			max-height: 600px;
			height:65vh;
			overflow-y: auto;
			padding: 40px 92px;
			display: flex;
			flex-wrap: wrap;
			.cpmputed-li {
				width: 180px;
				padding: 19px 0;
				height: 60px;
				box-sizing: border-box;
				color: $theme-color;
				font-size: 16px;
				background:#ECF5FF;
				border-radius: 8px;
				border: 1px solid #99baf0;
				text-align: center;
				cursor: pointer;
				margin-right: 65px;
				margin-bottom: 55px;
				&:nth-child(3n) {
					margin-right:0;
				}
				&:hover {
					background: $theme-color;
					color: #fff;
				}
				&.act {
					background: $theme-color;
					color: #fff;
				}
			}
		}
	}
}
.edb-tool-popover{
	.edb-tool-wrap{
		display: flex;
		flex-wrap: wrap;
		gap:10px;
		.el-button + .el-button{
			margin-left: 0;
		}
	}
}
</style>