<template>
	<view class="control">
		<view class="control-list" v-if="showNoData">
			<view class="control-item" v-for="ele in typeList" :key="ele.value">
				<view class="item-title b-bottom">
					{{ele.label}}
				</view>
				<view class="item-select-box b-bottom flex a-center j-between"
					v-for="(item,index) in ele.dataList" :key="index"
					@click="previewFile(item)">
					<view class="img-box">
						<image v-if="item.iconType.includes('word')" src="@/static/word.png"></image>
						<image v-if="item.iconType.includes('excel')" src="@/static/excel.png"></image>
						<image v-if="item.iconType.includes('pdf')" src="@/static/pdf.png"></image>
						<image v-if="item.iconType.includes('ppt')" src="@/static/ppt.png"></image>
						<image v-if="item.iconType.includes('image')" src="@/static/icon-image.png"></image>
					</view>
					<view class="item-content">{{item.fileName}}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<image class="img" src="/static/noData.png"></image>
			<text class="txt">暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				showNoData: false,
				typeList: [{
						label: "专项施工方案",
						value: 1,
					},
					{
						label: "专家论证",
						value: 2,
					},
					{
						label: "方案交底",
						value: 3,
					},
					{
						label: "安全技术交底",
						value: 4,
					},
					{
						label: "施工条件验收",
						value: 5,
					},
					{
						label: "施工进度",
						value: 6,
					},
					{
						label: "现场巡视",
						value: 7,
					},
					{
						label: "危大工程验收",
						value: 8,
					},
					{
						label: "管控要点",
						value: 9,
					},
				],
			}
		},
		created() {
			console.log(this.info, 777888)
			this.getBigDangerRecordFile();
		},
		methods: {
			getBigDangerRecordFile() {
				console.log("=====================================================detail");
				this.sendRequest({
					url: 'xmgl/bigDangerRecordFile/list',
					method: 'get',
					data: {
						recordId: this.info.id,
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
					},
					success: res => {
						console.log("xmgl/xzDangerousEngineeringAcceptance/list", res);
						if(res.result.length > 0) {
							this.showNoData = true;
						}
						this.typeList = this.typeList.map(item => {
							return {
								...item,
								dataList: res.result.filter(ele => ele.bigDangerModule == item.value)
							}
						}).filter(item => item.dataList.length > 0);
					}
				})
			},
			previewFile(val) {
				let url = this.url_config + 'image/' + val.fileUrl
				console.log(url)
				if (val.iconType.includes("image")) {
					uni.previewImage({
						urls: [url]
					})
				} else {
					uni.downloadFile({
						url: url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					});
				}
				// //#ifdef H5
				// 	uni.showToast({
				// 	    title: '暂不支持预览！',
				// 		icon: "none",
				// 		duration: 2000
				// 	});
				// 	return;
				// //#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		margin-top: 26rpx;
		padding-bottom: 40rpx;
		background-color: white;

		.flex {
			display: flex;
		}

		.j-between {
			justify-content: space-between;
		}

		.a-center {
			align-items: center;
		}

		.b-bottom {
			border-bottom: 1px solid #F6F6F6;
		}

		.control-h2 {
			font-size: 14px;
			height: 60rpx;
			padding: 0 20rpx;
			background: rgba(255, 255, 255, 0.5);
		}

		.control-list {
			font-size: 14px;

			.control-item {
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				background: #fff;

				.item-title {
					font-weight: 500;
					font-size: 15px;
					color: #1A1A1A;
					height: 72rpx;
					line-height: 72rpx;
				}
			}

			.item-select-box {
				padding: 26rpx 0;

				.item-content {
					width: 100%;
				}

				.img-box {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;

					uni-image {
						width: 100%;
						height: 100%;
					}
				}

			}

		}

		.no-data {
			text-align: center;

			.img {
				display: block;
				height: 200rpx;
				width: 200rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
			}

			.txt {
				color: #C0C4CC;
			}
		}
	}
</style>