<template>
	<view class="app">
		<view class="topbody">
			<view class="radio">
				<u-dropdown>
					<u-dropdown-item v-model="value" :title="title" :options="options" @change="change">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="text">
				{{count}}
			</view>
		</view>
		
		<view class="top">
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="companyName" type="text" name="" id="" class="input" placeholder="请输入企业名称">
			</view>
			<view class="query" @tap='watchwordsName'>
				搜索
			</view>
		
		</view>
		<view class="statistics" @tap='statisticstap'>
			分类统计
		</view>
		<view class="items">
			<uni-table border stripe emptyText="">
				<uni-tr class='toptr'>
					<uni-th width="90" align="center">企业名称</uni-th>
					<uni-th width="90" align="center">状况等级</uni-th>
					<uni-th width="90" align="center">风险等级</uni-th>
					<uni-th width="90" align="center">风险类别</uni-th>
					<uni-th width="110" align="center">风险评估报告</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in list" :key='index' class='tr'>
					<uni-td align="center">{{item.companyName}}</uni-td>
					<uni-td align="center">{{item.level}}</uni-td>
					<uni-td align="center">{{item.zybblfx}}</uni-td>
					<uni-td align="center">{{item.qydj}}</uni-td>
					<uni-td align="center">
						<view class="" style="color: #169BD5;" @click="report(item)">查看报告

						</view>
					</uni-td>

				</uni-tr>
			</uni-table>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>

	</view>
</template>

<script>
	import {
		qylistFy,
		downBaoGao,
		delPgFile
	} from '@/api/Classification/Classification.js'
	import baseUrl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				list: null,
				scrollTop: 0,
				value: 1,
				value2: 3,
				enterprisId: '',
				keyword: '',
				companyName: '',
				page: 1,
				limit: 10,
				count: null,
				// value: 1,
				title: '甲类',
				options: [{
						label: '甲类',
						value: 1,
					},
					{
						label: '乙类',
						value: 2,
					},
					{
						label: '丙类',
						value: 3,
					}
				],
			}

		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			// var that = this
			this.title = '甲类'
			this.keyword = '甲类'
			this.info()

		},
		methods: {
			// 查看报告
			report(item) {
				console.log('11', item)
				this.enterprisId = item.id
				downBaoGao(this.enterprisId).then(res => {
					this.filePath = res
					uni.downloadFile({
						url: baseUrl + `/dzzyb` + res,
						success: (data) => {
							console.log(data)
							if (data.statusCode == 200) {
								//文件保存到本地
								uni.saveFile({
									tempFilePath: data.tempFilePath, //临时路径
									success: function(res) {
										console.log(res)
									}
								});
								uni.openDocument({
									filePath: data.tempFilePath,
									success: function(res) {
										// console.log('打开文档成功');
									},
									fail: function() {
										uni.showToast({
											title: '暂不支持此类型',
											duration: 2000,
											icon: "none",
										});
									}
								});
								if (this.filePath) {
									delPgFile(this.filePath).then(res => {})
								};
							}
						},
					})

				})
			},
			change(e) {
				console.log(e);
				if (e == 1) {
					this.title = '甲类'
					this.value = 1
				} else if (e == 2) {
					this.title = '乙类'
					this.value = 2
				} else if (e == 3) {
					this.title = '丙类'
					this.value = 3
				}
				this.keyword = this.title
				this.companyName = ''
				// uni.setStorageSync("keyword", this.keyword)
				this.info();
				console.log('1', this.keyword);
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
			},
			// 搜索
			watchwordsName() {
				this.wordsName = ''
				qylistFy(this.page, this.limit, this.keyword, this.companyName).then(res => {
					this.list = res.data

				})

			},
			// 分类统计
			statisticstap(){
				uni.navigateTo({
				    url: "/pages/statistics/statistics"
				})
				
			},
			info() {
				this.page = 1;
				this.wordsName = ''
				qylistFy(this.page, this.limit, this.keyword, this.companyName).then(res => {
					this.list = res.data
					this.count = res.count
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.count) {} else {
				this.page++;
				qylistFy(this.page, this.limit, this.keyword, this.companyName).then(res => {
					res.data.forEach(e => {
						this.list.push(e)
					})
					this.count = res.count
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.page = 1;
			this.keyword = '甲类'
			this.value = 1
			this.title = '甲类'
			qylistFy(this.page, this.limit, this.keyword, this.companyName).then(res => {
				this.list = res.data
				this.count = res.count
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style lang="scss">
	//css函数 声明函数
	    @function tovmin($rpx){//$rpx为需要转换的字号
	        @return #{$rpx * 100 / 750}vmin; 
			}
	::v-deep .uni-table {
		min-width: 100% !important;
	}
	::v-deep .u-iconfont::before{
		font-size: tovmin(10);
	
	}
	::v-deep .switchTab{
		    width: tovmin(44);
		    height:tovmin(44);
		
	}
		
	::v-deep .u-dropdown__content__popup{
		transition:none !important;
		transition-duration:none !important;
		
	}
	.app {
		// padding: 0 0 100rpx;
		margin-top: tovmin(10);
		height: 100%;
		position: relative;
		// .tr{
		// 	padding: tovmin(19) tovmin(10) !important;
			
		// }

		.topbody {
			display: flex;

			// background-color: red;
			.text {
				font-size: tovmin(30);

				text-align: center;
				height: tovmin(80);
				line-height: tovmin(80);
				// margin-top: 1rpx;
			}
		}

		.items {
			width: 98%;
			margin: tovmin(10) auto;
			padding-bottom: 0rpx;
			position: absolute;
			top: tovmin(130);


			.toptr {}
		}

		.radio {
			// background-color: red;
			// margin-left: 10rpx;
			width: 20%;

		}

		.radio::v-deep .u-dropdown__content__mask {
			background: none;
		}

		.query {
			font-size: tovmin(24);
			background-color: #169BD5;
			width: 17%;
			border-radius: tovmin(20);
			height: tovmin(65);
			line-height: tovmin(65);
			text-align: center;
			color: #Ffffff;
			position: absolute;
			top: tovmin(30);
			left: 60%;
		}

		.top {
			height: 10%;
			position: relative;
			left: tovmin(170);
			top: tovmin(-100);
		}
		.statistics{
			width: 100%;
			color: #169BD5;
			position: absolute;
			left: 4%;
		}

		.inputs {
			box-shadow: tovmin(0) tovmin(9) tovmin(31) tovmin(9) rgba(0, 0, 0, 0.03);
			border: 1px solid #f0f0f0;
			width: 52%;
			height: tovmin(65);
			margin: tovmin(30) 0 tovmin(10) 5%;
			// transform: translateX(-50%);
			border-radius: tovmin(20);
			background-color: #Ffffff;
			z-index: 999;
			float: left;
			position: relative;

			.input {
				margin: 0 auto;
				position: absolute;
				height: tovmin(62);
				left: 15%;
				width: 80%;
				font-size: tovmin(26);
				color: #000000;
			}

			.icon {
				background: url(@/static/sousuo.png) no-repeat;
				width: tovmin(30);
				height: tovmin(28);
				background-size: cover;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 3%;
			}
		}
	}
</style>
