<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="应急预案" :autoBack="true">
		
		</u-navbar>
		<!-- 搜索框 -->
		<view style="width: 100%;background-color: #fff;padding: 30rpx;">
			<u-search placeholder="请输入事故类型" v-model="searchKey" :showAction="false" @change="inputkey"></u-search>
		</view>
		<!-- 分类 -->
		<view style="background-color: #fff;">
			<!-- 头部 -->
			<view class="sortHead">
				<image src="../../../static/images/Yjplan/sort.png"
					style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
				<span class="sortTitle">分类</span>
			</view>
			<!-- 卡片 -->
			<view class="sortCard">
				<view class="zonghe" @click="changeType('1')">
					<view :class="`${changeValue == '1' ? 'title1' : 'title'}`">综合预案</view>
					<view class="count">
						{{ zh }}
						<span style="font-size: 28rpx;">/个</span>
					</view>
				</view>
				<view class="zhuanxiang" @click="changeType('2')">
					<view :class="`${changeValue == '2' ? 'title1' : 'title'}`">专项预案</view>
					<view class="count">
						{{ zx }}
						<span style="font-size: 28rpx;">/个</span>
					</view>
				</view>
				<view class="xianchang" @click="changeType('3')">
					<view :class="`${changeValue == '3' ? 'title1' : 'title'}`">现场处置方案</view>
					<view class="count">
						{{ xccz }}
						<span style="font-size: 28rpx;">/个</span>
					</view>
				</view>
				<view class="qita" @click="changeType('4')">
					<view :class="`${changeValue == '4' ? 'title1' : 'title'}`">其他预案</view>
					<view class="count">
						{{ qt }}
						<span style="font-size: 28rpx;">/个</span>
					</view>
				</view>
			</view>
		</view>
		<!--预案列表 -->
		<view style="background-color: #fff;">
			<!-- 头部 -->
			<view class="contentHead">
				<image src="../../../static/images/Yjplan/articel.png"
					style="width: 36rpx;height: 37rpx;margin-right: 22rpx;"></image>
				<!-- <span class="sortTitle">综合预案</span> -->
				<!-- <uni-data-select v-model="changeValue" :localdata="planTypeList" placeholder="综合预案"
					@change="changeType"></uni-data-select> -->
				<view
					style="font-family: Noto Sans S Chinese;font-weight: 500;font-size: 32rpx;color: #333333;line-height: 40rpx;">
					{{ setDict(changeValue, planTypeList) }}
				</view>
			</view>
			<!-- 内容 -->
			<view v-if="tableData.length === 0" class="listName" :style="fullHeight">
				<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
				<span style="color: #9f9f9f;margin-top: 30rpx;">该分类下暂无预案信息~</span>
			</view>
			<view style="padding: 0 40rpx;margin-bottom: 20rpx;" v-for="(item, index) in tableData" :key="index">
				<view class="content">
					<!-- 预案名称 -->
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
							<view>{{ item.planName.substring(0, 10) }}</view>
							<view style="margin-top: 10rpx;">{{ item.planName.substring(10) }}</view>
						</view>
						<image src="../../../static/images/zdwxy/success.png" style="width: 129rpx;height: 129rpx;">
						</image>
					</view>
					<!-- 预案内容 -->
					<view class="contentDetail">
						<u-row style="margin-bottom: 30rpx;">
							<u-col span="4" class="col1">编号：</u-col>
							<u-col span="8" class="col2">{{ item.text1 }}</u-col>
						</u-row>
						<u-row style="margin-bottom: 30rpx;">
							<u-col span="4" class="col1">版本号 :</u-col>
							<u-col span="8" class="col2">{{item.planVersion}}</u-col>
						</u-row>
						<u-row style="margin-bottom: 30rpx;">
							<u-col span="4" class="col1">预案类型:</u-col>
							<u-col span="8" class="col2">{{ setDict(item.planType, planTypeList) }}</u-col>
						</u-row>
						<u-row style="margin-bottom: 30rpx;">
							<u-col span="4" class="col1">应对事故类型:</u-col>
							<u-col span="8" class="col2">{{ item.accidentType }}</u-col>
						</u-row>
						<view class="more" @click="item.zk = !item.zk" v-show="!item.zk">
							查看更多
							<view class="sanjiao"></view>
						</view>
						<view v-if="item.zk">
							<u-row style="margin-bottom: 30rpx;">
								<u-col span="4" class="col1">适用地区:</u-col>
								<u-col span="8" class="col2">{{ item.usedDeptName }}</u-col>
							</u-row>
							<u-row style="margin-bottom: 30rpx;">
								<u-col span="4" class="col1">编制单位:</u-col>
								<u-col span="8" class="col2">{{ item.preDeptName }}</u-col>
							</u-row>
							<u-row style="margin-bottom: 30rpx;">
								<u-col span="4" class="col1">编制人:</u-col>
								<u-col span="8" class="col2">{{ item.preUserName }}</u-col>
							</u-row>
							<u-row style="margin-bottom: 30rpx;">
								<u-col span="4" class="col1">编写日期:</u-col>
								<u-col span="8" class="col2">{{ item.preDate }}</u-col>
							</u-row>
							<u-row style="margin-bottom: 30rpx;">
								<u-col span="4" class="col1">附件:</u-col>
							</u-row>
							<view v-if="item.fileList.length > 0">
								<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
									v-for="(item1,index1) in item.fileList" @click="goToPdfSee(item1.showUrl)"
									v-if="item1.fileSuffix === 'pdf'">
									{{item1.fileActualName}}
								</view>
								<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
									v-for="(item1,index1) in item.fileList" @click="prefile(item1.showUrl)" v-else>
									{{item1.fileActualName}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		listPlan,
		getPlan,
		planTjNumByType
	} from '@/api/indexpage/plan/index.js';
	import {
		getDicts
	} from '@/api/indexpage/user.js';

	export default {
		data() {
			return {
				fullHeight: '',
				searchKey: '', //应急预案搜索
				ismore: false, //查看更多
				tableData: [],
				planTypeList: [],
				changeValue: '1',
				zh: '',
				zx: '',
				xccz: '',
				qt: '',
				timer: ""
				// countList: undefined, //分类数量
			};
		},
		mounted() {
			this.getDict();
			this.getCount();
			let height = document.querySelector('.listName').getBoundingClientRect().top;
			console.log(height, '高度');
			this.fullHeight = 'height:' + 'calc(100vh - ' + height * 2 + 'rpx)';
		},
		watch: {
			searchKey(newdata, olddata) {
				let that = this;
				//防抖函数
				clearTimeout(that.timer);
				that.timer = setTimeout(function() {
					if (newdata == '' || newdata == undefined) {
						//发场库请求 
						listPlan({
							filingStatus: '1'
						}).then(res => {
							that.tableData = res.rows;
							res.rows.forEach(e => {
								e.zk = false;
							});
						});
					} else {
						listPlan({
							accidentType: newdata,
							filingStatus: '1'
						}).then(res => {
							that.tableData = res.rows;
							res.rows.forEach(e => {
								e.zk = false;
							});
							console.log(that.tableData);
						});
					}
				}, 600);
			}
		},
		methods: {
			//文件预览
			prefile(e) {
				uni.downloadFile({
					url: e,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});

			},
			//pdf跳转
			goToPdfSee(url) {
				this.$tab.navigateTo(`/pages/pdf/filePreview?urlID=${url}`);
			},
			getCount() {
				planTjNumByType().then(res => {
					this.zh = res.data.zh;
					this.zx = res.data.zx;
					this.xccz = res.data.xccz;
					this.qt = res.data.qt;
					// console.log(res, "数量");
				});
			},

			// 下拉框搜索
			changeType(e) {
				this.changeValue = e;
				console.log(this.changeValue);
				listPlan({
					planType: e,
					filingStatus: '1'
				}).then(res => {
					this.tableData = res.rows;
				});
			},
			newline(str, n) {
				//获取字符的长度
				var len = str.length;
				var strTemp = '';
				if (len > n) {
					strTemp = str.substring(0, n);
					str = str.substring(n, len);
					return strTemp + '\n' + this.newline(str, n);
				} else {
					return str;
				}
			},
			// 字典值
			getDict() {
				getDicts('emergency_plan_type').then(res => {
					let dataInfo = res.data;
					console.log('emergency_plan_type',res.data);
					this.planTypeList = dataInfo.map(item => {
						return {
							text: item.dictLabel,
							value: item.dictValue
						};
					});
					
					console.log(this.planTypeList, 'this.planTypeList');
				});
				getDicts('filing_status').then(res => {
					let dataInfo = res.data;
					this.beianStatusList = dataInfo.map(item => {
						return {
							text: item.dictLabel,
							value: item.dictValue
						};
					});
				});
				this.getList();
			},
			setDict(stauts, list) {
				for (let item of list) {
					if (item.value === stauts) {
						return item.text;
					}
				}
			},
			getList() {
				listPlan({
					planType: '1',
					filingStatus: '1'
				}).then(res => {
					this.tableData = res.rows;
					// for (var i = 0; i < this.tableData.length; i++) {
					// 	this.tableData[i].ismore = false;
					// }
					// console.log(this.tableData, "this.tableData");
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		box-sizing: border-box !important;

		/deep/.uni-select {
			border: none;
		}

		/deep/.uni-select__input-placeholder {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 40rpx;
		}

		/deep/.uni-select__input-text {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 40rpx;
		}

		/deep/.uni-select__input-text {
			// width: none;
		}

		/deep/.uniui-bottom {
			font-size: 32rpx !important;
			color: #333333 !important;
			line-height: 40rpx;
		}

		.active {
			color: #289318;
		}

		.sortHead {
			margin-top: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 36rpx 30rpx;

			.sortTitle {
				font-family: Noto Sans S Chinese;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}

		.sortCard {
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.zonghe {
				width: 336rpx;
				height: 140rpx;
				background: url('../../../static/images/Yjplan/zonghe.png') no-repeat;
				background-size: 100% 100%;
				margin-right: 19rpx;
			}

			.zhuanxiang {
				width: 336rpx;
				height: 140rpx;
				background: url('../../../static/images/Yjplan/zhuanxiang.png') no-repeat;
				background-size: 100% 100%;
			}

			.xianchang {
				width: 336rpx;
				height: 140rpx;
				background: url('../../../static/images/Yjplan/xianchang.png') no-repeat;
				background-size: 100% 100%;
				margin-right: 19rpx;
				margin-top: 20rpx;
			}

			.qita {
				width: 336rpx;
				height: 140rpx;
				background: url('../../../static/images/Yjplan/qita.png') no-repeat;
				background-size: 100% 100%;
				margin-top: 20rpx;
			}

			.title {
				font-family: Noto Sans S Chinese;
				font-weight: 500;
				font-size: 26rpx;
				color: #4d4d4d;
				line-height: 40rpx;
				padding: 18rpx 30rpx;
			}

			.title1 {
				font-family: Noto Sans S Chinese;
				font-weight: 600;
				font-size: 28rpx;
				color: #289318;
				line-height: 40rpx;
				padding: 18rpx 30rpx;
			}

			.count {
				font-family: DINPro;
				font-weight: 500;
				font-size: 50rpx;
				color: #353535;
				line-height: 40rpx;
				padding: 0 55rpx;
			}
		}

		.contentHead {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 36rpx 30rpx;

			.sortTitle {
				font-family: Noto Sans S Chinese;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}

		.listName {
			font-weight: bolder;
			color: #454545;
			font-size: 30rpx;
			margin-right: 50rpx;
			display: flex;
			align-items: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: c;
			margin-top: 100rpx;
		}

		.content {
			width: 670rpx;
			// height: 570rpx;
			background: url('../../../static/images/Yjplan/bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 23rpx 32rpx;

			.contentDetail {
				padding: 41rpx;
				margin-top: 19rpx;
				width: 606rpx;
				// height: 396rpx;
				background: #ffffff;
				opacity: 0.6;

				.col1 {
					font-size: 28rpx;
					color: #333333;
					line-height: 45rpx;
				}

				.col2 {
					font-size: 28rpx;
					color: #737980;
					line-height: 45rpx;
				}

				.more {
					width: 550rpx;
					height: 50rpx;
					background: #eeeeee;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 50rpx;
					text-align: center;
					font-weight: 400;

					.sanjiao {
						margin-left: 5rpx;
						display: inline-block;
						width: 0;
						height: 0;
						border-top: 16rpx solid #999999;
						border-right: 16rpx solid transparent;
						border-left: 16rpx solid transparent;
					}
				}
			}
		}
	}
</style>