<template>
	<view class="check-table">
		<view class="check-table-top">
			<view class="dressingTime" @click="startTimeShow = true">{{
			  time
			}}</view>
			<text class="share-square" @click="isExportShow = true"></text>
		</view>
		<view class="check-table-content" v-if="type === '4'">
			<view class="table-content-top">
				<view class="list-content-info" v-for="(item, index) in coumsGas" :key="index" :style="{width: item.width}">
					{{item.name}}
				</view>
			</view>
			<view class="table-content-center">
				<view class="content-center-info" v-for="(item, index) in list" :key="index">
					<view class="center-info" style="width: 160rpx;">
						{{item.deviceTypeName}}
					</view>
					<view class="center-info" style="width: 140rpx;text-align: center;">
						{{item.strength}}
					</view>
					<view class="center-info" style="width: 160rpx;text-align: center;">
						{{item.cell}}
					</view>
					<view class="center-info" style="width: 160rpx;">
						{{item.logtime}}
					</view>
				</view>
			</view>
		</view>
		<view class="check-table-content" v-if="type === '1'">
			<view class="table-content-top">
				<view class="list-content-info" v-for="(item, index) in coumsManhole" :key="index" :style="{width: item.width}">
					{{item.name}}
				</view>
			</view>
			<view class="table-content-center">
				<view class="content-center-info" v-for="(item, index) in list" :key="index">
					<view class="center-info" style="width: 180rpx;">
						{{item.deviceTypeName}}
					</view>
					<view class="center-info" style="width: 160rpx;text-align: center;">
						{{item.descn}}
					</view>
					<view class="center-info" style="width: 160rpx;">
						{{item.logtime}}
					</view>
				</view>
			</view>
		</view>
		<view class="check-table-content" v-if="type === '2'">
			<view class="table-content-top">
				<view class="list-content-info" v-for="(item, index) in coumsLevel" :key="index" :style="{width: item.width}">
					{{item.name}}
				</view>
			</view>
			<view class="table-content-center">
				<view class="content-center-info" v-for="(item, index) in list" :key="index">
					<view class="center-info" style="width: 180rpx;">
						{{item.deviceTypeName}}
					</view>
					<view class="center-info" style="width: 140rpx;text-align: center;">
						{{item.descn}}
					</view>
					<view class="center-info" style="width: 160rpx;text-align: center;">
						{{item.cell}}
					</view>
					<view class="center-info" style="width: 160rpx;">
						{{item.logtime}}
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker
		  :show="startTimeShow"
		  mode="datetime"
		  title="请选择开始时间"
		  v-model="beginTime"
		  :formatter="formatter"
		  @cancel="closeTime"
		  @confirm="confirmTime"
		>
		</u-datetime-picker>
			
		<u-datetime-picker
		  :show="endTimeShow"
		  mode="datetime"
		  title="请选择结束时间"
		  v-model="endTime"
		  :formatter="formatter"
		  @cancel="endTimeShow = false"
		  @confirm="confirmEndTime"
		>
		</u-datetime-picker>
		<u-popup
		  :show="isExportShow"
		  mode="bottom"
		  :round="10"
		  :closeOnClickOverlay="false"
		  @close="close"
		>
		  <view class="popup">
					<view class="title">提示</view>
		    <view class="content">
		      确认将所有的数据导出吗？
		    </view>
		    <view class="footer">
			<button class="allow refuse" @click="isExportShow = false">取消</button>
			<button class="allow" @click="exportQr"> 确认</button>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import { getWelldata, getLiquiddata, getGasdata } from '@/api/check.js'
	export default {
		data() {
			return {
				time: "筛选时间",
				startTimeShow: false, // 开始时间开关
				endTimeShow: false, // 结束时间开关
				lastMonth: '', // 默认开始时间
				isTimeZ: "",
				isTimeQ: "",
				beginTime: Number(new Date()),
				endTime: Number(new Date()),
				isExportShow: false, // 控制导出弹窗
				queryList:{ // 查询条件
					keywords:'',
					deptid: '',
					beginTime: '',
					endTime: '',
					offset: 1,
					limit:9999,
					sort:'',
					order:'logtime'
				},
				coumsGas:[
					{name: '设备信息', width:'160rpx'},
					{name: '燃气浓度(%LEL)', width:'140rpx'},
					{name: '电量(%)', width:'160rpx'},
					{name: '上传时间', width:'160rpx'},
				],
				coumsManhole:[
					{name: '设备信息', width:'160rpx'},
					{name: '状态描述', width:'140rpx'},
					{name: '上传时间', width:'160rpx'},
				],
				coumsLevel:[
					{name: '设备信息', width:'160rpx'},
					{name: '液位值(m)', width:'140rpx'},
					{name: '电量(%)', width:'160rpx'},
					{name: '上传时间', width:'160rpx'},
				],
				list: [],
				type: '' // 控制表格展示
			}
		},
	    async onLoad(option){
		   this.type = option.type
		   this.getList()
		},
		methods: {
		   async getList() { // 获取到数据
				if(this.type === '1'){
			   let res =  await getWelldata(this.queryList)
				this.list = res.rows
				}else if (this.type === '2'){
			   let res =  await getLiquiddata(this.queryList)
				this.list = res.rows
				}else {
			   let res = await getGasdata(this.queryList)
				this.list = res.rows
				}
			},
			// 确认导出
			exportQr() {
			  this.exportClick();
			  this.isExportShow = false;
			},
			// 导出的取消按钮
			close() {
				this.isExportShow = false
			} ,
			//确定选择结束时间
			async confirmEndTime(e) {
			  this.queryList.endTime = await this.shijianc(e.value);
			  this.isTimeZ = await this.yueFen(e.value);
			  this.time = `${this.isTimeQ}${this.isTimeZ}`;
			  this.getList()
			  this.endTimeShow = false;
			},
			//确定选择开始时间
			async confirmTime(e) {
			  this.queryList.beginTime = await this.shijianc(e.value);
			  this.isTimeQ = await this.yueFen(e.value);
			  this.startTimeShow = false;
			  this.endTimeShow = true;
			},
			//取消选择时间
			closeTime() {
			  this.time = "筛选时间";
			  this.startTimeShow = false;
			},
			//确定导出
			async exportClick() {
			  const sessionId = uni.getStorageSync("token");
			  let filePath = `${wx.env.USER_DATA_PATH}/${+new Date()}.xlsx`;
			  let url = ''
			  if(this.type === '1') {
				  url = 'welldata'
			  }else if(this.type === '2') {
				  url = 'liquiddata'
			  }else {
				  url = 'gasdata'
			  }
			  uni.request({
			    url: `https://smartwell.gd.smartlog.work/${url}/export`,
				params:this.queryList,
			    responseType: "arraybuffer",
			    header: {
			      token: sessionId, //自定义请求头信息
			    },
			    success: ({ data }) => {
			      let fm = wx.getFileSystemManager();
			      fm.writeFile({
			        filePath,
			        data,
			        success: (res) => {
			          uni.openDocument({
			            filePath,
			            fileType: "xlsx",
			            showMenu: true,
			          });
			        },
			      });
			    },
			  });
			  this.checkboxList = [];
			},
			//格式化时间
			formatter(type, value) {
			  if (type === "year") {
			    return `${value}年`;
			  }
			  if (type === "month") {
			    return `${value}月`;
			  }
			  if (type === "day") {
			    return `${value}日`;
			  }
			  return value;
			},
			shijianc(time) {
			  let date = new Date(time);
			  let Y = date.getFullYear() + "-";
			  let M =
			    (date.getMonth() + 1 < 10
			      ? "0" + (date.getMonth() + 1)
			      : date.getMonth() + 1) + "-";
			  let D =
			    (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			  let h =
			    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
			  let m =
			    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
			    ":";
			  let s =
			    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			  return Y + M + D + h + m + s;
			},
			yueFen(time) {
			  let date = new Date(time);
			  let M =
			    (date.getMonth() + 1 < 10
			      ? "0" + (date.getMonth() + 1)
			      : date.getMonth() + 1) + "-";
			  let D =
			    (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			  return M + D;
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.list-content-info {
		text-align: center;
	}
	.check-table-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 50rpx;
		margin: 20rpx 10rpx;
		background-color: #fff;
		.dressingTime {
		  width: 260rpx;
		  height: 70rpx;
		  background-color: #f0f0f0;
		  text-align: center;
		  line-height: 70rpx;
		  color: #837d7d;
		  border-radius: 72rpx;
		}
		.share-square {
		  width: 55rpx;
		  height: 55rpx;
		  background: url(@/static/listIcon/export.png) no-repeat;
		  background-size: contain;
		}
	}
	.check-table-content {
		margin: 10rpx;
		padding: 10rpx;
		background-color: #fff;
		.table-content-top {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.table-content-center {
			margin-top: 20rpx;
			.content-center-info {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 16rpx;
				.center-info {
					font-size: 24rpx;
				}
			}
		}
	}
	.popup {
		.title {
			font-size: 36rpx;
			color: #000;
			font-weight: 600;
			margin-bottom: 32rpx;
			text-align: center;
		}
		.content {
			font-size: 32rpx;
			color: #000;
			margin-bottom: 42rpx;
			text-align: center;
		}
		.footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
			.allow {
				color: rgba(197, 0, 10, 1);
				height: 68rpx;
				padding: 16px 19px;
				line-height: 0;
				border: 1rpx solid rgba(197, 0, 10, 1);
				margin: 0 40rpx;
			}
			.refuse {
				color: rgba(142, 142, 142, 1.0);
				border: 1rpx solid rgba(142, 142, 142, 1.0);
				background-color: transparent;
			}
		}
	}
</style>
<style lang="scss">
	.u-popup__content {
	  padding: 30rpx 40rpx;
	}
</style>