<template>
	<view class="container-main">
		<view class="data-main">
			<view class="data-rows" style="padding-top: 0">
				<view class="data-lable">保险公司:</view>
				<view class="data-value">{{list.company_name}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">产品名称:</view>
				<view class="data-value">{{list.productName}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">适用类别:</view>
				<view class="data-value">{{list.appliacateType}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">发布时间</view>
				<view class="data-value">{{list.releasetime}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">产品简介:</view>
				<view class="data-value">{{list.introtuction}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">年保险费</view>
				<view class="data-value data-value-color">{{list.premium}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">保险责任</view>
				<view class="data-value">{{list.insuranceLiability}}</view>
			</view>
			<view class="data-rows" style="align-items: flex-start">
				<view class="data-lable">责任限额</view>
				<view class="data-value">
					{{list.norm}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">免赔额</view>
				<view class="data-value">{{list.deductibleExcess}}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">附加条款</view>
				<view class="data-value">{{list.additionalTerms}}</view>
			</view>
			<view class="data-rows" style="align-items: flex-start">
				<view class="data-lable">投保所需资料 </view>
				<view class="data-value">
					{{list.information}}
				</view>
			</view>
			<view class="data-rows">
				<view class="data-lable" style="margin-bottom: 20rpx">产品网址</view>
				<view class="data-value data-img">
					{{list.productWebsite}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessage
	} from '@/api/shianliaoning/PRODUCT.js'
	export default {
		data() {
			return {
				list: {
					company_name: ''
				}
			};
		},
		onLoad(option) {
			getMessage(option.id).then((res) => {
				console.log(res);
				this.list = res.data
			})
		},
	};
</script>

<style lang="scss" scoped>
	.container-main {
		box-sizing: border-box;
		padding: 20rpx;

		.data-main {
			min-height: 900rpx;
			border-radius: 16rpx;
			background: #fff;
			box-sizing: border-box;
		}

		.data-rows {
			display: flex;
			border-bottom: 1rpx solid #ecf1f7;
			box-sizing: border-box;
			padding: 30rpx 0;

			.data-lable {
				width: 180rpx;
				margin: 0 40rpx 0 0;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: #34373b;
			}

			.data-lable-tow {
				width: 250rpx;
				// text-align: right;
			}

			.data-value {
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
				color: #616367;
			}

			.data-font {
				padding: 0 0 0 100rpx;

				.data-font-top,
				.data-font-cont,
				.data-font-bottom {
					margin: 0 0 20rpx 0;
				}
			}

			.data-value-color {
				color: #86cd78;
			}

			.data-img {
				width: 100%;

				image {
					width: 50%;
					height: 388rpx;
					border-radius: 16rpx;
				}
			}
		}
	}
</style>
