<template>
	<div class="dataEntry-container">
		<div class="data-top-container">
			<!-- 筛选条件 -->
			<el-form :inline="true" class="elForm">
				<el-form-item style="marginRight:10px;">
						<!-- <el-button type="primary" size="medium" @click="insertData(1)">录入数据</el-button> -->
						<el-button type="primary" size="medium" style="marginRight:10px;" @click="handleImport">导入数据</el-button>
						<a 
						:href="`${exportDataurl}?StartDate=${exportParams.start_date}&EndDate=${exportParams.end_date}&Mobile=${exportParams.mobile}`"
						download>
							<el-button type="primary" plain size="medium" style="marginRight:10px;">导出数据</el-button>
						</a>
						<!-- <el-button type="primary" plain size="medium" @click="exportClick(1)" style="marginRight:10px;" :loading="btnload">隆众石化数据导出</el-button>
						<el-button type="primary" plain size="medium" @click="exportClick(2)" :loading="btnload2">隆众价格数据导出</el-button> -->
				</el-form-item>
			</el-form>
			<!-- 品种列表 -->
			<ul class="classifyList" v-if="roleClassifyList.length">
				<li v-for="item in roleClassifyList" :key="item.ClassifyId" :class="{'act':item.ClassifyId === select_classify}" @click="toggleClassify(item)">
					{{item.ClassifyName}} ({{item.Total}})
				</li>
			</ul>
			<!-- 人员列表 -->
			<!-- <ul class="roleList" v-if="roleList.length">
				<li v-for="item in roleList" :key="item.AdminId" :class="{'act':item.AdminId===default_role}" @click="toggleRole(item)">
					{{item.RealName}}({{item.TargetCount}})
				</li>
			</ul> -->
		</div>
		<div class="data-bot-container">
			<!-- 左侧指标表格 -->
			<div style="width:50%;marginRight:5px">
				<el-table
				ref="tableTarget"
				:data="tableTarget" 
				@row-click="chooseTarget"
				:header-cell-style="{height:'59px'}"
				:row-style="{height:'52px'}"
				:empty-text="'暂无指标'"
				height="536"
				highlight-current-row
				border>
					<el-table-column
					prop="TradeCode"
					label="指标ID"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.TradeCode}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="SecName"
					label="指标名称"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.SecName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Frequency"
					label="频度"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.Frequency}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Unit"
					label="单位"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.Unit}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="ModifyDate"
					label="待更新日期"
					align="center">
						<template slot-scope="scope"> 
							<!-- <span>{{scope.row.frequency==='日度'?today:scope.row.modify_date}}</span> -->
							<span>{{scope.row.ModifyDate|formatTime}}</span>
						</template>
					</el-table-column>
					<el-table-column
					prop="Status"
					label="状态"
					align="center">
						<template slot-scope="scope"> 
							<span :style="scope.row.Status==='完成'?'color:#2BA400':'color:red'">{{scope.row.Status}}</span> 
						</template>
					</el-table-column>
					<div slot="empty" style="lineHeight:25px;margin:10px 0;color:#95A9C5;">
						<img src="../../assets/img/data_m/table_no.png" alt="" style="display:block;width:105px;height:68px;margin: auto;">
						<span>暂无指标</span>
					</div>
				</el-table>
			</div>
			<!-- 右侧展示表格 -->
			<div style="width:50%">
				<el-col :span="24" style="height:59px;padding:9px 12px;display:flex;justifyContent:space-between;border:solid 1px #EBEEF5;borderBottom:none;">
					<span></span>
					<el-date-picker
						v-model="date"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="dateChange"
						value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-table 
				:data="tableData"
				height="476"
				v-loading="isShowloadding"
				@cell-dblclick="clickCell"
				element-loading-text="数据加载中..."
				:default-sort = "{prop: 'date', order: 'descending'}"
				:header-cell-style="{background:'#fff!important'}"
				border>
					<!-- 数据表格 -->
					<el-table-column
					prop="Dt"
					label="日期"
					sortable
					align="center">
						<template slot-scope="scope">
							<el-date-picker
							style="width:140px"
							ref="editDate" 
							type="date" 
							placeholder="录入日期" 
							v-model="scope.row.Dt" 
							value-format="yyyy-MM-dd"
							v-if="scope.row.edit_date"
							@blur="changeDate(scope.row)"></el-date-picker>
							<template v-else>
								<span style="position: relative;">
									{{scope.row.Dt |formatTime}}
									<span v-if="scope.$index === 0 && page_no==1" class="new-tag">新</span>
								</span> 
							</template>
						</template>
					</el-table-column>
					<!-- <el-table-column
					prop="SEC_NAME"
					label="指标名称"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.SEC_NAME}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="frequency"
					label="频度"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.frequency}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="classify_name"
					label="分类"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.classify_name}}</span> </template>
					</el-table-column> -->
					<el-table-column
					prop="Close"
					label="值"
					align="center">
						<template slot-scope="scope">
							<el-input 
							ref="editVal"
							style="width:140px"
							placeholder="请输入值"
							v-if="scope.row.edit_val" 
							v-model="scope.row.Close"
							@blur="changeValue(scope.row)"></el-input>
							<span v-else>{{scope.row.Close}}</span>
							<!-- <span>{{scope.row.Close}}</span> -->
						</template>
					</el-table-column>
					<!-- <el-table-column
					prop="UNIT"
					label="单位"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.UNIT}}</span> </template>
					</el-table-column> -->
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;">
								<!-- <span class="editsty" @click="editHandle(scope.row)" style="marginRight:20px;">编辑</span> -->
								<span class="editsty" @click="addHandle(scope.row)" >插入</span>
								<span class="deletesty" @click="delHandle(scope.row)" v-if="total!=0" style="marginLeft:20px;">删除</span>
							</div>
						</template>
					</el-table-column>
					<div  slot="empty" style="lineHeight:25px;margin:10px 0;color:#95A9C5;">
						<img src="../../assets/img/data_m/table_no.png" alt="" style="display:block;width:105px;height:68px;margin: auto;" v-if="tableTarget.length">
						<span>暂无搜索结果</span>
					</div>
				</el-table>
				<el-col :span="24" class="toolbar">
					<el-pagination 
					layout="total,prev,pager,next,jumper" 
					background
					:current-page="page_no"
					@current-change="handleCurrentChange"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					:total="total" 
					style="float:right;">
					</el-pagination>
				</el-col>
			</div>  
		</div>
		<!-- 导入数据弹窗 -->
		<insert-data
		:isShowinsert="isShowinsert"
		@cancelHandle="cancelHandle"
		@importSuccess="importSuccess">
		</insert-data>
	</div>
</template>

<script>
import insertData from './components/insertData';
import { dataInterence,downloadFile,dataAuthInterface } from 'api/api.js';
import http from "@/api/http.js";
export default {
	name: "dataList",
	data() {
		return {
			today:http.dateFormatter(new Date(),false),
			exportDataurl:process.env.API_ROOT+'/entry/export/dataList',//导出数据
			exportLzurl:process.env.API_ROOT+'/entry/export/longzhong',//隆众石化数据导出接口
			exportLzprice:process.env.API_ROOT+'/entry/export/longzhong/price',//隆众价格数据导出接口
			exportLzapi:process.env.API_ROOT+'/entry/export/longzhong/survey',//隆众数据导出接口
			dialogTitle:'录入数据',
			tabs:['录入数据','指标管理'],
			tab_act:0,
			isShowloadding:false,//loading
			classifyList:[],//分类列表
			fillterClassifyList:[],//筛选分类列表
			classifyProps:{
				label: "classify_name",
				value: "classify_id",
				children: "child"
			},
			frequencyList:[{
				value: '日度',
				label: '日度',
				},
				{
				value: '周度',
				label: '周度',
				},
				{
				value: '月度',
				label: '月度',
				}
			],//频度列表
			tableData: [],
			total:1,//总条数
			page_no:1,//当前页
			pageSize:8,//每页条数
			date:'',
			frequency:'',//频度
			classify_id:0,//分类id
			search_txt:'',//关键字搜索
			isShowdialog:false,//显示新增指标
			isShowinsert:false,//导入弹窗
			formData:{
				type:"宏观",
				date:http.dateFormatter(new Date(),false),//日期
				target:'',//指标
				value:'',//值
				frequency:'日度',//频度
				unit:'',//单位
				targetName:'',//指标名称
				trade_code:'',//指标标识
				up_week:'',//更新时间周
				up_time:'',//更新时间
				up_day:'',//更新时间日
			},//指标弹窗数据
			editFormData:{},//修改表单数据
			isShowedit:false,//显示编辑弹窗
			editTitle:'修改录入数据',
			is_editData:false,//是否是编辑数据
			edit_dataId:'',//编辑分类id
			edit_old_date:'',//修改数据的老日期,
			tableTarget:[],//指标表格
			roleList:[],//研究员列表
			default_role:'',//默认角色id
			default_mobile:'',//默认电话
			default_target:'',//默认指标
			old_date:'',
			isDateChange:false,//标识筛选日期 非清空
			btnload:false,
			btnload2:false,
			roleClassifyList:[],//账号品种权限
			select_classify:'',//选中的分类
		};
	},
	components: {
		// addtarget,
		insertData,
		// editTarget
	},
	computed:{
		//导出参数
		exportParams() {
			return {
				start_date: this.date ? this.date[0] : '',
				end_date: this.date ? this.date[1] : '',
				mobile:this.default_mobile || ''
				// frequency: this.frequency,
				// classify_id:this.classify_id,
				// key_word: this.search_txt,
			}
		},
	},
	watch:{
		// 切换指标时
		default_target() {
			this.page_no = 1;//当前页
			this.getTableData();
		},
		default_mobile() {
			this.getTarget();
		},
		select_classify() {
			this.getTarget();
		}
	},
	methods: {
		/* 隆众数据导出 */
		exportClick(type) {
			// if(type == 1) {
			// 	this.btnload = true;
			// 	var iframe = document.createElement("iframe")
			// 	iframe.style.display = "none";
			// 	iframe.src = this.exportLzurl;
			// 	document.body.appendChild(iframe);
			// 	setTimeout(()=> {
			// 		this.btnload = false;
			// 	},10000)
			// }else {
			// 	this.btnload2 = true;
			// 	var iframe = document.createElement("iframe")
			// 	iframe.style.display = "none";
			// 	iframe.src = this.exportLzprice;
			// 	document.body.appendChild(iframe);
			// 	setTimeout(()=> {
			// 		this.btnload2 = false;
			// 	},10000)
			// }
				this.btnload = true;
				var iframe = document.createElement("iframe")
				iframe.style.display = "none";
				iframe.src = this.exportLzapi;
				document.body.appendChild(iframe);
				setTimeout(()=> {
					this.btnload = false;
				},5000)
		},
		// 隐藏弹框
		cancelHandle(bol) {
			if(bol === 1) {
				this.isShowdialog = false;
				this.$refs.Atarget.$refs.formD.resetFields();
				this.formData = {
					type:'宏观',
					date:http.dateFormatter(new Date(),false),//日期
					target:'',//指标
					value:'',//值
					frequency:'日度',//频度
					unit:'',//单位
					targetName:'',//指标名称
					trade_code:'',//指标标识
					up_week:'',//更新时间周
					up_time:'',//更新时间
					up_day:'',//更新时间日
				}
			}else {
				this.isShowinsert = false;
			}
		},
		// 获取数据表格
		getTableData(tab = 0) {
			//取分类id
			let classify_id;
			if (this.classify_id instanceof Array) {
				let arr = JSON.parse(JSON.stringify(this.classify_id));
				classify_id = arr.pop();
			}else {
				classify_id = this.classify_id
			}
			this.classify_id = classify_id;
			let parmas = {
				CurrentIndex: this.page_no,
			   PageSize: this.pageSize,
				StartDate: this.date ? this.date[0] : '',
				EndDate: this.date ? this.date[1] : '',
				Frequency: this.frequency,
				ClassifyId:classify_id,
				KeyWord : this.search_txt,
				TradeCode:this.default_target /* 指标筛选接口 */
			}
			if(this.default_target) {
				//获取数据表格
				this.isShowloadding = true;
				dataInterence.getDatalist(parmas).then(res => {
					
					if(res.Ret===200) {
						let arr = [];
						if(res.Data.List.length) {
							res.Data.List.forEach(item => {
								item.ModifyTime = item.ModifyTime.substr(0,10)
								let obj = {
									...item,
									edit_val:false,
									edit_date:false
								}
								arr.push(obj)
							})
							this.tableData = arr;
						
						}else {
							this.tableData = [];
							if(!this.isDateChange) {
								let insert_obj = {
									Close:'',
									Dt:'',
									edit_val:true,
									edit_date:true
								}
								this.tableData.push(insert_obj)
							}
						}
						this.total = parseInt(res.Data.Paging.Totals);
					}
					this.isShowloadding = false;
				})
			}else {
				this.tableData = [];
			}
		},
		/* 获取账号关联品种 */
		getOwnClassify() {
			dataAuthInterface.classifyList().then(res => {
				if(res.Ret === 200) {
					this.roleClassifyList = res.Data || [];
					this.select_classify = this.roleClassifyList.length ? this.roleClassifyList[0].ClassifyId : '';
				}
			})
		},
		// 导入数据
		handleImport() {
			this.isShowinsert = true;
		},
		// 导入数据成功
		importSuccess() {
			this.isShowinsert = false;
			this.getTableData();
		},
		// 页码改变
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},
		// 页数改变
		handleSizeChange(size) {
			this.pageSize = size;
			this.getTableData();
		},
		// 日期改变
		dateChange(e) {
		
			this.page_no = 1;//当前页
			if(e) { //标识日期改变
				this.isDateChange = true;
			}else {
				this.isDateChange = false;
			}
			this.getTableData();
		},
		// 新增成功
		addOver(type) {
			// this.tab_act = 0;
			// this.isShowdialog = false;
			this.$refs.Atarget.$refs.formD.resetFields();//重置校验
			this.formData = {
				// type:'宏观',
				type:type,
				date:http.dateFormatter(new Date(),false),//日期
				target:'',//指标
				value:'',//值
				frequency:'日度',//频度
				unit:'',//单位
				targetName:'',//指标名称
				trade_code:'',//指标标识
				up_week:'',//更新时间周
				up_time:'',//更新时间
				up_day:'',//更新时间日
			}
			this.getTableData();
		},
		// 编辑中修改分类
		changeEditForm(name) {
			this.$set(this.editFormData,'type',name);
		},
		// 编辑
		editHandle(item) {
			
			this.isShowedit = true;
			this.edit_dataId = item.ClassifyId;
			if(this.tab_act === 0) {
				this.editTitle="修改录入数据";
				//编辑数据
				this.editFormData = {
					type:item.ClassifyName,
					date:item.Dt,
					target:item.SecName,
					value:item.Close,
					trade_code:item.TradeCode
				}
				this.edit_old_date = item.Dt;
			}
		},
		// 编辑数据成功
		editDataOver(tab=0) {
			this.tab = tab;
			this.isShowedit = false;
			this.getTableData(tab);
		},
		// 取消编辑
		cancelEdit() {
			this.isShowedit = false;
		},
		// 删除
		delHandle(item) {
		
			if(item.Close!=='' && item.Dt) {
				this.$confirm('是否确认删除该条数据?','提示',{
					type:'warning'
				}).then(() => {
					dataInterence.delData({
						TradeCode:item.TradeCode,
						CreateDate:item.Dt
					}).then(res =>{
							if( res.Ret===200 ){
								this.$message.success('删除成功!');
								this.getTableData();
							}else {
								this.$message(res.msg)
							}
						});
					}).catch(() => {});
			}else {
				let index = this.tableData.indexOf(item)
				this.$confirm('该行未录入数据,是否确认删除该行?','提示',{
					type:'warning'
				}).then(() => {
					this.tableData.splice(index,1)
				}).catch(() => {});
			}
		},
		// 获取研究员列表
		getResearcherList() {
			dataInterence.getResearcher().then(res => {
				if(res.Ret===200) {
					this.roleList = res.Data.List || [];
						this.default_role = res.Data.List[0].AdminId;
						this.default_mobile = res.Data.List[0].Mobile;
				}		
			})
		},
		// 获取指标列表
		getTarget() {
			dataInterence.getTarget({
				Mobile:this.default_mobile||'',
				ClassifyId : this.select_classify || 0
			}).then(res => {
				if(res.Ret===200) {
					this.tableTarget = res.Data.List?res.Data.List:[];
					this.default_target  = res.Data.List&&res.Data.List.length?res.Data.List[0].TradeCode:'';//默认指标
					this.$nextTick(()=> {
						this.$refs.tableTarget.setCurrentRow(this.tableTarget[0])
					})
				}
			})
		},
		// 插入行
		addHandle(e) {
		
			// 新增数据 清空old_date
			this.old_date = '';
			let index  = this.tableData.indexOf(e);
			let insert_obj = {
				Close:'',
				Dt:'',
				edit_val:true,
				edit_date:true
			}
			if(e.Close!=='' && e.Dt) {
				this.tableData.splice(index,0,insert_obj)
			}else {
				this.$message.warning("录入日期和录入值不能为空!");
			}
		},
		// 双击单元格
		clickCell(e,e2) {
			
			// 编辑数据
			// 获取修改之前的日期
			this.old_date = e.Dt;
			if(e2.label === '值') {
				e.edit_val = true
				setTimeout(()=> {
					this.$refs.editVal.focus();
				},200)
			}else if(e2.label === '日期') {
				e.edit_date = true
				setTimeout(()=> {
					this.$refs.editDate.focus();
				},200)
			}
		},
		// 改变录入值
		changeValue(e,val) {
			
			if(e.Close) {
				e.edit_val = false
			}
			this.dataHandle(e)
		},
		// 改变录入日期
		changeDate(e,val) {
			if(e.Dt) {
				e.edit_date = false
			}
			this.dataHandle(e)
		},
		// 新增或修改数据
		dataHandle(e) {
			if(!e.Dt) {
				// this.$message.warning("录入日期不能为空!");
			}else if(!e.Close) {
				// this.$message.warning("录入值不能为空!");
			}else {
				// 检查录入日期数据是否已存在
					dataInterence.checkData({
						TradeCode:this.default_target,
						CreateDate:e.Dt
					}).then(res => {
						if(res.Data.Status==0) {
							dataInterence.editData({	
								TradeCode:this.default_target,
								CreateDate:e.Dt,
								Close:e.Close,
								OldCreateDate:this.old_date
							}).then(res => {
								if(res.Ret===200) {
									this.$message({
										message: '插入成功',
										type: 'success'
									});
									this.page_no = 1;
									this.getTableData();
								}else {
									this.$message({
										message: res.msg,
										type: 'warning'
									});
								}
							})
						}else if(res.Data.Status==1) {
							this.$confirm('该日期已存在数据值'+res.Data.Close+'，确认修改?','提示',{
								type:'warning'
							}).then(() => {
								//编辑数据
								dataInterence.editData({
									TradeCode:this.default_target,
									CreateDate:e.Dt,
									Close:e.Close,
									OldCreateDate:this.old_date
								}).then(res => {
									if(res.Ret===200) {
										this.$message({
											message: '修改成功',
											type: 'success'
										});
										this.page_no = 1;
										this.getTableData();
									}else {
										this.$message({
											message: res.msg,
											type: 'warning'
										});
									}
								})
							})
						}else {
							console.log(res.msg)
						}
					})
			}
		},
		// 切换人员
		toggleRole(item) {
			this.default_role = item.AdminId;
			this.default_mobile = item.Mobile;
		},
		toggleClassify(item) {
			this.select_classify = item.ClassifyId;
		},
		// 切换指标
		chooseTarget(e) {
			this.default_target = e.TradeCode;
		}
	},
	created() {
		// this.getResearcherList();
		this.getOwnClassify();

	},
	mounted() {
	}
};
</script>
<style lang="scss">
.dataEntry-container {
	background: #fff;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	.data-top-container {
		padding: 35px 40px 15px;
		box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
		.type-list {
			max-width: 100px;
		}
		.rigth-cont {
			margin: 0 auto;
		}
		.bot-handle {
			margin: 80px auto 0;
		}
		.classifyList {
			display: flex;
			flex-wrap: wrap;
			// margin-top: 18px;
			color: #707070;
			font-size: 15px;
			margin-top: 20px;
			li {
				width: 88px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				margin-right: 30px;
				margin-bottom: 10px;
				transition: all 0.3s;
				cursor: pointer;
				&:last-child {
					margin-right: 0;
				}
				&.act {
					border-color: #409EFF;
					color: #409EFF;
				}
			}
		}
		.roleList {
			display: flex;
			flex-wrap: wrap;
			// margin-top: 18px;
			color: #707070;
			font-size: 15px;
			margin-top: 20px;
			li {
				width: 88px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				margin-right: 30px;
				margin-bottom: 10px;
				transition: all 0.3s;
				cursor: pointer;
				&:last-child {
					margin-right: 0;
				}
				&.act {
					border-color: #409EFF;
					color: #409EFF;
				}
				&:hover {
					border-color: #409EFF;
					color: #409EFF;
				}
			}
		}
	}
	.data-bot-container {
		padding: 30px 40px 40px;
		display: flex;
		.el-table__body tr.current-row>td{
			background-color: #DEEDFF !important;
			color: #666;
		}
		/*修改滚动条样式*/
		div::-webkit-scrollbar{
			width:10px;
			height:10px;
		}
		div::-webkit-scrollbar-track{
			background: rgb(239, 239, 239);
			border-radius:2px;
		}
		div::-webkit-scrollbar-thumb{
			background: #ccc;
			border-radius:10px;
		}
		div::-webkit-scrollbar-thumb:hover{
			background: #888;
		}
		div::-webkit-scrollbar-corner{
			background: #179a16;
		}
		/**/
		.tabs-cont {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 60px;
			color: #1F2E4D;
			font-size: 16px;
			.tab-item {
				width: 20%;
				text-align: center;
				cursor: pointer;
				padding-bottom:10px;
				transition: all 0.3s;
				border-bottom: 2px solid transparent;
				&.act {
					border-bottom: 2px solid #5882EF;
					color: #5882EF;
				}
			}
		}
		.new-tag {
			width:22px;
			height:22px;
			border-radius:50%;
			background:#FF1D1D;
			text-align:center;
			line-height:22px;
			color:#fff;
			font-size:13px;
			position:absolute;
			top: 50%;
			transform: translateY(-50%);
			left: -30px;
		}
	}
}
</style>