<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import Navigate from '@/utils/page/navigate'
	import { reactive, ref } from 'vue'
	import * as NongzhiAPI from '@/api/model/nongzhi'
	const bgColorData = ["#EEFAEB","#EFF1FF","#FFF3F1","#E8F7F7","#FFF3E7","#FAF8EA"];
	let testDataList = ['营业执照','食品经营许可证','有机产品认证书','无公害农产品证书','有机产品认证书','营业执照','营业执照2','营业执照3']
	const pageData = reactive({
		
	})
	function getBgColor(index:any){
		if(index < 6){
			return bgColorData[index];
		}else{
			return bgColorData[Math.floor(Math.random() * 5)];
		}
	}
	function handlePublish() {
		Navigate.to('/pages/linghuoyonggong/publishEmployment')
	}
</script>
<template>
	<view class="w-full h-95vh bg-#E6F5E8 detail_page">
		<view class="module_width top_content">
			<view class="enterprise_logo_view"><image class="enterprise_logo" mode="heightFix" src="/static/images/test/test_logo.png" /></view>
			<view class="enterprise_business">主营：粮、油、糖、棉、肉、乳等品类的全球一体化运营</view>
			<view class="enterprise_description">中粮集团下设中粮粮油、中国粮油、中国食品、地产酒店、中国土畜、中粮屯河、中粮包装、中粮发展、金融等9大业务板块，拥有中国食品、中粮控股两家香港上市公司，中粮屯河、中粮地产和丰原生化3家内地上市公司。福临门食用油、长城葡萄酒、金帝巧克力、屯河番茄制品、家佳康肉制品以及大悦城Shopping Mall、亚龙湾度假区、凯莱酒店、雪莲羊绒、中茶茶叶、中英人寿保险农村金融服务等等。  </view>
		</view>
		<view class="module_width middle_content">
			<view class="module_title">资质证书</view>
			<view class="module_separate"></view>
			<view class="module_qualification">
				<view class="qualification_item" :style="`background:${getBgColor(index)}`" v-for="(item,index) in testDataList" :key="index">
					<image class="enterprise_logo" mode="heightFix" src="/static/images/test/test_business.png" />
					<view class="qualification_name ellipsis">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="module_width footer_content">
			<view class="module_title">主营产品</view>
			<view class="module_separate"></view>
			<view class="module_business">
				<view class="business_item" v-for="(item,index) in 5" :key="index">
					<image class="business_img" mode="heightFix" src="/static/images/test/product.png" />
					<view class="qualification_name ellipsis">有机砂糖橘</view>
					<view class="qualification_price ellipsis">¥3.2<text class="qualification_text">/斤</text></view>
				</view>
			</view>
		</view>
	</view>
	<fui-fab position="right" distance="10" bottom="240" width="120" @click="handlePublish">
	    <view class="text-white text-center">
	        <view class="fab-icon" />
	        <view style="font-size: 24rpx">发布产品</view>
	    </view>
	</fui-fab>
</template>

<style lang="less" scoped>
.detail_page{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	padding-bottom: 40rpx;
	.module_width{
		width: 690rpx;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding:28rpx;
		box-sizing: border-box;
	}
	.ellipsis{
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.top_content{
		.enterprise_logo_view{
			width: 630rpx;
			display:flex;
			align-items: flex-start;
			.enterprise_logo{
				height: 80rpx;
			}
		}
		.enterprise_business{
			width: 636rpx;
			padding:8rpx 20rpx;
			border-radius: 8rpx;
			background: linear-gradient(233.81deg, rgba(92, 181, 110, 1) 0%, rgba(100, 214, 62, 1) 100%);
			font-size: 24rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #FFFFFF;
			margin-top: 32rpx;
		}
		.enterprise_description{
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 40rpx;
			color: #333333;
			text-align: justify;
			vertical-align: middle;
			text-indent: 2em;
		}
	}
	.middle_content{
		
	}
	.module_title{
		font-size: 32rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: #333333;
		text-align: justify;
		vertical-align: middle;
	}
	.module_separate{
		margin-top: 20rpx;
		width: 128rpx;
		height: 6rpx;
		opacity: 1;
		background: linear-gradient(233.81deg, #5CB56E 0%, #64D63E 100%);
	}
	.module_qualification{
		margin-top: 6rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		.qualification_item{
			width: 198rpx;
			height: 166rpx;
			margin-left: 20rpx;
			margin-top: 26rpx;
			border-radius: 8rpx;
			padding-top: 8rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.enterprise_logo{
				height: 114rpx;
				max-width: 160rpx;
			}
			.qualification_name{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 20rpx;
				color: #333333;
				max-width: 160rpx;
			}
		}
		.qualification_item:nth-child(3n+1){
			margin-left: 0rpx;
		}
	}
	
	
	.module_business{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: space-between;
		.business_item{
			width: 310rpx;
			height: 292rpx;
			margin-top: 24rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			background: #F9FAFB;
			.business_img{
				width: 310rpx;
				height: 180rpx;
				opacity: 1;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}
			.qualification_name{
				height: 48rpx;
				line-height: 48rpx;
				font-size: 32rpx;
				color: #000000;
				max-width: 280rpx;
				margin-top: 6rpx;
			}
			.qualification_price{
				height: 48rpx;
				width: 280rpx;
				opacity: 1;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 48rpx;
				text-align: center;
				color: #5DB66F;
				.qualification_text{
					font-size: 12px;
				}
			}
		}
		.business_item:nth-child(odd){
			margin-left: 0rpx;
		}
	}
}
::v-deep .fui-fab__btn-main {
	background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
	box-shadow: 0px 1px 8px #5db66f;
}
</style>
