<template>
	<div class="dataSheet-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="goAddSheetHandle(1)">添加Excel表格</el-button>

						<el-dropdown  @command="goAddSheetHandle">
							<el-button type="primary">
								自定义表格<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="2">数据表格</el-dropdown-item>
								<el-dropdown-item :command="3">混合表格</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
				</div>
				<div class="search-cont">
					<el-select
						v-model="search_txt"
						ref="searchRef"
						:filterable="!search_txt"
						remote
						clearable
						placeholder="表格名称"
						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.ExcelInfoId"
							:label="item.ExcelName"
							:value="item.ExcelInfoId"
						>
						</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.ExcelClassifyName }}</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.ExcelInfoId"
								/>
								<img
									slot="reference"
									src="~@/assets/img/set_m/del.png"
									alt=""
									style="width: 14px; height: 14px"
									@click.stop="removeNode(node, data)"
									v-if="!data.ExcelInfoId"
								/>
							</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="sheet-detail-wrapper" v-if="select_id">
					<div class="detail-top">
						<span class="author">作者：{{sheetDetailInfo.SysUserRealName}}</span>
						<el-input
								ref="sheetEditTitRef"
								style="width: 400px;"
								placeholder="请输入表格名称"
								class="label-input"
								v-model="sheet_title"
								v-if="sheetDetailInfo.isEditTit"
								@blur="changeValue(sheetDetailInfo,'edit-tit')"
							/>
						<span 
							class="sheet-name" 
							@click="editNodeLabel(sheetDetailInfo,'edit-tit')" 
							v-else
						>
							{{sheetDetailInfo.ExcelName}}
							<i class="el-icon-edit" v-if="sheetDetailInfo.Source===1"/>
						</span>
						<ul class="action-ul">
							<li class="editsty" @click="saveHandle" v-if="sheetDetailInfo.Source===1&&sheetDetailInfo.Button.OpButton">保存</li>
							<template v-if="[2,3].includes(sheetDetailInfo.Source)">
								<li class="editsty" @click="goEditHandle" v-if="sheetDetailInfo.Button.OpButton">编辑</li>
								<li class="editsty" @click="refreshSheet" v-if="sheetDetailInfo.Button.RefreshButton">刷新</li>
								<li class="editsty" @click="saveOtherHandle" v-if="sheetDetailInfo.Button.CopyButton">另存为</li>
							</template>
							<li class="editsty" @click="downloadExcel(sheetDetailInfo)">下载</li>
							<li class="deletesty" v-if="sheetDetailInfo.Button&&sheetDetailInfo.Button.DeleteButton" @click="delSheetHandle(sheetDetailInfo,'del')">删除</li>
						</ul>
					</div>

					<!-- 表格 -->
					<div class="sheet-wrap">
						<Sheet 
							ref="sheetRef"
							v-if="sheetDetailInfo.Source === 1"
							:option="sheetDetailInfo.Content"
							:sheetInfo="{
								ExcelInfoId: sheetDetailInfo.ExcelInfoId,
								ExcelName: sheetDetailInfo.ExcelName,
								ExcelClassifyId: sheetDetailInfo.ExcelClassifyId
							}"
						/>

						<!-- 自定义表格  -->
						<CustomTable
							v-else-if="sheetDetailInfo.Source === 2"
							:sheetType="sheetDetailInfo.ExcelType"
							:disabled="true"
							ref="customTableRef"
						/>

						<MixedTable 
							v-else-if="sheetDetailInfo.Source === 3"
							:disabled="true"
							ref="mixedTableRef"
						/>
					</div>
				</div>

				<!-- 列表 -->
				<div class="sheet-list-cont" v-else>
          <span>共{{ sheet_total }}张表格</span>
          <div
            class="sheetlist-wrapper"
            ref="listRef"
            @scroll="loadMoreHandle"
          >
						<el-col
							:span="6"
							style="margin-bottom: 20px; padding-right: 20px"
							v-for="cell in sheetList"
							:key="cell.ExcelInfoId"
						>
							<el-card class="sheet-item">
								<div slot="header" class="item-top">
									<span class="text_oneLine">{{ cell.ExcelName }}</span>
								</div>
								<img
									:src="cell.ExcelImage"
									alt=""
									class="chart-img"
									:height="imgHeight"
									@click="detailShowHandle(cell)"
								/>
								<div class="item-bottom">
									<span>创建时间: {{ cell.CreateTime.slice(0,10) }}</span>
									<div>
										<span class="editsty" style="margin-right: 10px" @click="downloadExcel(cell)">下载</span>
										<span class="deletesty" @click="delSheetHandle(cell,'del-list')">删除</span>
									</div>
								</div>
							</el-card>
						</el-col>
          </div>
          <div v-if="!sheet_total" class="nodata">
            <img
              src="~@/assets/img/data_m/table_no.png"
              alt=""
              style="
                display: block;
                width: 140px;
                height: 148px;
                margin: 10% auto 0;
              "
            />
            暂无表格
          </div>
        </div>
			</div>
		</div>


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

		<!-- 表格另存 -->
		<m-dialog
      :show.sync="isSaveOther"
      width="650px"
      title="另存为"
      @close="cancelSaveOther"
    >
      <div style="padding-left:80px">
        <el-form
          ref="formRef"
          label-position="left"
          hide-required-asterisk
          label-width="80px"
          :model="saveOtherForm"
          :rules="saveOtherFormRule"
        >
          <el-form-item label="表格名称" prop="name">
						<el-input
							v-model="saveOtherForm.name"
							style="width: 80%"
							placeholder="请输入表格名称"
						/>
          </el-form-item>
          <el-form-item label="表格分类" prop="classify">
						<el-cascader
							v-model="saveOtherForm.classify"
							:options="classifyOptions"
							:props="{
								label: 'ExcelClassifyName',
								value: 'ExcelClassifyId',
								children: 'Children',
								emitPath: false
							}"
							class="sheet-classify-cascader"
							style="width: 80%"
							placeholder="请选择所属分类"
						/>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex;justify-content: center;margin-top:30px">
        <el-button
          type="primary"
          style="margin-right: 60px"
          @click="saveCopyOther"
          >保存</el-button
        >
        <el-button type="primary" plain @click="cancelSaveOther"
          >取消</el-button
        >
      </div>
    </m-dialog>

	</div>
</template>

<script>
import * as sheetInterface from '@/api/modules/sheetApi.js';
import leftMixin from './mixins/classifyMixin';
import mDialog from '@/components/mDialog.vue';
import classifyDia from './components/sheetClassifyDia.vue';
import Sheet from './components/SheetExcel.vue';
import { getSheetImage } from './common/option';
import CustomTable from './components/CustomTable.vue';
import MixedTable from './components/MixedTable.vue';
export default {
	name:'',
	components: { mDialog,classifyDia,Sheet,CustomTable,MixedTable },
	mixins:[ leftMixin ],
	computed: {
		downExcelFileUrl() {
			let url = `${process.env.API_ROOT}/datamanage/excel_info/table/download?${localStorage.getItem("auth")}`
			return url;
		},
		classifyOptions () {
			let options = this.treeData.map(_ =>({ 
				ExcelClassifyId: _.ExcelClassifyId,
				ExcelClassifyName: _.ExcelClassifyName
			}))

			return options
		}
	},
	data () {
		return {
			showData: false,
			search_txt: '',
			searchOptions:[],
			isSlideLeft: false,//左侧分类收起

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

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

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

			/* 表格列表 */
			publicHaveMove: true,//是否还有列表数据
			sheetList: [],
			sheet_total: 0,
			sheet_page: 1,
			sheet_pages_size: 16,
			imgHeight: 196,

			/* 另存为 */
			isSaveOther: false,
			saveOtherForm: {
				name: '',
				classify: ''
			},
			saveOtherFormRule: {
				name:[
					{ required: true, message: '表格名称不能为空', trigger: 'blur' },
				],
				classify:[
					{ required: true, message: '表格分类不能为空', trigger: 'blur' },
				],
			}
		};
	},
	watch: {
		/* 设置动态右侧区域宽度 */
    isSlideLeft(newval) {
			this.select_id && this.$refs.sheetRef&&this.$refs.sheetRef.init()
			this.$nextTick(() => {
				this.reloadRightWid();
			});
    },
		/* 表格id */
		select_id(newval) {
			newval && this.getDetailHandle()
		},

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

		/* 搜索关键词 */
		search_txt(newval) {
			if(newval) {
				let search_obj = this.searchOptions.find(_ => _.ExcelInfoId === 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: {

		/* 添加表格 */
		goAddSheetHandle(type) {
			if(!this.treeData.length) return this.$message.warning('请先添加表格分类');
			let path = {
				1: '/addsheet',
				2: '/addCustomSheet',
				3: '/addMixedSheet'
			}
			const { href } = this.$router.resolve({ path: path[type] });
      window.open(href, '_blank');
		},

		/* 获取表格分类 */
		getTreeData(params=null) {
			sheetInterface.classifyList().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) {
			if (query) {
        /* 查找列表 */
        sheetInterface
          .sheetList({
            Keyword: query,
            CurrentIndex: 1,
						PageSize: 10000
          })
          .then((res) => {
            if (res.Ret !== 200) return
            this.searchOptions = res.Data.List || [];
          });
      } else {
        this.searchOptions = [];
      }
		},

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

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

    /* 编辑节点 */
    editNode(node, { ExcelClassifyName,ExcelClassifyId }) {

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

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

			const { Data } = await sheetInterface.classifyDelCheck({ ExcelClassifyId,ExcelInfoId })

			const { DeleteStatus } = Data;

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

    },

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

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

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

					//删除封面
					if(type === 'del-list') {
						let index = this.sheetList.findIndex(_ => _.ExcelInfoId === ExcelInfoId)
						this.sheetList.splice(index,1)
					}
        });
    },

		/* 分类成功回调 */
		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, ExcelInfoId }) {
        let params = {
          code: UniqueCode,
          id: ExcelInfoId
        };
        this.selectCurrentNode(params);
				this.select_classify = 0;
		},

		/* 下载数据 */
		downloadExcel(cell) {
			const { Source,FileUrl,ExcelInfoId,ExcelName } = cell;
			let  value =  '';			
			if(Source===1) {
				value = FileUrl;

			}else if ([2,3].includes(Source)) {
				value = `${this.downExcelFileUrl}&ExcelInfoId=${ExcelInfoId}`
			}

			if(!value) return

			this.downLoad(value,ExcelName)

			// let downDom = document.getElementById("sheet-download");
			// if(!downDom){
			// 	downDom = document.createElement("iframe");
			// 	downDom.style.display = "none";
			// 	downDom.id = "sheet-download";
			// 	downDom.name = this.sheetDetailInfo.ExcelName;
			// 	document.body.appendChild(downDom);
			// }	
			// downDom.src = value;

		},

		downLoad(url,filename) {

			const request = new window.XMLHttpRequest();
			request.open('GET', url, true);
			request.responseType = 'blob';
			request.onload = () => {
					const url = window.URL.createObjectURL(request.response);
					const a = document.createElement('a');
					a.href = url;
					a.target = '_blank'
					a.download = filename;
					a.style.display = 'none'
					document.body.append(a)
					a.click();
			};
			request.send();
		},

		/* 保存表格 */
		saveHandle: _.debounce(async function() {
			luckysheet.exitEditMode();
      let data = luckysheet.getAllSheets()[0];
			if(!data.celldata.length) return this.$message.warning('请输入表格内容')

			this.loading = this.$loading({
				target:'.dataSheet-container',
				lock: true,
				text: '保存中...',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.6)'
			});

			let img = getSheetImage(data);
			const form  = new FormData();
			form.append('Image', img);
			const { Data } = await sheetInterface.uploadImg(form)

			data.luckysheet_select_save = [];
			const { ExcelInfoId,ExcelName,ExcelClassifyId } = this.sheetDetailInfo;
			const res = await sheetInterface.sheetEdit({
				ExcelInfoId,
				ExcelName,
				ExcelClassifyId,
				ExcelImage: Data.ResourceUrl,
				Content: JSON.stringify(data)
			})
			this.loading.close();
			if(res.Ret !==200) return
			this.$message.success('保存成功')
			this.getTreeData();

			this.getDetailHandle();

		},300),

		/* 获取表格列表 */
		getPublicList() {
			sheetInterface.sheetList({
				CurrentIndex: this.sheet_page,
				PageSize: this.sheet_pages_size,
        ExcelClassifyId: this.select_classify || 0,
			}).then(res => {
				if(res.Ret !== 200) return

				this.publicHaveMove = res.Data
            ? this.sheet_page < res.Data.Paging.Pages
            : false;
          this.sheetList = res.Data
            ? this.sheet_page === 1
              ? res.Data.List
              : [...this.sheetList, ...res.Data.List]
            : [];
        this.sheet_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.sheet_page++;
				this.getPublicList();
			}
		},300),

		/* 获取表格详情 */
		getDetailHandle() {
			sheetInterface.sheetDetail({
				ExcelInfoId: this.select_id
			}).then(res => {
				if(res.Ret !== 200) return

				this.sheetDetailInfo = res.Data;

				this.$nextTick(() => {
					this.sheetDetailInfo.Source===1&&this.$refs.sheetRef.init();

					this.sheetDetailInfo.Source===2 && this.$refs.customTableRef.initSheetData(res.Data.TableData)

					this.sheetDetailInfo.Source===3 && this.$refs.mixedTableRef.initData(res.Data.TableData)
				})
			})
		},

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

		/* 编辑 */
		goEditHandle() {
			let path = {
				2: '/addCustomSheet',
				3: 'addMixedSheet'
			}
			const { href } = this.$router.resolve({ 
				path: path[this.sheetDetailInfo.Source],
				query: { id:this.sheetDetailInfo.ExcelInfoId } 
			});
      window.open(href, '_blank');
		},

		/* 刷新表格 */
		 refreshSheet: _.debounce(async function() {
			const res = await sheetInterface.refreshCustomSheet({ ExcelInfoId:this.sheetDetailInfo.ExcelInfoId })

			if(res.Ret !== 200) return
			this.$message.success('刷新成功')
			this.getDetailHandle();
		},300),

		/* 表格另存为 */
		saveOtherHandle() {
			this.saveOtherForm.name = this.sheetDetailInfo.ExcelName+'(1)'
			this.isSaveOther = true;
		},

		cancelSaveOther() {
			this.$refs.formRef.resetFields();
			this.saveOtherForm = {
				name: '',
				classify: ''
			}
			this.isSaveOther = false;
		},

		/* 另存为 */
		async saveCopyOther() {
			await this.$refs.formRef.validate();
			let { classify,name } = this.saveOtherForm;

			const res = await sheetInterface.copyExcel({
				ExcelInfoId: this.sheetDetailInfo.ExcelInfoId,
				ExcelName: name,
				ExcelClassifyId: classify
			})

			if(res.Ret !== 200) return  

			this.$message.success('保存成功')
			this.cancelSaveOther();
			this.getTreeData();
		},

		/* 重绘右侧区域宽度 */
    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;

			!this.select_id && this.$nextTick(() => {
				this.imgHeight = $('.chart-img')[0].offsetWidth / 1.64 > 150 ? $('.chart-img')[0].offsetWidth / 1.64 : 150;
			})

    },
	},
	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;
.dataSheet-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%;
			.sheet-detail-wrapper {
				height: 100%;
				border: 1px solid #ececec;
				border-radius: 4px;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
				overflow: auto;
				background: #fff;
				.detail-top {
					padding: 20px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #ececec;
					.sheet-name { 
						font-size: 17px; cursor: pointer;
						max-width: 450px;
						&:hover {
							text-decoration: underline;
						}
					}
					.action-ul {
						display: flex;
						li { margin: 0 10px; }
					}
				}
				.sheet-wrap {
					position: relative;
					height: calc(100vh - 190px);
					padding: 15px;
					/* min-height: 500px; */
				}
			}

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

				.sheetlist-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 {
						.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;
				}
			}
		}

	}
}
</style>

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

	.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;
	}
}
.sheet-classify-cascader .el-input {
	width: 100%;
}
</style>