eta_front/src/views/predictEdb_manage/predictEdb.vue

<template>
	<div class="predictEdb-container" >
		<span
			class="slide-icon slide-right"
			@click="isSlideLeft = !isSlideLeft"
			v-show="isSlideLeft"
		>
			<i class="el-icon-d-arrow-right"></i>
		</span>
		<div class="predict-edb-main" id="box">
      <div class="main-left left" id="left" v-show="!isSlideLeft">
				<div class="datasheet_top">
						<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_addEdb"
							type="primary" @click="addEdbHandle"><!-- 添加指标 -->{{$t('EtaBasePage.add_edb_btn')}}</el-button>
						<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_calcuEdb"
							type="primary" @click="addComputedHandler" style="margin-left:0;"><!-- 计算指标 -->{{$t('EtaBasePage.calculation_edb_btn')}}</el-button>
						<!-- <change-lang 
							v-permission="permissionBtn.predictEdbPermission.edbPreData_switchEn"
							:lang="currentLang" 
							style="height: 32px;" 
							@changeLang="changeLangHandle"
						/> -->
				</div>
				<div class="search-cont" v-loading="searchLoading">
					<el-select
						v-model="search_txt"
						ref="searchRef"
						:filterable="!search_txt"
						remote
						clearable
						:placeholder="$t('Edb.InputHolderAll.input_name')"
						style="width: 100%"
						:remote-method="searchHandle"
						@focus="searchHandle('')"
					>
						<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"
								/>
								<span>{{ currentLang==='en' ? (item.EdbNameEn||item.EdbName) : item.EdbName }}</span>
							</div>
						</el-option>
					</el-select>
				</div>
        <div style="margin:20px 0;padding:0 20px;display:flex;justify-content:space-between">
					<span><!-- 目录 -->{{$t('Common.category')}}</span>
					<el-checkbox v-model="isOnlyMe" v-permission="permissionBtn.predictEdbPermission.edbPreData_isOnlyMine"
						@change="onlyMeHandler"><!-- 只看我的 -->{{$t('PredictEdbPage.only_see_mine')}}</el-checkbox>
				</div>
				<div class="tree-cont">
					<div class="target_tree">
					<el-tree
						ref="treeRef"
						:data="treeData"
						node-key="UniqueCode"
						:props="defaultProp"
						:allow-drag="canDragHandle"
						:allow-drop="canDropHandle"
						:current-node-key="select_node"
						:default-expanded-keys="defaultShowNodes"
						:draggable="isEdbBtnShow('edbPreData_classifyOpt_move')"
						:expand-on-click-node="false"
						check-strictly
						:empty-text="$t('Common.no_classify_msg')"
						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"
								@blur="changeValue(data)"
							/>
							<span
								@dblclick.stop="editNodeLabel(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"
								/> -->
								<!-- 添加子项 -->
								<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&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')&&node.level<6"
								/>
								<!-- 编辑目录 -->
								<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.Button.OpButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')"
								/>
								<!-- 删除目录 -->
								<img
									slot="reference"
									src="~@/assets/img/set_m/del.png"
									alt=""
									style="width: 14px; height: 14px"
									@click.stop="removeNode(node, data)"
									v-if="data.Button.DeleteButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_delete')"
								/>
								<!-- 查看预测规则 -->
								<!-- <i class="el-icon-view" v-if="data.EdbInfoId&&isEdbBtnShow('edbPreData_checkPreRule')" @click.stop="viewNode(node,data)"></i> -->
								<!-- 查看关联图表 -->
								<!-- <img 
									v-if="data.Button.ShowChartRelation&&isEdbBtnShow('edbPreData_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('edbPreData_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="opLevelOneClassify&&isEdbBtnShow('edbPreData_classifyOpt_add')"
					>
						<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 class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
					<i class="el-icon-d-arrow-left"></i>
				</span>
      </div>

			<div class="main-right" id="right" :style="isSlideLeft ? 'width:100%' : 'width:80%'"
				:class="{'detail-main':select_id&&!showAssociateChart&&!showAssociateComputeData}"
			>

				<!-- 详情 -->
				<div class="edb-detail-wrapper main-min-width" v-if="select_id&&!showAssociateChart&&!showAssociateComputeData">

					<div class="detail-header" v-if="predictEdbInfo.HaveOperaAuth">
						<el-tabs v-model="activeTab" @tab-click="changeShowType">
							<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-permission="permissionBtn.predictEdbPermission.edbPreData_update"
								type="text" 
								@click="updateEdbPartHandle"
							><!-- 刷新 -->{{$t('Edb.detail_refresh_btn')}}</el-button>
							<el-button 
								type="text" 
								@click="editEdbHandle('')" 
								v-if="edbButton.OpButton&&isEdbBtnShow('edbPreData_edit')"
							><!-- 编辑 -->{{$t('Edb.detail_edit_btn')}}</el-button>
							<el-button 
								type="text" 
								@click="saveEdbHandle" 
								v-if="detail_show_chart&&isEdbBtnShow('edbPreData_save')"
							><!-- 保存 -->{{$t('Edb.detail_save_btn')}}</el-button>
							<el-button 
								v-permission="permissionBtn.predictEdbPermission.edbPreData_edbSource"
								type="text" 
								@click="toHistoryPage(select_id,$route.matched);lookEdbId=select_id"
							><!-- 指标溯源 -->{{$t('Edb.detail_trace_btn')}}</el-button>

							<el-popover 
								v-if="showPopover"
								placement="bottom-end" 
								trigger="hover"
								popper-class="edb-tool-popover"
								width="300" style="display: inline-block;"
							>
								<div class="edb-tool-wrap">
									<el-button 
										v-permission="permissionBtn.predictEdbPermission.edbPreData_enNameSetting"
										type="text" 
										@click="clickEdbNameHandle"
									>
										{{$t('Edb.detail_en_btn')}}<!-- 编辑信息 -->
									</el-button>
									<el-button 
										v-permission="permissionBtn.predictEdbPermission.edbPreData_recalcu"
										type="text" 
										@click="updateEdbHandle"
									>{{$t('Edb.detail_recalculate_btn')}}<!-- 重新计算 --></el-button>
									<el-button 
										v-if="isEdbBtnShow('edbPreData_checkPreRule')"
										type="text" 
										@click.stop="viewNode"
									>{{$t('Edb.detail_formula_btn')}}<!-- 查看公式 --></el-button>
									<el-button 
										v-if="edbButton.ShowChartRelation&&isEdbBtnShow('edbPreData_checkRelatedChart')"
										type="text" 
										@click="showAssociateChart=true,showAssociateComputeData=false" 
									>{{$t('Edb.detail_related_charts_btn')}}<!-- 关联图 --></el-button>
									<el-button 
										v-if="edbButton.ShowEdbRelation&&isEdbBtnShow('edbPreData_checkRelatedEdb')"
										type="text"
										@click="showAssociateComputeData=true,showAssociateChart=false"
									>{{$t('Edb.detail_related_metrics_btn')}}<!-- 关联指标 --></el-button>
									<el-button 
										class="deletesty" 
										@click="delEdbHandle" 
										type="text"
										v-if="edbButton.DeleteButton&&isEdbBtnShow('edbPreData_del')"
									>{{$t('Edb.detail_del_btn')}}<!-- 删除 --></el-button>
									<el-button 
										v-permission="permissionBtn.predictEdbPermission.edbPreData_copyData"
										type="text" 
										@click="copyData"
									>{{$t('Edb.detail_copydata_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="detail-wrap">
						
						<component 
							:is="detail_show_chart?'edbDetail':'childData'"
							:id="select_id"
							:lang="currentLang" 
							:isAllowEditLimit="isEdbBtnShow('edbPreData_editLimit')"
							ref="detailComponentRef"
							
							@updateTit="setNameBack"
							@setCurrentClassify="setCurrentClassify"
							@setOpera="({button,detail}) => { edbButton = button;predictEdbInfo=detail }"
							@openLangInfoDia="openLangInfoDia"
						/>
					</div>

				</div>

				<!-- 列表 -->
				<div class="sheet-list-cont" v-else-if="!select_id">
					<div class="list-top">
						<span>{{$t('PredictEdbPage.total_list_view',{limit: edb_total})}} </span>
					</div>
					<div
						class="edbChartList-wrapper"
						ref="listRef"
						@scroll="loadMoreHandle"
					>
						<div class="chart-list-item-wrap">
							<div class="sheet-item" v-for="item in edbChartList" :key="item.EdbInfoId">
								<div class="item-top">
									<span class="text_oneLine">{{ currentLang === 'en' ? (item.EdbNameEn||item.EdbName) : item.EdbName }}</span>
								</div>
								<div class="chart-img" @click="detailShowHandle(item)"
								:style="{background: `no-repeat top/cover url('${!item.HaveOperaAuth ? $icons.lock_big : item.ChartImage}')`}"></div>
								<div class="item-bottom">
									<span>{{$t('Common.create_time')}}: {{ item.CreateTime.slice(0,10) }}</span>
								</div>
							</div>
						</div>

					</div>
					<div v-if="!edb_total" class="nodata">
						<tableNoData :text="$t('Table.no_edb_msg')"/>
					</div>
				</div>

				<!-- 指标关联图模块 -->
				<div class="edb-detail-wrapper" style="padding: 30px 20px;" v-if="showAssociateChart&&select_id">
					<dataAssociateChart :edbInfoId="select_id" @returnHandle="showAssociateChart=false,showAssociateComputeData=false"></dataAssociateChart>
				</div>
				<div class="edb-detail-wrapper" style="padding: 30px 20px;" v-if="showAssociateComputeData&&select_id">
					<dataAssociateComputeData :edbInfoId="select_id" @returnHandle="showAssociateChart=false,showAssociateComputeData=false"></dataAssociateComputeData>
				</div>
			</div>
		</div>

		<!-- 计算弹窗控制 -->
		<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="85vw"
		v-dialogDrag>
			<div class="dialog-computed-header">
				<el-radio-group v-model="computed_source" size="medium" @change="computed_type = 0">
					<el-radio-button :label="1"><!-- 常规计算 -->{{$t('EtaBasePage.normal_calculate_tab')}}</el-radio-button>
					<el-radio-button :label="2"><!-- 批量计算 -->{{$t('EtaBasePage.batch_calculate_tab')}}</el-radio-button>
				</el-radio-group>
			</div>
			<ul class="computed-ul">
				<li
					:class="['cpmputed-li',{'act':item.type === computed_type}]" 
					v-for="item in computedTypes" 
					:key="item.type" 
					@click="changeComputedType(item.type)"
					>
					{{item.name}}

					<el-popover
						placement="top-start"
						width="450"
						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>

		<!-- 指标弹窗 -->
		<edb-dialog
			:isShow.sync="isEdbDia"
			:title="edbdia_title"
			:edbForm="edbForm"
			@successHandle="handleEdbCallBack"
		/>

		<!-- 分类弹窗 -->
		<edbClassifyDia
			:isOpenDialog.sync="classifyDia"
			:title="dialog_title"
			:form="classifyForm"
			@successCallback="getTreeData"
		/>

		<!-- 输入英文指标弹窗
		<set-en-name-dia 
			:isOpenDialog="setEnName" 
			@cancel="setEnName=false" 
			:formData="formItemArray" 
			@updateEnName="updateEnName" 
			cType="predictEbd" 
		/> -->

		<!-- 运算指标弹窗 -->
		<computedDialog
			:isOpenComputed="computed_type === 31"
			edbSource="predict"
			:title="computedTit"
			:calulateForm="calulateForm"
			:calulateList="calulateList"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
		/>

		<!-- 同比同差计算弹窗 -->
		<!-- 转月值 同比 同差 平均值弹窗 -->
		<operationDialog
			:isOperation="[42,32,33,39,43,44,45,46,49,54,55,64,65,66,69,70].includes(computed_type) && 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"
		/>

		<!-- 规则详情弹窗 -->
		<rules-detail
			:isOpenDialog.sync="isShowRuleDialog"
			:rules="showRules"
			:fromEdbInfo="showFromEdbInfo"
		/>

		<!-- 批量计算弹窗 -->
		<batchComputedDialog
			:isBatchComputed="[32,33,39,43,44,45,42,64,65,66].includes(computed_type) && computed_source===2"
			:type="computed_type"
			edbSource="predict"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
			@changeSource="changeComputedType"
		/>
			
		<!-- 拼接弹窗 -->
		<joint-target-dia
			:isShow="computed_type === 'joint'"
			:params="operationForm"
			:isPredict="true"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

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

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

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

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

	</div>
</template>

<script>
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { dataBaseInterface } from '@/api/api.js';
import leftMixin from './mixins/mixin';
import edbDialog from './components/edbDia.vue'
import childData from './components/childData.vue'
import edbDetail from './components/edbDetail.vue'
import edbClassifyDia from './components/classifyDia.vue'
import changeLang from "@/views/dataEntry_manage/components/changeLang.vue"
import setEnNameDia from "@/views/dataEntry_manage/components/setEnNameDia.vue"
import computedDialog from '@/views/dataEntry_manage/databaseComponents/computedDialog';
import operationDialog from './components/operationDialog';
import rulesDetail from './components/rulesDetailDia.vue'
import batchComputedDialog from '@/views/dataEntry_manage/databaseComponents/batchComptedDialog.vue';
import jointTargetDia from '@/views/dataEntry_manage/databaseComponents/jointTargetDia'
import fittingResidueDia from '@/views/dataEntry_manage/databaseComponents/fittingResidueDia.vue';
import diffusionIndexDialog from '@/views/dataEntry_manage/databaseComponents/diffusionIndexDia.vue';
import { getPredictFormulaTip } from '@/views/dataEntry_manage/databaseComponents/util';
import dataAssociateChart from '@/views/dataEntry_manage/databaseComponents/dataAssociateChart.vue'
import dataAssociateComputeData from '@/views/dataEntry_manage/databaseComponents/dataAssociateComputeData.vue'
import SmoothEdbDialog from '@/views/dataEntry_manage/databaseComponents/smoothEdbDialog.vue';
import setLangInfoDia from '@/views/dataEntry_manage/components/setLangInfo.vue'

export default {
	name:'',
	components: { 
		edbDialog,
		childData,
		edbClassifyDia,
		changeLang,
		setEnNameDia,
		computedDialog,
		operationDialog,
		edbDetail,
		rulesDetail,
		jointTargetDia,
		fittingResidueDia,
		batchComputedDialog,
		diffusionIndexDialog,
		dataAssociateChart,
		dataAssociateComputeData,
		SmoothEdbDialog,
		setLangInfoDia
	},
	mixins:[ leftMixin ],
	beforeRouteLeave (to, from, next) {
		// 前去编辑则存一次选择的节点
		if(to.path=='/editpredictEdb'){
			const obj={
				code:this.select_node,
				id:this.select_id
			}
			sessionStorage.setItem('predictEdbTreeData',JSON.stringify(obj))
		}else{
			sessionStorage.setItem('predictEdbTreeData','')
		}
		next()
	},
	data () {
		return {
			showData: false,
			search_txt: '',
			searchOptions:[],
			isSlideLeft: false,//左侧分类收起

			select_node: '',//节点唯一标识code
			select_classify: '',
			new_label:'',//双击修改的value
			treeData: [], //分类数据
			defaultShowNodes: [], //展开节点
			defaultProp: {
				label: 'ClassifyName',
				children: 'Children',
				isLeaf:'isLeaf'
			}, //树结构配置项
			dynamicNode: null,
			edbName: '',
			edb_nameEn: '',
			edbUserId: '',

			/* 分类弹窗 */
			dialog_title:'', 
			classifyDia: false, //
			classifyForm: {},

			/* 添加指标弹窗 */
			isEdbDia: false,
			edbdia_title:'',
			edbForm: {},

			select_id: '',//选中的id
			sheetDetailInfo: {},

			detail_show_chart: true,//详情展示方式 chart data

			/* 列表 */
			publicHaveMove: true,//是否还有列表数据
			edbChartList: [],
			edb_total: 0,
			public_page: 1,
			public_pages_size: 16,

			// currentLang:'ch', // ch(中文) en(英文)
			setEnName:false,
			// 传入的formItem所需内容
			formItemArray:[],

			/* 计算指标弹窗 */
			isOpenComputed:false,
			computedTit:'',
			calulateForm:{},
			operationForm:{},
			calulateList:[],
			computed_type:0,//打开弹窗的类型

			/* tips: new Map([
				[31,formulaTip.get(4)],
				[42,formulaTip.get(5)],
				[32,formulaTip.get(6)],
				[33,formulaTip.get(7)],
				[39,formulaTip.get(8)],
				[43,formulaTip.get(12)],
				[44,formulaTip.get(13)],
				[45,formulaTip.get(14)],
				['joint',formulaTip.get('joint')],
				[46,formulaTip.get(22)],
				[49,formulaTip.get(35)],
				[50,formulaTip.get(37)],
				[54,formulaTip.get(51)],
				[55,formulaTip.get(52)],
				[56,formulaTip.get(53)],
				['toMonthSeason',formulaTip.get('toMonthSeason')],
				['accumulate',formulaTip.get('accumulate')],
				[64,formulaTip.get(61)],
				[65,formulaTip.get(62)],
				[66,formulaTip.get(63)],
				['alpha',formulaTip.get('alpha')]
			]),//公式说明 */

			isShowRuleDialog: false,
			showRules: [],
			showFromEdbInfo: {},

			edbButton: {},//详情操作
			opLevelOneClassify: false,//一级分类按钮

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

      isOnlyMe:false,//只看我的

			/* 查看历史弹窗 */
			isLookHistory: false,
			lookEdbId: 0,
			searchLoading:false,

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

			activeTab:'',

			predictEdbInfo: {},

			/* 修改对应版本信息弹窗  替换原有设置英文*/
			isLangInfoDia: false
		};
	},
	computed: {
		computedTypes() {
			return this.computed_source === 1 ? this.baseTypes : this.batchTypes;
		},
		role() {
			let role = localStorage.getItem('Role') || '';
			if(['rai_admin','ficc_admin'].includes(role)) {
				return 'admin'
			}
			else {
				return role;
			}
		},
		/* 登录角色id */
		roleId() {
			let id = parseInt(localStorage.getItem('AdminId'));
			return id;
		},
		showPopover(){
			return this.isEdbBtnShow('edbPreData_enNameSetting')||
			this.isEdbBtnShow('edbPreData_recalcu')||
			this.edbButton.DeleteButton&&this.isEdbBtnShow('edbPreData_del')||
			this.isEdbBtnShow('edbPreData_copyData')
		},
		baseTypes(){
			return [
				{ name: this.$t('Edb.CalculatesAll.calculate')/* '指标运算' */,type: 31 },
				{ name: this.$t('Edb.CalculatesAll.on_year')/* '同比值' */,type: 32 },
				{ name: this.$t('Edb.CalculatesAll.differ')/* '同差值' */,type: 33 },
				{ name: this.$t('Edb.CalculatesAll.n_move_average')/* 'N数值移动平均计算' */,type: 39 },
				{ name: this.$t('Edb.CalculatesAll.to_month_quarter')/* '累计值转月/季值' */,type: 'toMonthSeason' },
				{ name: this.$t('Edb.CalculatesAll.n_rate')/* 'N数值环比值' */,type: 43 },
				{ name: this.$t('Edb.CalculatesAll.n_differ')/* 'N数值环差值' */,type: 44 },
				{ name: this.$t('Edb.CalculatesAll.up_conver')/* '升频' */,type: 45 },
				// { name: '指标拼接',type: 'joint' },
				{ name: this.$t('Edb.CalculatesAll.time_move')/* '时间移位' */,type: 46 },
				{ name: this.$t('Edb.CalculatesAll.super_season')/* '超季节性' */,type: 49 },
				{ name: this.$t('Edb.CalculatesAll.fit_residu')/* '拟合残差' */,type: 50 },
				{  name: this.$t('Edb.CalculatesAll.annual')/* '年化' */,type: 55 },
				{ name: this.$t('Edb.CalculatesAll.down_conver')/* '降频' */,type: 54 },
				{ name: this.$t('Edb.CalculatesAll.diff_index')/* '扩散指数' */,type: 56 },
				{ name: this.$t('Edb.CalculatesAll.cumulate')/* '累计值' */,type: 'accumulate' },
				{ name: this.$t('Edb.CalculatesAll.ex_smooth')/* '指数修匀' */,type:'alpha'}
			]
		},
		batchTypes(){
			return [
				{ name: this.$t('Edb.CalculatesAll.on_year')/* '同比值' */,type: 32 },
				{ name: this.$t('Edb.CalculatesAll.differ')/* '同差值' */,type: 33 },
				{ name: this.$t('Edb.CalculatesAll.n_move_average')/* 'N数值移动平均计算' */,type: 39 },
				{ name: this.$t('Edb.CalculatesAll.n_rate')/* 'N数值环比值' */,type: 43 },
				{ name: this.$t('Edb.CalculatesAll.n_differ')/* 'N数值环差值' */,type: 44 },
				{ name: this.$t('Edb.CalculatesAll.up_conver')/* '升频' */,type: 45 },
				{ name: this.$t('Edb.CalculatesAll.to_month_quarter')/* '累计值转月/季值' */,type: 'toMonthSeason' },
				{ name: this.$t('Edb.CalculatesAll.cumulate')/* '累计值' */,type: 'accumulate' },
				{ name: this.$t('Edb.CalculatesAll.ex_smooth')/* '指数修匀' */,type:'alpha'}
			]
		},
		tips(){
			return getPredictFormulaTip()
		},
		currentLang() {
			return this.$store.state.lang
		}
	},
	watch: {
		/* 设置动态右侧区域宽度 */
    isSlideLeft(newval) {
      if (!newval) {
        this.$nextTick(() => {
          this.reloadRightWid();
        });
      }
    },
		// /* 表格id */
		select_id(newval) {
			this.detail_show_chart = true;
			this.activeTab='Chart'

			if(this.predictEdbInfo.HaveOperaAuth) return
			this.$nextTick(()=>{
				//切换为曲线图 重置选择状态
				if(this.$refs.detailComponentRef){
					this.$refs.detailComponentRef.$refs.chartInfo.chartInfo.ChartType=1;
					this.$refs.detailComponentRef.$refs.chartInfo.year_select=10;
					this.$refs.detailComponentRef.$refs.chartInfo.year_select_season=20;

					this.$refs.detailComponentRef.$refs.chartInfo.calendar_type='公历';

					this.$refs.detailComponentRef.$refs.chartInfo.count_year=5;
					this.$refs.detailComponentRef.$refs.chartInfo.count_year_season=5;
					
					this.$refs.detailComponentRef.$refs.chartInfo.select_date=[];
					this.$refs.detailComponentRef.$refs.chartInfo.season_year=[];
					this.$refs.detailComponentRef.$refs.chartInfo.dateTip=this.$t('Chart.choose_time');

				}
			})
				
		},

		select_classify(newval) {
			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
			if(newval) {
				this.activeTab = ''
				this.public_page = 1;
				this.getPublicList()
			}
		},

		/* 搜索关键词 */
		search_txt(newval) {
			if(newval) {
				let search_obj = this.searchOptions.find(_ => _.EdbInfoId === newval);
				// let deep_arr = _.cloneDeep(this.treeData);
				// 查找图表的分类父级id
				// let arr = this.findParentNodeHandle(deep_arr, search_obj.ClassifyId).reverse(); // 父的父的父-父的父-父
				// this.defaultShowNodes = arr;
				this.select_node = search_obj.UniqueCode;
				this.$refs.treeRef.setCurrentKey(this.select_node);
				// 重置筛选状态
				this.select_id = newval;
			}
		}
	},
	methods: {
		isEdbBtnShow(type){
			const {predictEdbPermission,checkPermissionBtn}=this.permissionBtn
			return checkPermissionBtn(predictEdbPermission[type])||false
		},
		setCurrentClassify(ClassifyList){
			//获取指标详情后才能拿到准确的classifyId
			//根据准备的id查找指标的父级目录并展开
			console.log(ClassifyList);
			
			// 展开目录
			this.defaultShowNodes=ClassifyList.reverse().map(item=>item.UniqueCode)
			

			//滚动到高亮节点位置
			// this.$nextTick(()=>{
				setTimeout(() => {
					const dom = document.getElementById(`node${this.select_node}`)||{}
					const parentDom = document.getElementsByClassName('target_tree')[0];
					/* if (dom.offsetTop > parentDom.offsetHeight) {
						parentDom.scrollTo({
							top: dom.offsetTop - parentDom.offsetHeight / 2,
							left: 0,
							behavior: "smooth",
						});
					} */
					//parent可视区间：[scrollTop,scrollTop+offsetHeight]
					//node位置:node.offsetTop
					const overTop = dom.offsetTop+dom.clientHeight<parentDom.scrollTop
					const overBottom = dom.offsetTop+dom.clientHeight+30>parentDom.scrollTop+parentDom.offsetHeight
					if(overTop){
						parentDom.scrollTop = dom.offsetTop-30
					}
					if(overBottom){
						parentDom.scrollTop =  dom.offsetTop - parentDom.offsetHeight/2
					}
					this.searchLoading = false;
				}, 1500);
				setTimeout(() => {
					this.$refs.treeRef.setCurrentKey(this.select_node);//设置高亮
				}, 1500);
			// })
		},
		setNameBack({edb_name,edb_nameEn,userid}) {
			this.edbName=edb_name;
			this.edb_nameEn= edb_nameEn;
			this.edbUserId=userid;
		},

		/* 添加指标 */
		addEdbHandle() {
			if(!this.treeData.length) return this.$message.warning('请先添加预测指标分类');
			this.$router.push({
				path:'/addpredictEdb'
			})
		},

		/* 获取分类 */
		getTreeData(params=null) {
			preDictEdbInterface.predictEdbCatalog({IsOnlyMe:this.isOnlyMe||false,ParentId:0}).then(res => {
				const { Ret,Data } = res;
				
				if(Ret !== 200) return

				this.treeData = Data.AllNodes || [];
				this.opLevelOneClassify = Data.CanOpClassify;
				// this.currentLang = Data.Language === 'EN' ? 'en' : 'ch';
				this.showData = true;
				this.$nextTick(() => {
					/* 新增完成后 处理树展开和选中 */
					params && this.selectCurrentNode(params);
				});

			})
		},

		/* 搜索 */
		searchHandle(query) {
			if (query) {
        /* 查找列表 */
        preDictEdbInterface
          .edbSearch({
            Keyword: query,
            CurrentIndex: 1,
						PageSize: 10000,
            IsOnlyMe:this.isOnlyMe||false
          })
          .then((res) => {
            if (res.Ret !== 200) return
            this.searchOptions = res.Data.List || [];
          });
      } else {
        this.searchOptions = [];
      }
		},

		/* 选中分类变化时 */
		nodeChange({ UniqueCode,EdbInfoId,ClassifyId },node) {
			this.search_txt = '';
			this.select_node = UniqueCode;
			this.select_id = EdbInfoId || 0;
			this.select_classify = !EdbInfoId ? ClassifyId : 0;
			this.resetNodeStyle(node);
			this.dynamicNode = node;
			this.showAssociateChart=false
			this.showAssociateComputeData=false
		},

		async saveEdbHandle() {
			const {Ret} = await preDictEdbInterface.saveChartInfo({
				EdbInfoId: this.select_id,
				MaxValue: Number(this.$refs.detailComponentRef.$refs.chartInfo.tableData[0].MaxData),
				MinValue: Number(this.$refs.detailComponentRef.$refs.chartInfo.tableData[0].MinData)
			})
			if(Ret !== 200) return
			// this.$message.success('保存成功')
			this.$message.success(this.$t('MsgPrompt.saved_msg'))

			this.setChartImage()
		},

		 /* 关联图片 */
    setChartImage() {
      let svg = this.$refs.detailComponentRef.$refs.chartInfo.$refs.chartRef.chart.getSVG({
        chart: {
          width: 340,
          height: 230,
        },
      });
      let form = new FormData();
      form.append("Img", svg);
      this.setImageHandle(form);
    },

    async setImageHandle(form) {
      // let { Data } = await dataBaseInterface.uploadImgSvg(form);
      // await preDictEdbInterface.setImg({
      //   EdbInfoId: this.select_id,
      //   ImageUrl: Data.ResourceUrl,
      // });
			form.append("EdbInfoId", this.select_id);
      await preDictEdbInterface.setThumbnail(form)
    },

		/* 添加一级目录 */
		addLevelOneHandle() {
			this.dialog_title = '添加';
			this.classifyForm = {
				classify_name: '',
				Level:0,
				ParentId:0
			}
			this.classifyDia = 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,{ClassifyName,ClassifyId}){
			this.dialog_title = '添加'
			let arr=[]
			arr=this.getNodeParentData(node,arr)
			/* 添加目录 */
			this.classifyForm = {
				classify_name:'',
				Level:node.level,
				ParentId:ClassifyId,
				parentArr:arr,
			}
			this.classifyDia = true;
		},
    /* 编辑节点 */
    editNode(node, { ClassifyName,ClassifyNameEn,ClassifyId,Level,ParentId}) {

      this.dialog_title = '编辑';
			let arr=[]
			arr=this.getNodeParentData(node.parent,arr)

				/* 编辑目录 */
				this.classifyForm = {
					classify_name: this.currentLang==='en'?ClassifyNameEn:ClassifyName,
					classify_id: ClassifyId,
					Level:node.level-1,
					ParentId:ParentId,
					parentArr:arr,
				};
      this.classifyDia = true;
    },

		 /* 删除节点校验 */
    async removeNode(node, { ClassifyId,EdbInfoId }) {

			const { Data } = await preDictEdbInterface.classifyDelCheck({ ClassifyId,EdbInfoId })

			const { DeleteStatus,TipsMsg } = Data;

			/**
			 * 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: TipsMsg
			}

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

    },

		 /* 删除方法 */
    delApi(ClassifyId, EdbInfoId, type='') {
      preDictEdbInterface
        .classifyDel({
          ClassifyId,
          EdbInfoId,
        })
        .then((res) => {
          if (res.Ret !== 200) return
					this.$message.success(res.Msg);

					if (!res.Data.EdbInfoId || !res.Data) this.select_id = '';

					//删除表格后自动显示下一张表格
					type && res.Data.EdbInfoId
						? this.getTreeData({
								code: res.Data.UniqueCode,
								id: res.Data.EdbInfoId,
								classifyId:res.Data.ClassifyId
							})
						: this.getTreeData();
        });
    },

		/* 删除指标 */
		delEdbHandle() {
			this.$confirm(this.$t('PredictEdbPage.del_edb_msg')/* 'ETA预测指标删除后不可恢复，确认删除吗？' */, this.$t('Dialog.warn_tit'), {
        confirmButtonText: /* '确定' */this.$t('Dialog.confirm_btn'),
        cancelButtonText: /* '取消' */this.$t('Dialog.cancel_btn'),
        type: 'warning',
      })
        .then(() => {
          this.delApi(
            this.select_classify || 0,
            this.select_id,
            'del-edb'
          );
        })
        .catch(() => {});
		},

		/* 分类成功回调 */
		classifyCallback(type) {
			this.getTreeData();

			if (type === 'add') {
        //新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
        let code = this.add_parent_id;
        let flag = this.defaultShowNodes.some(item => item === code);
        !flag && this.defaultShowNodes.push(code);
        this.add_parent_id = '';

      }
		},

		/* 展开对应菜单 显示详情 */
		detailShowHandle({ UniqueCode, EdbInfoId,ClassifyId}) {
			let params = {
				code: UniqueCode,
				id: EdbInfoId,
				classifyId:ClassifyId
			};
			this.selectCurrentNode(params);
			this.select_classify = 0;
		},

		/* 操作指标后 */
		handleEdbCallBack(param) {
			this.getTreeData(param)
			//编辑后刷数据
			if(!param) {
				console.log('编辑后刷数据');
				this.detail_show_chart ? this.$refs.detailComponentRef.getDetail('updateImg') : this.$refs.detailComponentRef.getData();
			}
		},

		/* 更新指标 */
		updateEdbHandle: _.debounce(function() {
			this.loading = this.$loading({
				lock: true,
				target:'.edb-detail-wrapper',
				text: this.$t('MsgPrompt.refresh_ing_msg'),
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.8)'
			});
			preDictEdbInterface.edbRefresh({
				EdbInfoId: this.select_id
			}).then(res => {
				this.loading.close();
				if(res.Ret !== 200) return
				this.$message.success(res.Msg)

				//更新完刷数据
				console.log('更新完刷数据');
				
				this.detail_show_chart ? this.$refs.detailComponentRef.getDetail('updateImg') : this.$refs.detailComponentRef.getData();
			})
		},300),

		/* 部分刷新 */
		updateEdbPartHandle: _.debounce(function() {
			this.loading = this.$loading({
				lock: true,
				target:'.edb-detail-wrapper',
				text: this.$t('MsgPrompt.refresh_ing_msg'),
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.8)'
			});
			preDictEdbInterface.edbPartRefresh({
				EdbInfoId: this.select_id
			}).then(res => {
				this.loading.close();
				if(res.Ret !== 200) return
				this.$message.success(res.Msg)

				//更新完刷数据
				console.log('更新完刷数据');
				
				this.detail_show_chart ? this.$refs.detailComponentRef.getDetail('updateImg') : this.$refs.detailComponentRef.getData();
			})
		},300),

		/* 编辑指标 */
		editEdbHandle(type="") {
			preDictEdbInterface.edbDetail({
				EdbInfoId: this.select_id
			}).then(res => {
				if(res.Ret !== 200) return

				const { RuleList,EdbType,Source,CalculateList } = res.Data;
				
				// 原始指标
				if(EdbType === 1) {
					!type && this.$router.push({
						path:'/editpredictEdb',
						query:{
							id:this.select_id
						}
					})

					if(type === 'view') {
						this.showRules = RuleList;
						this.showFromEdbInfo = CalculateList[0];
						this.isShowRuleDialog=true};
				} else {
					//计算指标
					this.setComputedDialogForm(res.Data,type);

					switch (Source) {
						case 47: 
						case 48: 
							this.computed_type = 'joint';
							break
						case 72:
						case 73:
							this.computed_type = 'alpha';
							break
						default:
							this.computed_type = Source;
							break
					}
					
					// this.computed_type =[47,48].includes(Source)?'joint': Source;
					// this.computed_type = [72,73].includes(Source)? 'alpha': Source;
				}

			})
		},

		/* 查看指标 */
		viewNode() {
			this.editEdbHandle('view')
		},

		/* 计算指标回显 */
		setComputedDialogForm({Source,CalculateList,CalculateFormula,EdbInfoId,EdbName,EdbNameEn,Unit,UnitEn,Frequency,ClassifyId,ClassifyList,MoveType,MoveFrequency,Calendar,CorrelationStr,EmptyType,MaxEmptyType},type='') {
			//找到指标的父级
			const parentNodes = ClassifyList.length&&ClassifyList.map(item=>item.ClassifyId)
			//指标运算 or 其他计算类型指标
			if( Source === 31 ) {
				/* 回显指标和表单 */
				this.computedTit = '编辑计算指标';
				/* 依赖的指标列表 */
				this.calulateList = CalculateList.map(item => ({
					tag: item.FromTag,
					edb_name: item.FromEdbName,
					target: item.FromEdbInfoId,
					start_date: item.StartDate,
					end_date: item.EndDate
				}))
				/* 公式和表单 */
				this.calulateForm =  {
					edb_id:EdbInfoId,
					formula: CalculateFormula,
					menu: parentNodes,
					targetName: this.currentLang==='en'?EdbNameEn:EdbName,
					unit: this.currentLang==='en'?UnitEn:Unit,
					frequency: Frequency,
					emptyType: EmptyType,
					maxEmptyType: MaxEmptyType,
					view: type === 'view'
				};
			} else  {

				let public_params = {
						edb_id: EdbInfoId,
						targetName: this.currentLang==='en'?EdbNameEn:EdbName,
						frequency: Frequency,
						unit: this.currentLang==='en'?UnitEn:Unit,
						menu: parentNodes,
						view: type === 'view',
				}

				if([47,48,50,56].includes(Source)){//拟合残差
					this.operationForm={
						...public_params,
						source: Source,
						date: CalculateFormula,
						pre_edb: Source === 47 ? CalculateList.find(item => item.FromTag === 'A').FromEdbInfoId : '', //俺也不懂为什么这么定义都是江西老表的锅
						after_edb: Source === 47 ? CalculateList.find(item => item.FromTag === 'B').FromEdbInfoId : '',
						old_stay_edb: Source === 48 ? CalculateList.find(item => item.FromTag === 'A').FromEdbInfoId : '',
						concat_edb: Source === 48 ? CalculateList.find(item => item.FromTag === 'B').FromEdbInfoId : '',
						from_arr: CalculateList,
						correlationStr: CorrelationStr
					}
					return
				}
				this.operationForm = {
					...public_params,
					oldedb_id: CalculateList[0].FromEdbInfoId,
					oldEdb_name: CalculateList[0].FromEdbName,
					menu: parentNodes.reverse(),
					formula: CalculateFormula || '',
					moveType: MoveType,
					moveUnit: MoveFrequency,
					moveVal: Source === 46 ? CalculateFormula : '',
					calendar_type: Source === 49 ? Calendar : '',
					emptyType:EmptyType
				}

				if([72,73].includes(Source)){
					this.operationForm = {
						edb_id: EdbInfoId,
						oldedb_id: CalculateList[0].FromEdbInfoId,
						oldEdb_name: CalculateList[0].FromEdbName,
						EdbName,Frequency,Unit,ClassifyId,Formula:CalculateFormula,
						view: type === 'view'
					}
				}
			}
		},

		/* 复制数据 */
		copyData() {
			preDictEdbInterface.edbDataInfo({
        EdbInfoId: this.select_id,
        CurrentIndex: 1,
				PageSize: 100000,
      }).then(res => {
				if(res.Ret !== 200) return

				const { DataList,PredictDataList } = res.Data.Item;

				let total_data = [...PredictDataList,...DataList];
				let str = '日期\t 值\n';
        total_data.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'));
          }
        );
			})
		},

		/* 获取表格列表 */
		getPublicList() {
			preDictEdbInterface.edbList({
				CurrentIndex: this.public_page,
				PageSize: this.public_pages_size,
        ClassifyId: this.select_classify || 0,
        IsOnlyMe:this.isOnlyMe||false,
			}).then(res => {
				if(res.Ret !== 200) return

				this.publicHaveMove = res.Data
            ? this.public_page < res.Data.Paging.Pages
            : false;
          this.edbChartList = res.Data
            ? this.public_page === 1
              ? res.Data.List
              : [...this.edbChartList, ...res.Data.List]
            : [];
        this.edb_total = res.Data ? res.Data.Paging.Totals : 0;
			})
		},

			/* 加载更多 */
		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-10 && this.publicHaveMove){
				this.public_page++;
				this.getPublicList();
			}
		},300),

		/* 切换中英文 */
		// changeLangHandle: _.debounce(async function (lang){
		// 	this.search_txt = '';
		// 	this.currentLang = lang;
		// 	await dataBaseInterface.setUserLang({
		// 		ConfigCode: 'predict_edb_language',
		// 		ConfigValue: lang === 'en' ? 'EN' : 'CN'
		// 	})
		// },200),

		/* 编辑英文 */
		// openEnNameDia(info){
		// 	this.formItemArray=[{
		// 		label:/* '指标名称' */ this.$t('Edb.Detail.e_name'),
		// 		value:info.EdbName,
		// 		key:'EdbName',
		// 		notEdit:true
		// 	}]
		// 	// 中文单位有 才能编辑英文单位
		// 	if(info.Unit && info.Unit!='无'){
		// 		this.formItemArray.push({
		// 			label:this.$t('Edb.Detail.e_unit') /* '单位' */,
		// 			value:info.Unit,
		// 			key:'Unit',
		// 			notEdit:true
		// 		},
		// 		{
		// 			label:this.$t('Edb.Detail.e_en_name')/* '英文指标名称' */,
		// 			value:info.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:info.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:info.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.select_id),
		// 		...item
		// 	}
		// 	dataBaseInterface.edbInfoEditEn(params).then(res=>{
		// 		if(res.Ret ==200){
		// 			this.$message({
		// 				message:res.Msg,
		// 				type:"success"
		// 			})
		// 			this.detail_show_chart ? this.$refs.detailComponentRef.getDetail() : this.$refs.detailComponentRef.getData();
		// 			this.setEnName = false
		// 			this.getTreeData({
		// 				code: this.select_node,
		// 				id: this.select_id
		// 			});
		// 		}
		// 	})
		// },

		clickEdbNameHandle() {
			this.$refs.detailComponentRef.changeLangOptions();
		},

		openLangInfoDia(info) {
				this.formItemArray=[
					{
						label:/* '指标名称' */ this.$t('Edb.Detail.e_name'),
						value: this.currentLang==='en'?info.EdbNameEn:info.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'?info.UnitEn:info.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.select_id),
				...item
			}
			dataBaseInterface.setEdbLangInfo(params).then(res=>{
				if(res.Ret !==200) return

				this.$message.success(res.Msg)

				this.detail_show_chart ? this.$refs.detailComponentRef.getDetail() : this.$refs.detailComponentRef.getData();
				this.getTreeData({
					code: this.select_node,
					id: this.select_id
				});

				this.isLangInfoDia = false
			})
		},

		/* 打开计算弹窗 */
		addComputedHandler() {
			this.computedTit = '计算指标';
			this.calulateList = [];
			this.calulateForm = {};
			this.operationForm = {};
			this.isOpenComputed = true;
		},

		/* 选择计算类型 */
		changeComputedType(type) {
			let typeMapSource = {
				'toMonthSeason': 42,
				'accumulate': 65
			}
			this.computed_type = typeMapSource[type] || type;;
			this.isOpenComputed = false;
		},

		/* 新增计算指标回调 */
		addComputedCallBack(type, params) {
			this.computed_type = 0;
			this.computed_source = 1;
			
			this.showAssociateChart=false;
			this.showAssociateComputeData=false;
			type === 'add' ? this.getTreeData(params) : this.getTreeData();
			if(type === 'edit') {
				this.detail_show_chart ? this.$refs.detailComponentRef.getDetail() : this.$refs.detailComponentRef.getData();
			}
		},

		/* 重绘右侧区域宽度 */
    reloadRightWid() {
      let total_wid = $('.predict-edb-main')[0].offsetWidth;
      let left = $('#left')[0].offsetWidth;
      let rigtWid = total_wid - left - 20 + 'px';
      $('#right')[0].style.width = rigtWid;

    },
    //只看我的
    onlyMeHandler(){
      this.getTreeData()

			this.public_page = 1;
			this.$refs.listRef.scrollTop = 0;
      this.getPublicList();
    },
		//懒加载el-tree
		async getLazyTreeData(node,resolve,maxLevel=3){
			if(node.level===0){
				resolve(this.treeData)
			}else{
				let arr=[]
				const res=await preDictEdbInterface.predictEdbCatalog({IsOnlyMe:this.isOnlyMe||false,ParentId:node.data.ClassifyId})
				if (res.Ret === 200) {
					const temarr = res.Data.AllNodes || [];
					arr=temarr.map(item=>{
						return {
							...item,
							isLeaf:item.EdbInfoId?true:false
						}
					})
				}
				resolve(arr)
			}
				
		},
		changeTreeNode(){
			this.$refs.treeRef.setCurrentKey(this.select_node);
			this.$nextTick(()=>{
				const _node = this.$refs.treeRef.getNode(this.select_node)
				this.dynamicNode = _node;
				this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
			})
		},
		changeShowType(){
			if(!this.activeTab) return
			this.detail_show_chart = this.activeTab==='Chart'?true:false
		}
	},
	mounted() {
		const obj=sessionStorage.getItem('predictEdbTreeData')
		if(obj||this.$route.query.code){
			let code=this.$route.query.code?this.$route.query.code:JSON.parse(obj).code
			let id=this.$route.query.code?this.$route.query.id:JSON.parse(obj).id
			let classifyId=this.$route.query.code?this.$route.query.classifyId:JSON.parse(obj).classifyId
			this.getTreeData({code: code,id: Number(id),classifyId:Number(classifyId)})
		}else{
			this.getTreeData()
		}

		// 清除缓存数据
		setTimeout(() => {
			sessionStorage.setItem('predictEdbTreeData','')
		}, 1000);
		 
		this.getPublicList();

		window.addEventListener('resize', this.reloadRightWid);
	},
	destroyed() {
		window.removeEventListener('resize', this.reloadRightWid);
	}
}
</script>
<style lang="scss">
.predictEdb-container{
	.detail-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;
		}
	}
}
</style>
<style lang='scss' scoped>
@import "~@/styles/theme-vars.scss";
*{ box-sizing: border-box;}
$mini-font: 12px; $normal-font: 14px;
.predictEdb-container {
	.slide-icon {
		padding: 20px 0;
		/* display: block; */
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
		border-radius: 5px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}
		&.slide-left {
			right: 0;
		}
		&.slide-right {
			left: 0;
		}
	}
	.predict-edb-main {
		display: flex;

		.main-left {
			width: 400px;
			min-width: 380px;
			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 - 120px);
			overflow: hidden;
			position: relative;
			box-sizing: border-box;

			.datasheet_top {
				padding: 20px;
				background: #fff;
				border: 1px solid #ececec;
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px;
			}
			.search-cont {
				padding: 0 20px;
			}



			.tree-cont {
				padding: 0 20px 30px 20px;
				/* max-height: calc(100vh - 280px);
				overflow: auto; */
			}
			.target_tree {
				color: #333;
				max-height: calc(100vh - 436px);
				overflow-y:auto;
				.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;
					}
				}
			}
			.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 {
			width: 80%;
			height: calc(100vh - 120px);
			&.detail-main{
				overflow-x:auto;
			}
			.edb-detail-wrapper {
				height: 100%;
				border: 1px solid #ececec;
				border-radius: 4px;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
				overflow: hidden;
				background: #fff;
				&.main-min-width{
					min-width: 780px;
				}
				.detail-top {
					padding: 20px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #ececec;
					.title { 
						font-size: 16px;
						&.disabled { color: #ccc; }
					}
					.action-ul {
						display: flex;
						li { margin: 0 10px; }
					}
				}
				.detail-wrap {
					position: relative;
					padding: 16px;
					height: calc(100vh - 180px);
					overflow-y: auto;
					.toggle-text {
						position: absolute;
						right: 20px;
						top: 40px;
						z-index: 2;
						display: flex;
						align-items: center;
					}
					/* min-height: 500px; */
				}
			}

			.sheet-list-cont {
				color: #333;
				.el-card .el-card__header,
				.el-card__body {
					padding: 10px;
				}
				.list-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.edbChartList-wrapper {
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
					max-height: calc(100vh - 143px);
					overflow: hidden;
					overflow-y: auto;
					.drag-cont {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
					}
					.dragShdow {
						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
						opacity: 0.5;
					}
					.sheet-item {
						width:23%;
						min-width: 210px;
						border-radius: 4px;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
						border: 1px solid #EBEEF5;
						background-color: #FFFFFF;
						overflow: hidden;
						color: #303133;
						transition: 0.3s;
						.item-top,.item-bottom{
							padding:10px;
							text-align: left;
						}
						.item-top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 16px;
							font-weight: 600;
							box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
						}
						.chart-img {
							/* width: 100%;
							height: 230px;
							object-fit: fill !important; */
							margin:10px;
							margin-bottom: 0;
							height: 0;
							padding-bottom: 67%;
							cursor: pointer;
						}
						.item-bottom {
							display: flex;
							justify-content: space-between;
							font-size: 12px;
							color: #666;
							.collected {
								color: #f00;
								cursor: pointer;
							}
							.join_txt {
								color: $theme-color;
								cursor: pointer;
							}
						}
					}
				}
				.nodata {
					text-align: center;
				}
			}
		}

	}

	.computed-ul {
		max-height: 600px;
		height: 70vh;
		overflow-y: auto;
		padding: 40px 92px;
		display: flex;
		flex-wrap: wrap;
		.cpmputed-li {
			width: 180px;
			padding: 19px 0;
			height:60px;
			color: $theme-color;
			font-size: 16px;
			background:#ECF5FF;
			border-radius: 8px;
			border: 1px solid #B3D8FF;
			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;
			}
		}
	}
}	
</style>

<style lang="scss">
@import "~@/styles/theme-vars.scss";
.predictEdb-container {
	.label-input .el-input__inner {
		height: 25px;
		line-height: 25px;
		padding: 0 10px;
	}

	.el-dialog--center .el-dialog__body {
		padding: 40px 20px 30px 60px;
	}

	.el-tree__drop-indicator{
		height:3px;
		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;
	}

	.dialog-computed {
		max-width:950px !important;
		.el-dialog__header {
			background-color: #fff;
			.el-dialog__close {
				color: #333;
			}
		}
	}	
}
.edb-tool-popover{
	.edb-tool-wrap{
		display: flex;
		flex-wrap: wrap;
		gap:10px;
		.el-button + .el-button{
			margin-left: 0;
		}
	}
}
</style>