<template>
	<view class="content">

		<view class="card">
			<view class="tit">
				<view class="">
					农户名称: 1号土地
				</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="">
					养殖种类: 20亩
				</view>
				<view class="">
					母猪: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					具体种类: 20亩
				</view>
				<view class="">
					幼崽: 的划分等级
				</view>
			</view>
		</view>
		<view class="">
			<view style="margin-bottom: 20rpx;">
				今日操作
			</view>
			<view class="card">
				<view class="card-li">
					<view class="">
						喂食
					</view>
					<view class="" style="color: #00A15E;" @click="showPop=true">
						+添加喂食记录
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-li">
					<view class="">
						注射疫苗
					</view>
					<view class="" style="color: #00A15E;">
						+添加喂食记录
					</view>
				</view>
			</view>
		</view>
		<view style="margin-bottom: 20rpx;">
			具体操作内容
		</view>
		<view class="card">
			<view class="tit">
				<view class="">
					喂食
				</view>
				<view class="" style="display: flex;">
					<view class="" style="margin-right: 40rpx;">
						删除
					</view>
					<view class="" style="color: #00A15E;">
						编辑
					</view>
				</view>

			</view>

			<view class="card-li">
				<view class="">
					饲料类型: 无机盐饲料
				</view>
				<view class="">
					饲料品牌: 双胞胎
				</view>
			</view>
			<view class="card-li">
				<view class="">
					喂食记录: 200kg
				</view>
				<view class="">
					备注: 双胞胎
				</view>
			</view>
		</view>
		<view class="card">
			<view class="tit">
				<view class="">
					疫苗注射对象
				</view>
				<view class="" style="display: flex;">
					<view class="" style="margin-right: 40rpx;">
						删除
					</view>
					<view class="" style="color: #00A15E;">
						编辑
					</view>
				</view>

			</view>

			<view class="card-li">
				<view class="">
					疫苗名称: 无机盐饲料
				</view>
				<view class="">
					疫苗品牌: 双胞胎
				</view>
			</view>
			<view class="card-li">
				<view class="">
					操作人员: 200kg
				</view>
				<view class="">
					注射数量: 双胞胎
				</view>
			</view>
			<view class="">
				疫苗条形码
				<view class="code-img">

				</view>
			</view>
		</view>
		<view class="ripe-btn">
			完成今日统计
		</view>
		<!-- 组件 -->
		<view class="">
			<u-popup :show="showPop" :round="10" :closeable='true' @close="showPop=false" @open="showPop=true">
				<view class="pop-content">
					<view class="pop-tit">
						添加喂食记录
					</view>
					<view class="">
						饲料类型
					</view>
					<view class="pop-li">
						<up-input placeholder="请输入品种" border="surround" v-model="formData.value"
							@change="change"></up-input>
					</view>
					<view class="">
						饲料品牌
					</view>
					<view class="pop-li">
						<up-input placeholder="请输入品种" border="surround" v-model="formData.value"
							@change="change"></up-input>
					</view>

					<view class="pop-confirm" @tap="confirm">
						确认
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const showPop = ref(false)
	const formData = reactive({
		value: ""
	})
</script>

<style lang="scss" scoped>
	.card {
		margin-bottom: 20rpx;

		.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;
		}
	}

	.pop-content {
		padding: 20rpx;

		.pop-tit {
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.pop-li {
			margin: 20rpx 0;
			margin-bottom: 40rpx;
		}

		.pop-confirm {
			width: 693.93rpx;
			height: 84.11rpx;
			background: linear-gradient(to right, #00A15E, #4CC593);
			color: white;
			border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
			text-align: center;
			line-height: 84rpx;
			margin-top: 70rpx;
		}

	}

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

	.code-img {
		background-color: red;
		height: 196.26rpx;
		margin-top: 30rpx;
	}
</style>