<template>
	<view class="content">
		<!-- <video src="https://t12.cdn2020.com:12337/video/m3u8/2021/10/11/d647a87d/index.m3u8"></video> -->
		<view class="header">
			<view class="banner">
				<u-swiper
					class="banner-swiper"
					:list="bannerArr"
					:indicator="true"
					previousMargin="20"
					nextMargin="20"
					circular
					radius="10"
					bgColor="#ffffff"
					height="100%"
				></u-swiper>
			</view>
			<view class="notice">
				<view class="notice-title">
					<image class="notice-icon" src="@/static/imgs/notice-icon.png" mode="widthFix"></image>公告
				</view>
				<u-notice-bar
					icon=""
					:text="notice"
					direction="column"
					bgColor="#fff"
					color="#111111"
				></u-notice-bar>
				<view class="notice-more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
			</view>
		</view>
		<!-- 自由服务包 -->
		<view class="free">
			<image class="free-img" src="@/static/imgs/index-img.png" mode="widthFix"></image>
		</view>
		<!-- 经法产品 -->
		<view class="block">
			<view class="block-title">
				<view class="title">经法产品</view>
				<view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
			</view>
			<view class="the-tabs">
				<block v-for="(item, index) in theTabs" :key="index">
					<view class="the-tabs-item" :class="{'active': item.id == theTabId}" @click="onTheTab(item)">{{item.title}}</view>
				</block>
				<view class="the-tabs-acitve-block" :style="theTabStyle"></view>
			</view>
			<view class="the-flex">
				<view class="the-flex-item" v-for="(item, index) in 3" :key="index">
					<view class="cover"></view>
					<view class="title nowrap">中国工商信用卡服务...</view>
					<view class="price nowrap"><text>￥</text>2200</view>
				</view>
			</view>
		</view>
		<!-- 综法产品 -->
		<view class="block">
			<view class="block-title">
				<view class="title">综法产品</view>
				<view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
			</view>
			<view class="zong-list">
				<view class="zong-list-item" v-for="(item, index) in 4" :key="index">
					<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill"></image>
					<view class="colum-flex">
						<view class="title nowrap">2022年尊享综法服务包</view>
						<view class="price nowrap"><text>￥</text>2200</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { region } from '@/apis/interfaces/address.js'
	export default {
		data() {
			return {
				theTabs		: [
					{ id: 1, title: '全部' },
					{ id: 2, title: '信用卡' },
					{ id: 3, title: '网贷' },
					{ id: 4, title: '信用贷' },
				],
				theTabId	: 1,
				theTabStyle	: {
					left: '0%'
				},
				bannerArr	: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				notice		: [
					'王**信用卡法务咨询办理成功（今日）',
					'王**信用卡法务咨询办理成功（今日）',
					'王**信用卡法务咨询办理成功（今日）',
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			// 选择城市节点
			onCityPicker(e){
				console.log(e)
				this.getRegion(e.value);
			},
			// 获取城市数据
			getRegion(id){
				region({
					parent_id: id
				}).then(res => {
					console.log(res)
				})
			},
			// 经法产品筛选
			onTheTab(e){
				if(e.id != this.theTabId){
					let index = this.theTabs.findIndex(val => val.id === e.id)
					this.theTabStyle = {
						left: index * (100 / this.theTabs.length) + '%'
					}
					this.theTabId = e.id
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color: white;
		padding-top: 20rpx;
	}
	// 轮播图
	.banner{
		position: relative;
		width: 100%;
		padding-top: 43%;
		.banner-swiper{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}
	// 轮播
	.notice{
		background: white;
		padding: $padding;
		display: flex;
		flex-direction: row;
		align-items: center;
		.notice-title{
			background-color: #ECF0FF;
			color: #446EFE;
			height: 60rpx;
			line-height: 60rpx;
			width: 130rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 20rpx;
			.notice-icon{
				width: 32rpx;
				vertical-align: middle;
				margin-bottom: 8rpx;
				margin-right: 5rpx;
				display: inline-block;
			}
		}
		.notice-more{
			font-size: 14px;
			height: 50rpx;
			border-radius: 25rpx;
			box-sizing: border-box;
			line-height: 50rpx;
			text-align: center;
			color: #999999;
			.more-icon{
				display: inline-block;
			}
		}
	}
	// 自由服务包
	.free{
		padding: $padding;
		.free-img{
			width: 100%;
		}
	}
	// 综法
	.zong-list{
		padding: 0 $padding 20rpx;
		margin-bottom: 30rpx;
		&-item{
			position: relative;
			margin-bottom: 30rpx;
			padding-left: 210rpx;
			height: 180rpx;
			.cover{
				position: absolute;
				left: 0;
				top: 0;
				width: 180rpx;
				height: 180rpx;
			}
			.colum-flex{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 180rpx;
				.title{
					line-height: 40rpx;
					font-size: 32rpx;
					color: #111111;
				}
				.price{
					line-height: 40rpx;
					font-weight: bold;
					color: $text-price;
					font-size: 34rpx;
					text{
						font-size: 80%;
					}
				}
			}
		}
	}
	// 经法
	.the-tabs{
		background: #ECF0FF;
		margin: 0 $margin;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		position: relative;
		&-item{
			position: relative;
			z-index: 2;
			width: 25%;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999999;
			transition: all .4s;
			&.active{
				color: white;
			}
		}
		&-acitve-block{
			width: 25%;
			height: 70rpx;
			background: #446EFE;
			border-radius: 35rpx;
			position: absolute;
			left: 0;
			transition: all .4s;
		}
	}
	.the-flex{
		padding: $padding 20rpx;
		display: flex;
		flex-direction: row;
		&-item{
			width: calc(33.33% - 20rpx);
			margin: 0 10rpx;
			.cover{
				width: 100%;
				padding-top: 100%;
				background: #f8f8f8;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
			.title{
				font-size: 32rpx;
				color: #111111;
				padding: 10rpx 0;
				line-height: 40rpx;
			}
			.price{
				line-height: 40rpx;
				font-weight: bold;
				color: $text-price;
				font-size: 34rpx;
				text{
					font-size: 80%;
				}
			}
		}
	}
	// 模块
	.block{
		background-color: white;
		border-radius: $radius;
		margin: 0 $margin $margin;
		.block-title{
			padding: 0 $padding;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-weight: bold;
				color: #111111;
				font-size: 36rpx;
			}
			.more{
				background-color: #F5F5F5;
				font-size: 28rpx;
				height: 50rpx;
				border-radius: 25rpx;
				width: 120rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
				line-height: 50rpx;
				text-align: center;
				color: #999999;
				.more-icon{
					display: inline-block;
				}
			}
		}
	}
</style>
