<template>
	<view class="add">
		<view class="add-filter">
			<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">笼位</view>
			<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">鼠</view>
			<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">Excel导出</view>
		</view>
		<view class="add-bd" v-if="tabIndex == 0">
			<view class="item">   
				<view class="l">每列笼位数显示数量：</view>
				<view class="r">
					<input type="text" v-model="info.father" />
				</view>
			</view>
			<view class="item">
				<view class="l">每笼最多放成年鼠数量：</view>
				<view class="r">
					<input type="text" v-model="info.father" />
				</view>
			</view>
			<view class="item">
				<view class="l">每笼最多放幼崽数量：</view>
				<view class="r">
					<input type="text" v-model="info.father" />
				</view>
			</view>
			<view class="item">
				<view class="l">有幼崽的鼠笼最多放成年鼠数量：</view>
				<view class="r">
					<input type="text" v-model="info.father" />
				</view>
			</view>
			<view class="item">
				<view class="l">分笼提醒<image class="date" src="@/static/3@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
			<view class="item">
				<view class="l">超期分笼提醒<image class="date" src="@/static/4@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
			<view class="item">
				<view class="l">超载提醒<image class="date" src="@/static/5@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
			<view class="item">
				<view class="l">小鼠打架提醒<image class="date" src="@/static/6@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
		</view>
		<view class="add-bd" v-if="tabIndex == 1">
			<view class="item">   
				<view class="l">断奶时间：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.day" />天
				</view>
			</view>
			<view class="item">
				<view class="l">断奶后护理时间：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.day" />天
				</view>
			</view>
			<view class="item">
				<view class="l">雄鼠性成熟时间：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.day" />天
				</view>
			</view>
			<view class="item">
				<view class="l">雌鼠性成熟时间：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.day" />天
				</view>
			</view>
			<view class="item">
				<view class="l">不育鼠时间：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.moth" />月
				</view>
			</view>
			<view class="item">
				<view class="l">给药后持续：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.day" />天显示给药标识
				</view>
			</view>
			<view class="item">
				<view class="l">记住：</view>
				<view class="r">
					<input type="text" class="box" v-model="info.moth" />个近期给药的颜色
				</view>
			</view>
			<view class="item">
				<view class="l">繁衍标识<image class="date" src="@/static/0@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
			<view class="item">
				<view class="l">见栓标识<image class="date" src="@/static/2@2x.png"></image></view>
				<view class="r">
					<u-switch v-model="info.id" activeColor="#036eb8"></u-switch>
				</view>
			</view>
		</view>
		<view class="add-bd1" v-if="tabIndex == 2">
			<view class="items" v-for="i in 2" :key="i">   
				<view class="a">现存鼠</view>
				<view class="b">
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>编号
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>性别
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>出生
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>品系
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>基因
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>笼号
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>描述 
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>毛色
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>分笼
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>配繁
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>体重
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>见栓
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>给药
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>父亲
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>母亲
					</view>
					<view class="l">
						<image v-if="currentIndex == 1" src="/static/8@2x.png"></image>
						<image v-else src="/static/7@2x.png"></image>备注
					</view>                            
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				tabIndex: 0,
				rangeIndex: -1,
				range: ['公','母'],
				range1: ['黄色','蓝色'],
				info: {
					moth: 2,
					day: 5
				},
			};
		},
		methods: {
			tabItem(e){
				this.tabIndex = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
.add{
	overflow: hidden;
	&-filter{
		width: 100%;
		background-color: #efefef;
		display: flex;
		align-items: center;
		.item{
			line-height: 85rpx;
			flex: 1;
			text-align: center;
			color: #241b17;
			font-size: 30rpx;
			&-on{
				background-color: #009944;
				color: #ffffff;
			}
		}
	}
	&-bd1{
		.items{
			.a{
				width: 100%;
				line-height: 60rpx;
				background-color: #009944;
				font-size: 32rpx;
				color: #ffffff;
				padding: 0 40rpx;
				box-sizing: border-box;
			}
			.b{
				width: 100%;
				font-size: 32rpx;
				color: #000;
				padding: 0 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				.l{
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 40rpx 0;
					border-bottom: 1px solid #c0c2c2;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	&-bd{
		padding: 0 35rpx;
		overflow: hidden;
		.item{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 0;
			border-bottom: 1px solid #c0c2c2;
			.l{
				min-width: 100rpx;
				font-size: 28rpx;
				color: #000;
				.date{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
					vertical-align: middle;
				}
			}
			.r{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				input,picker{
					flex: 1;
					font-size: 28rpx;
					color: #000;
					height: 50rpx;
					line-height: 50rpx;
					text-align: right;
				}
				.box{
					text-align: center;
				}
				.arrow{
					width: 32rpx;
					height: 19rpx;
					margin-left: 20rpx;
					vertical-align: middle;
				}
				
			}
		}
	}
	&-fd{
		width: 100%;
		padding: 20rpx 35rpx;
		box-sizing: border-box;
		background-color: #f3f5f6;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		// padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		.btn{
			width: 100%;
			line-height: 90rpx;
			text-align: center;
			background-color: #009944;
			font-size: 32rpx;
			color: #ffffff;
			border-radius: 10rpx;
		}
	}
}
</style>
