<template>
	<div class="comodity-chart-container" v-if="showData">
		<span
			class="slide-icon slide-right"
			@click="isSlideLeft = !isSlideLeft"
			v-show="isSlideLeft"
		>
			<i class="el-icon-d-arrow-right"></i>
		</span>

		<div class="data-sheet-main" id="box">
      <div class="main-left left" id="left" v-show="!isSlideLeft">
				<div class="datasheet_top">
						<el-button type="primary" @click="goAddChart('price')">添加价格曲线</el-button>
						<el-button type="primary" @click="goAddChart('profit')">添加利润曲线</el-button>
				</div>

				<div class="search-cont">
					<el-checkbox v-model="isShowMe"  @change="() => { getTreeData();getPublicList() }">只看我的</el-checkbox>
					<el-select
						v-model="search_txt"
						v-loadMore="searchLoad"
						:filterable="!search_txt"
						remote
						clearable
						placeholder="请输入图表名称"
						style="width: 100%; margin-top: 20px"
						: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.ChartInfoId"
							:label="item.ChartName"
							:value="item.ChartInfoId"
						>
						</el-option>
					</el-select>
				</div>
				<div class="tree-cont">
					<el-tree
						ref="treeRef"
						class="target_tree"
						:data="treeData"
						node-key="UniqueCode"
						:props="defaultProp"
						:allow-drag="canDragHandle"
						:allow-drop="canDropHandle"
						:current-node-key="select_node"
						:default-expanded-keys="defaultShowNodes"
						draggable
						:expand-on-click-node="false"
						check-strictly
						empty-text="暂无分类"
						@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) || ''
								}`"
							>
								<span>{{ data.ChartClassifyName }}</span>
							</span>
							<span
								style="display: flex; align-items: center"
								v-if="select_node === data.UniqueCode"
							>
								<img
									src="~@/assets/img/data_m/move_ico.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
								/>
								<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.ChartInfoId"
								/>
								<img
									slot="reference"
									src="~@/assets/img/set_m/del.png"
									alt=""
									style="width: 14px; height: 14px"
									@click.stop="removeNode(node, data)"
									v-if="!data.ChartInfoId"
								/>
							</span>
						</span>
					</el-tree>
					<div
						class="noDepart"
						@click="addLevelOneHandle"
					>
						<img
							src="~@/assets/img/set_m/add_ico.png"
							alt=""
							style="width: 16px; height: 16px; margin-right: 10px"
						/>
						<span>添加图表分类</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%'">

				<!-- 图表详情 -->
				<div class="chart-detail-wrapper" v-if="chartInfo.ChartInfoId">
					<el-row class="bottom-min">
              <el-col
                :span="21"
                style="padding: 20px 0;"
              >
                <div class="chartEn-mark" v-show="chartInfo.IsEnChart" style="top: 0;left: 0;">En</div>
                <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
                  <div class="chartWrapper" id="chartWrapper">
                    <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                    <Chart 
											:options="options"
											minHeight="440px" 
											height="500px"
											ref="chartRef"
										/>

                    <!-- 上下限 -->
                    <div class="range-cont left">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        placeholder="上限"
                        v-model="chartLimit.max"
                        @change="setCommodityChart"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        placeholder="下限"
                        v-model="chartLimit.min"
                        @change="setCommodityChart"
                      />
                    </div>
                  </div>
                  <span class="chart-author">作者:{{ chartInfo.SysUserRealName}}</span>
                </div>

                <!-- 异常显示 -->
                <p class="error-tip" style="min-height: 400px;" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
              </el-col>
              <el-col :span="3" style="position: absolute;height: 100%;right: 0;">
								<!-- 操作 -->
								<chartHandlesWrap
									:chartInfo="chartInfo"
									:linkUrl="linkUrl"
									@copyChartConfirm="copyChartConfirm"
									@addMychartHandle="addMychartHandle"
									@refreshHandle="refreshHandle"
									@saveChartHandle="saveChartHandle"
									@saveChartOtherHandle="saveChartOtherHandle"
									@editChartHandle="editChartHandle"
									@openEnNameDia="openEnNameDia"
									@delChartHandle="delChartHandle"
								/>
              </el-col>
          </el-row>
				</div>

				<!-- 列表 -->
				<chartListWrap
					v-else
          :total="chart_total" 
          :list="chartList" 
          @loadMoreHandle="loadMoreHandle"
          @detailShowHandle="detailShowHandle"
          @addMychartHandle="addMychartHandle"
          ref="chartListWrap"
        />
			</div>
		</div>


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

		 <!-- 加入我的图库弹窗 -->
    <addMyClassifyDia
      :isAddMyDialog="isAddMyChart"
      :add_id="add_chart_id"
      :add_ids="add_ids"
      @cancel="isAddMyChart = false"
      @addSuccess="addMySuccess"
    />

		 <!-- 图表另存 -->
    <SaveChartOther 
      :show.sync="isShowSaveOther" 
      fromType="chartsetting"
			source="good_price"
      :data="chartInfo"
      @ensure="getTreeData"
    />

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

	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import futuresInterface from '@/api/modules/futuresBaseApi';
import leftMixin from './mixins/classifyMixin';
import Chart from '@/views/dataEntry_manage/components/chart';
import changeLang from "@/views/dataEntry_manage/components/changeLang.vue"
import classifyDia from '@/views/datasheet_manage/components/sheetClassifyDia.vue';
import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
import setEnNameDia from '@/views/dataEntry_manage/components/setEnNameDia.vue'
import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
import { copyOtherOptions } from '@/utils/defaultOptions';
export default {
	components: { 
		changeLang,
		classifyDia,
		Chart,
		addMyClassifyDia,
		SaveChartOther,
		setEnNameDia
	},
	mixins:[ leftMixin,chartSetMixin ],
	computed: {
		/* 分享地址 */
    linkUrl() {
      const LINK_CHART_URL = process.env.CHART_LINK;
      return `${LINK_CHART_URL}?code=${this.chartInfo.UniqueCode}&fromType=share?&lang=${this.currentLang}`
    }
	},
	data () {
		return {
			showData: false,
			refreshLoading: false,
			isShowMe: false,
			search_txt: '',
			searchOptions:[],
			isSlideLeft: false,//左侧分类收起

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

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

			select_id: '',//选中的图表id
			chartInfo: {},
			chart_title:'',//图表标题 双击标题修改时来存储最新值

			isAddMyChart: false, //加入图库弹窗
      add_chart_id: 0, //要加入的图表
			add_ids:[],//加入时已有的分类

			/* 图表列表 */
			publicHaveMove: true,//是否还有列表数据
			chartList: [],
			chart_total: 0,
			chart_page: 1,
			chart_pages_size: 16,

			search_page: 1,
			search_have_more: false,
			current_search:'',
		};
	},
	watch: {
		/* 设置动态右侧区域宽度 */
    isSlideLeft(newval) {
			this.$nextTick(() => {
				this.reloadRightWid();
			});
    },
		/* 图表id */
		select_id(newval) {
			if(newval) {
				this.currentLang = 'ch';
				this.getDetailHandle();
			}else {
				this.chartInfo = {};
			}
		},

		select_classify(newval) {
			if(this.$refs.chartListWrap) this.$refs.chartListWrap.$refs.listRef.scrollTop = 0;
			if(newval) {
				this.chart_page = 1;
				this.getPublicList()
			}
		},

		/* 搜索关键词 */
		search_txt(newval) {
			if(newval) {
				let search_obj = this.searchOptions.find(_ => _.ChartInfoId === newval);
				let deep_arr = _.cloneDeep(this.treeData);
				// 查找图表的分类父级id

				let arr = this.findParentNodeHandle(deep_arr, search_obj.UniqueCode).slice(1).reverse(); // 父的父的父-父的父-父
				this.defaultShowNodes = arr;
				this.select_node = search_obj.UniqueCode;
				this.$refs.treeRef.setCurrentKey(this.select_node);
				// 重置筛选状态
				this.select_id = newval;
			}
		}
	},
	methods: {

		/* 添加图表 */
		goAddChart(scence) {
			if(!this.treeData.length) return this.$message.warning('请先添加分类');
			this.$router.push({ path: '/addCommodityChart',query: { scence } });
		},

		/* 获取分类 */
		getTreeData(params=null) {
			futuresInterface.classifyList({IsShowMe:this.isShowMe}).then(res => {
				const { Ret,Data } = res;
				if(Ret !== 200) return

				this.showData = true;
				this.treeData = Data.AllNodes || [];
				this.$nextTick(() => {
					/* 新增完成后 处理树展开和选中 */
					params && this.selectCurrentNode(params);
				});

			})
		},

		/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
      /* 查找列表 */
      futuresInterface
        .searchChart({
          Keyword: query,
          IsShowMe:this.isShowMe,
          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,...List];
        });
		},

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

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

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

		/* 添加一级目录 */
		addLevelOneHandle() {
			this.dialog_title = '添加';
			this.classifyForm = {
				classify_name: '',
			}
			this.classifyDia = true;
		},

    /* 编辑节点 */
    editNode(node, { ChartClassifyName,ChartClassifyId }) {

      this.dialog_title = '编辑';
      /* 编辑目录 */
      this.classifyForm = {
        classify_name: ChartClassifyName,
        classify_id: ChartClassifyId,
      };
      this.classifyDia = true;
    },

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

			const { Data } = await futuresInterface.classifyDelCheck({ ChartClassifyId })

			const { DeleteStatus } = Data;

			DeleteStatus === 1 
			? this.$confirm('该分类下关联表图表不可删除', '删除失败', {
				confirmButtonText: '知道了',
				showCancelButton: false,
				type: 'error',
			}) : DeleteStatus === 0
			?  this.$confirm('确定删除当前分类吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				this.delApi(ChartClassifyId,ChartInfoId)
			}): null;

    },

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

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

					//删除自动显示下一张
					type=='del_chart' && res.Data.ChartInfoId
						? this.getTreeData({
								code: res.Data.UniqueCode,
								id: res.Data.ChartInfoId
							})
						: this.getTreeData();
        });
    },

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

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

      }
		},

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

		/* 保存图表 */
		saveChartHandle: _.debounce(async function() {
			const { Ret } = await futuresInterface.chartSave({
				ChartInfoId: this.chartInfo.ChartInfoId,
				LeftMin: String(this.chartLimit.min),
				LeftMax: String(this.chartLimit.max),
			})

			if(Ret!==200) return
			this.$message.success('保存成功');
			this.getTreeData();
			//关联图表和图片
			this.setChartImage();
		},300),

		/* 点击保存时关联图表和截取的图片 */
    setChartImage() {
      let svg = this.$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 dataBaseInterface.setChartImage({
        ChartInfoId: this.selected_chartid,
        ImageUrl: Data.ResourceUrl,
      });
    },

		copyChartConfirm(type) {
			type !== 'url' && this.copyChartHandle(type)
			if(this.currentLang=='en'){
				// 是否所有数据都填写完
				let flag=true
				// 是否有英文表格名称
				if(!this.chartInfo.ChartNameEn || !this.chartInfo.UnitEn) flag = false;
				if(!flag){
					this.$confirm('英文名称未输入完整，分享图表上可能出现空名称的情况，确定继续分享吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
					})
					.then(() => {
						if(type==='url'){
							const input = document.createElement('input')
							input.setAttribute('readonly','readonly')
							input.value = this.linkUrl
							document.body.appendChild(input)
							input.select();
							document.execCommand('copy');
							document.body.removeChild(input);
							this.$message.success('复制链接成功')
						}
					})
					.catch(() => {});
				}else{
					type=='url' && this.shareUrl()
				}
			}else{
				type=='url' && this.shareUrl()
			}
		},

		 /* 点击复制先用canvas画出 转成图片在放到粘贴板中 */
    copyChartHandle:_.debounce(function(type){{
      let chartsName = this.currentLang=='ch'?this.chartInfo.ChartName:this.chartInfo.ChartNameEn
      let { heightNum, widthNum , newTitle , dynamic_copyOptions} = this.dynamicWidthAndHeight(type,this.chartInfo.ChartType,chartsName,this.commodityChartData.length)
      const chartType = 'seasonLegend';
      // 英文转SVG设置变动
      if(this.currentLang == 'en'){
        // 如果竖轴坐标单位为'英文单位'，表示客户没填，转成svg时置为空
        this.$refs.chartRef.chart.options.yAxis.forEach(it => {
          if(it.title.text == '英文单位') it.title.text='' 
        });
      }
      let svg = this.$refs.chartRef.chart.getSVG({
        chart:{
          width:widthNum,
          height:heightNum,
          backgroundColor:"rgba(255, 255, 255, 0)",
        },
        title: {
          text: newTitle,
          margin: 10,
          style: {
            fontSize: '18px'
          }
        },
        legend:{
          ...copyOtherOptions[chartType],
          ...dynamic_copyOptions[chartType]
          }
      });
      this.copyBlobItem(widthNum,heightNum,svg,type);
    }
    },500),

		/* 分享图表 */
    shareUrl() {
      var clipboard = new this.Clipboard('.shareLink')
      clipboard.on('success', e => {
        console.log(e);
        this.$message.success('复制链接成功')
        e.clearSelection() // 释放内存
        clipboard.destroy()
      })
      // // 浏览器不支持
      clipboard.on('error', e => {
        this.$message.warning('浏览器暂不支持')
        // 释放内存
        clipboard.destroy()
      })
    },

		/* 获取图表列表 */
		getPublicList() {
			futuresInterface.getChartList({
				CurrentIndex: this.chart_page,
				PageSize: this.chart_pages_size,
        ChartClassifyId: this.select_classify || 0,
				IsShowMe: this.isShowMe
			}).then(res => {
				if(res.Ret !== 200) return

				this.publicHaveMove = res.Data
            ? this.chart_page < res.Data.Paging.Pages
            : false;
          this.chartList = res.Data
            ? this.chart_page === 1
              ? res.Data.List
              : [...this.chartList, ...res.Data.List]
            : [];
        this.chart_total = res.Data ? res.Data.Paging.Totals : 0;
			})
		},

			/* 加载更多 */
		loadMoreHandle: _.throttle(function() {
			let scrollTop = this.$refs.chartListWrap.$refs.listRef.scrollTop;
      let clientHeight = this.$refs.chartListWrap.$refs.listRef.clientHeight;
      let scrollHeight = this.$refs.chartListWrap.$refs.listRef.scrollHeight;
			if(scrollTop + clientHeight >= scrollHeight-10 && this.publicHaveMove){
				this.chart_page++;
				this.getPublicList();
			}
		},300),

		getChartInfo() {
			this.getDetailHandle();
		},

		/* 获取图表详情 */
		getDetailHandle() {
			futuresInterface.chartDetail({
				ChartInfoId: this.select_id
			}).then(res => {
				if(res.Ret !== 200) return

				this.chartInfo = res.Data.ChartInfo.Source===5 ? {
					...res.Data.ChartInfo,
					ProfitNameEn: res.Data.DataResp.ProfitNameEn,
					ProfitName: res.Data.DataResp.ProfitName,
				} : res.Data.ChartInfo;
				this.tableData = [res.Data.EdbInfoList[0]]
				this.initCommodityData(res.Data)
			})
		},

		/* 删除图表 */
		delChartHandle() {
			const { ChartClassifyId,ChartInfoId } = this.chartInfo;
			this.$confirm('删除后该图表将不能再引用，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delApi(ChartClassifyId,ChartInfoId,'del_chart');
        })
        .catch(() => {});
		},

		/* 刷新图表 */
		refreshHandle() {
			this.refreshLoading = this.$loading({
        lock: true,
        target: '.main-right',
        text: '刷新图表中...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)',
      });
      futuresInterface
        .refreshChart({
          ChartInfoId: this.chartInfo.ChartInfoId,
        })
        .then((res) => {
          this.refreshLoading.close();
          if (res.Ret === 200) {
            this.getDetailHandle();
            this.$message.success(res.Msg);
          }
        });
		},

		/* 编辑图表 */
		editChartHandle() {
			this.$router.push({
        path: '/addCommodityChart',
        query: {
          code: this.chartInfo.UniqueCode
        }
      })
		},

		 /* 加入我的图库 */
    addMychartHandle(item) {
      this.add_chart_id = item.ChartInfoId;
      //已有的分类ids
      this.add_ids = item.MyChartClassifyId ? item.MyChartClassifyId.split(',').map(item => Number(item)) : [];
      this.isAddMyChart = true;
    },

    /* 加入我的图库成功 */
    addMySuccess(params) {
      this.isAddMyChart = false;

			/* 判断是详情还是图库列表 */
      if (this.selected_chartid) {
        this.chartInfo.IsAdd = true;
        this.chartInfo.MyChartId = params.MyChartInfoId;
        this.chartInfo.MyChartClassifyId = params.MyChartClassifyId;
      } else {
        this.chartList.forEach((item) => {
          if (item.ChartInfoId === this.add_chart_id) {
            item.IsAdd = true;
            item.MyChartId = params.MyChartInfoId;
            item.MyChartClassifyId = params.MyChartClassifyId
          }
        });
      }
    },

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

    },
	},
	mounted() {

		if(this.$route.query.code) {
      this.getTreeData({code: this.$route.query.code,id: Number(this.$route.query.id)})
    } else {
      this.getTreeData();
      this.getPublicList();
    }

		window.addEventListener('resize', this.reloadRightWid);
	},
	destroyed() {
		window.removeEventListener('resize', this.reloadRightWid);
	}
}
</script>
<style lang='scss' scoped>
*{ box-sizing: border-box;}
$mini-font: 12px; $normal-font: 14px;
.comodity-chart-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;
		}
	}
	.data-sheet-main {
		display: flex;

		.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 - 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;
			}
			.search-cont {
				padding: 0 20px;
			}



			.tree-cont {
				padding: 30px 20px;
				max-height: calc(100vh - 280px);
				overflow: auto;
			}
			.target_tree {
				color: #333;
				.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: 60px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #409eff;
				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%;
			.chart-detail-wrapper {
				height: calc(100vh - 120px);
				border: 1px solid #ececec;
				border-radius: 4px;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
				overflow: auto;
				background: #fff;
				padding: 30px;
				.bottom-min {
					border: 1px solid #DCDFE6;
					margin-bottom: 20px;
					.right-actions {
						/* max-width: 160px; */
						height: 100%;
						padding: 20px 10px;
						border-left: 1px solid #DCDFE6;
						li {
							margin-bottom: 15px;
						}
						@media screen and (max-width: 1710px) {
							font-size: 12px;
						}
						.span-item {
							color: #409eff;
							cursor: pointer;
							&:hover {
								text-decoration: underline;
							}
							.el-icon-collection,
							.el-icon-document-copy {
								color: #409eff;
							}
						}
					}
					.chart-show-cont {
              padding: 0 160px 0 120px;
              position: relative;
							min-height: 400px;
              .chart-title {
                font-size: 16px;
                font-weight: normal;
                text-align: center;
                margin-bottom: 10px;
              }
              .chart-author {
                font-size: 14px;
                color: #333;
                position: absolute;
                bottom: 0;
                right: 50px;
              }
              .chartWrapper {
                position: relative;
                .range-cont {
                  position: absolute;
                  top: 13%;
                  .min-data-input {
                    width: 60px;
                    display: block;
                  }
                  &.left {
                    left: -80px;
                  }
                  &.right {
                    right: -65px;
                  }
                  &.rightTwo {
                    right: -130px;
                  }
                }
              }
          }
				}
			}

			.chart-list-cont {
				color: #333;
				.el-card .el-card__header,
				.el-card__body {
					padding: 10px;
				}

				.chartList-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 {
						position: relative;
						.item-top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 16px;
							font-weight: 600;
						}
						.chart-img {
							width: 100%;
							height: 230px;
							object-fit: contain !important;
							cursor: pointer;
						}
						.item-bottom {
							margin-top: 10px;
							display: flex;
							justify-content: space-between;
							font-size: 12px;
							color: #666;
							.collected {
								color: #f00;
								cursor: pointer;
							}
							.join_txt {
								color: #409eff;
								cursor: pointer;
							}
						}
					}
				}
				.nodata {
					text-align: center;
				}
			}
		}
		
		@media screen and (min-width: 1711px){
			.min-data-input {
				margin-top: 360px;
			}
		}
		@media screen and (max-width: 1710px){
			.min-data-input {
				margin-top: 290px;
			}
		}
	}
}
</style>

<style lang="scss">
.comodity-chart-container {
	.label-input .el-input__inner {
		height: 25px;
		line-height: 25px;
		padding: 0 10px;
	}

	.range-cont .el-input__inner {
		padding: 0 3px;
	}

	.el-tree__drop-indicator{
		height:3px;
		background-color:#409EFF;
	}
	.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;
	}
}
</style>