<template>
	<view class="land-seed-detail rel" v-if="detail.id">
		<banner @change="goBanner(1,$event)" :list="detail.imgs" :margin="0" :autoplay="true" :borderRadius="0"
			:height="750" :indicatorActiveColor="primaryColor" indicatorType="number"
			indicatorStyle="text-align:right;bottom:0"></banner>
		<view class="seed-info fill-base abs pd-lg f-paragraph c-desc">
			<i class="iconfont icon-seed" :style="{color:primaryColor}"></i>
			<view class="f-title c-title text-bold mt-md">种子简介</view>
			<view class="flex-warp mt-md">
				<view>种子名称</view>
				<view class="max">{{detail.title}}</view>
			</view>
			<view class="flex-warp mt-md">
				<view>预估产量</view>
				<view class="max">{{detail.output_value}}kg/m²</view>
			</view>
			<view class="flex-warp mt-md">
				<view>播种季节</view>
				<view class="max">
					<block v-for="(item,index) in detail.month" :key="index">
						{{index!=0?'、':''}}{{`${item}月`}}
					</block>
				</view>
			</view>
			<view class="flex-warp mt-md">
				<view>播种面积</view>
				<view class="max">{{detail.area}}/m²</view>
			</view>
			<view class="flex-warp mt-md">
				<view>生长周期</view>
				<view class="max">{{detail.grow_cycle}}天</view>
			</view>
			<view class="flex-warp mt-md">
				<view>采摘周期</view>
				<view class="max">{{detail.picking_cycle}}天</view>
			</view>
			<view class="flex-warp mt-md">
				<view>种植周期</view>
				<view class="max">{{detail.seed_cycle}}天</view>
			</view>
			<view class="flex-warp mt-md">
				<view>种子价格</view>
				<view class="max">¥{{detail.seed_price}}</view>
			</view>
<!-- 
			<view class="f-title c-title text-bold mt-lg pb-lg">溯源信息</view>
			<timeline :list="detail.source.stage" :info="detail" type="stage"></timeline> -->
		</view>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		methods: {
			async initIndex() {
				let {
					id,
					land_id
				} = this.options
				this.detail = await this.$api.land.seedInfo({
					id,
					land_id
				})
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: #fff;
	}

	.land-seed-detail {

		.seed-info {
			width: 100%;
			top: 690rpx;
			border-radius: 40rpx 40rpx 0 0;

			.icon-seed {
				font-size: 95rpx;
			}

			.max {
				max-width: 528rpx;
				margin-left: 50rpx;
			}
		}
	}
</style>
