<template>
	<view class="content">
		<view class="head-img">
			<view class="">
				<u--image src="/static/img/GJ.jpg" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
			</view>
			<view class="poisition">
				<view style="display: flex;">
					<u--image src="/static/img/dw.png" style="margin: 0 5rpx;" width="35.05rpx"
						height="35.05rpx"></u--image>
					分水岭大南山北326米
				</view>
			</view>
		</view>
		<view class="bad-info">
			<view class="" style="display: flex;align-items: center;">
				<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
				<text>刷新时间:{{dateFn()}}</text>
			</view>
			<view class="" @click="navgo('/pages/allPlant/index')">
				查看历史条件>
			</view>
		</view>
		<view class="up-plant-btn">
			上传新的种植情况
		</view>

		<view class="card">
			<view class="tit">
				<view class="">
					1号土地
				</view>
				<view class="">
					溯源码: 12302
				</view>
			</view>
			<view class="card-li">
				<view class="">
					当前种植: 土豆
				</view>
				<view class="">
					种植品牌: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					土地面积: 20亩
				</view>
				<view class="">
					种子品牌: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					播种时间: 2020.12.01
				</view>

			</view>
		</view>


		<!-- 生长记录 -->
		<view class="grow-record">
			<view class="grow-record-tit">
				<view class="">
					生长记录操作
				</view>
				<view class="updata-btn" @tap="navgo('/pages/growRecord/index')">
					更新生长记录
				</view>
			</view>
			<view class="card" @tap="navgo('/pages/growRecord/index')">
				<biaoge></biaoge>

			</view>
		</view>

		<view class="data">
			<view class="tit">
				<view class="" style="display: flex;justify-content: space-between;font-size: 29.79rpx;">
					<view class="">
						土地监测数据
					</view>
					<view class="" @click="navgo('/pages/profile/index')">
						查看全部检测记录>
					</view>
				</view>
				<view class="tit-b">
					<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
					<text>刷新时间:{{dateFn()}}</text>
				</view>
			</view>

			<view class="data-cont">
				<view class="data-cont-li center" v-for="(item,index) in data " :key="index">
					<view style="margin:0 20rpx">
						<view class="center">
							<!-- <img :src="urlFn('B')" :style="img(38.55,38.55,5)" alt=""> -->
							<u--image :src="urlFn(item.icon)" style="margin: 0 5rpx;" width="38.55rpx"
								height="38.54rpx"></u--image>
							{{item.tit}}
						</view>
						<view class="b-cls">
							<view class="" :style="{color:item.flag?'#0095FF':''}">
								<text style=" font-size: 70.09rpx;">
									{{baseData[item.cont]}}
								</text>{{item.dw}}
							</view>
							<view class="" style="display: flex;align-items: center;" v-if="item.flag">
								<u--image :src="urlFn('D')" style="margin: 0 5rpx;" width="31.54rpx" height="31.54rpx">
								</u--image>
								<text style="color: #0095FF;">5</text>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>

		<view class="ripe-btn" @click="navgo('/pages/index/index')">
			标记为成熟
		</view>


	</view>
</template>

<script>
	import biaoge from "@/components/biaoge/index.vue"
	import {
		companyMine
	} from "@/api/test.js"
	export default {
		components: {
			biaoge
		},
		data() {
			return {
				// title: 'Hello'
				data: [{
						tit: "土壤温度",
						icon: 'TRWD',
						dw: "℃",
						cont: 'soil_temperature',
						flag: false,

					}, {
						tit: "土壤湿度",
						icon: 'TRSD',
						dw: "%RH",
						cont: 'soil_moisture',
					}, {
						tit: "风向",
						icon: 'FX',
						cont: 'wind_direction',
					}, {
						tit: "风速",
						icon: 'FS',
						dw: "m/s",
						cont: 'wind_speed',
					}, {
						tit: "降雨量",
						icon: 'JYL',
						dw: "mm",
						cont: 'rainfall',
					}, {
						tit: "光照",
						icon: 'GZ',
						dw: "Wlux",
						cont: 'illumination',
					}, {
						tit: "二氧化碳",
						icon: 'EYHT',
						dw: "ppm",
						cont: 'carbon_dioxide_content',
					},

				],

				data2: [{
					cont: "气象多要素百叶箱",
					cont2: "1天/1次",
				}, {
					cont: "多功能控制器",
					cont2: "3个小时/次",
				}, ],
				baseData: {

				}
			}
		},
		onShow() {
			companyMine({
				id: 1,
				flag: 1
			}).then(res => {
				this.baseData = res.data
				// console.log(res)
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			dateFn() {
				var today = new Date();

				// 获取年、月、日
				var year = today.getFullYear();
				var month = today.getMonth() + 1; // 月份从0开始，需要加1
				var day = today.getDate();

				// 构建日期字符串
				var dateStr = year + '-' + month + '-' + day;
				return dateStr
				// 输出日期字符串

			},
			backFn() {
				uni.navigateBack()
			},
			test() {
				companyMine()
			},
			urlFn(name) {
				return `/static/img/${name}.png`
			},
			img(w, h, m) {
				return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
			},
			navto() {
				uni.navigateTo({
					url: '/pages/index2/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		// background-color: grey;
		background-color: #EBF1EF;
	}

	.head-img {
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		margin: 0 auto;
		position: relative;

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 380.26rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			left: 43rpx;
			bottom: 36rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			display: flex;
			align-items: center;
			font-size: 29.79rpx;

			.dw-cls {

				margin: 0 5rpx;
			}
		}
	}

	.bad-info {
		display: flex;
		// background-color: red;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		color: #737373;
		width: 693.93rpx;
		font-size: 26.29rpx;

		.tit-b {
			color: red;
		}


	}

	.up-plant-btn {
		width: 371.5rpx;
		height: 66.59rpx;
		color: #00A15E;
		margin: 40rpx auto;
		border: 1px solid #00A15E;
		font-weight: bold;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.data {
		.tit {
			.tit-b {
				color: #B3B3B3;
				font-size: 26.29rpx;
				display: flex;
				align-items: center;
			}
		}

		.data-alanys {
			// background-color: blue;
			float: right;
			color: white;
		}

		.data-cont {
			// margin: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;
			box-sizing: border-box;
			// padding: 70rpx;

			.data-cont-li {
				border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
				width: 310.94rpx;
				height: 212.03rpx;
				background-color: white;
				margin-bottom: 20rpx;
			}
		}
	}

	.center {
		display: flex;
		align-items: center;
	}

	.b-cls {
		display: flex;
		align-items: flex-end;
		width: 250rpx;
		justify-content: space-between;
		color: #4CC593;
	}

	.card {
		.tit {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EBF1EF;
		}

		.card-li {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.grow-record {
		.grow-record-tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			align-items: center;
			font-size: 26.29rpx;

			.updata-btn {
				width: 192.76rpx;
				height: 57.83rpx;
				border: 1px solid #00A15E;
				color: #00A15E;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			}
		}

		.card {
			display: flex;
		}

	}

	.ripe-btn {
		width: 588.79rpx;
		height: 84.11rpx;
		background-color: #00A15E;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
	}
</style>