<template>
	<!-- 折叠框 -->
	<view class="myCollapse">
		<view class="head">
			<view>{{title}}</view>
			<view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
			<view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
			<view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 
		</view>
		<view class="body">
			<block v-if="isOpen">
				<view style="background-color: #FFFFFF;" class="funBox">
					<block v-if="title==='镜片种类'">
						<view class="noRange">
							<block v-for="(item) in funList" :key="item.key">
								<view  v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 
								@click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
							</block>
						</view>
						<view class="noRange">
							<block v-for="(item,index) in funList2" :key="item.key">
								<view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" 
								:style="colorList[index]" @click="choice2(index,item.isChioce)"></view>
							</block>
						</view>
					</block>
					<block v-else>
						<view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
						<view class="noRange">
							<block v-for="(item) in funList" :key="item.key">
								<view
								 v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
								 @click="choice(item.key ? item.key - 1 : item.mid, item.isChioce || item.checked)"
								>{{item.name}}</view>
							</block>
						</view>
						
						<view v-if="funList2.length !== 0" class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
						<view class="noRange" style="max-width: 624rpx">
							<block v-for="(item,index) in funList2" :key="item.key">
								<view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
								@click="choice2(index,item.isChioce)">{{item.name}}</view>
							</block>
						</view>
					</block>
				</view>
			</block>
			
			<block v-else>
				*<block v-for="(item,index) in funContent" :key="index">
					<text v-if="item!==null">{{item}}</text>
				</block>
			</block>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			isOpenProps:{
				// 是否展开，默认 true
				type: Boolean,
				default: true
			},
			funListProp:{
				"name":String,
				"isChioce": Number,
				"key":Number
			},
			funList2Prop:{
				type:Array,
			}
			,
			funContentProp: {
				type: Array
			},
			title:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isOpen:this.isOpenProps,
				// 颜色数组要与传入的值手动相同
				colorList:[
					"background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
					"background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
					"background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
					"background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
					"background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
				],
				funList: this.funListProp.attr || this.funListProp,
				funList2: this.funList2Prop || [],
				funContent: this.funContentProp
			};
		},

		methods:{
			myCollapseChange(isopen){
				this.isOpen = !isopen
			},
			choice(index,isChoice) {
				if(this.funList[index].type==="fun") {
					this.funList[index].isChioce = !isChoice
					if(!isChoice) {
						this.funContent[index] = this.funList[index].name
					} else {
						this.funContent[index] = ''
					}
				} else if(this.funList[index].type==="kind") {
					for(let i=0;i<this.funList.length;i++){
						this.funList[i].isChioce = false
					}
					this.funList[index].isChioce = !isChoice
					this.funContent[0]=this.funList[index].name
				} else {
					for(let i=0;i<this.funList.length;i++){
						this.funList[i].isChioce = false
					}
					for(let i=0;i<this.funList2.length;i++){
						this.funList2[i].isChioce = false
					}
					this.funList[index].isChioce = !isChoice
					this.funContent[0]=this.funList[index].name
				}
			},
			choice2(index,isChoice){
				if(this.funList2[index].type==="kind"){
					for(let i=0;i<this.funList2.length;i++){
						this.funList2[i].isChioce = false
					}
					this.funList2[index].isChioce = !isChoice
					this.funContent[1] = this.funList2[index].name
				} else {
					for(let i=0;i<this.funList.length;i++){
						this.funList[i].isChioce = false
					}
					for(let i=0;i<this.funList2.length;i++){
						this.funList2[i].isChioce = false
					}
					this.funList2[index].isChioce = !isChoice
					this.funContent[0]=this.funList2[index].name
				}
			}
		}
	}
</script>

<style lang="scss">
	.myCollapse{
		width: 100%;
		padding-bottom: 28rpx;
		margin-top: 7px;
		border-bottom: 1px solid #E9E9E9;
		.head{
			display: flex;
			justify-content: space-between;
			height: 24px;
			// font-family: PingFangSC-Medium;
			font-size: 16px;
			color: #333333;
			letter-spacing: -0.3px;
			text-align: justify;
			line-height: 24px;
			margin-bottom: 18rpx;
			.headRighted{
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid #CFCFCF;
				transform: scaleY(-1);
				margin-top: 10px;
			}
			.headMid{
				// font-family: PingFangSC-Regular;
				font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-left: -120rpx;
			}
			.headRight{
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid #CFCFCF;
				margin-top: 10px;
			}
		}
		.body{
			// font-family: PingFangSC-Regular;
			font-size: 12px;
			color: #666666;
			letter-spacing: 0;
			display: flex;
			flex-wrap: wrap;
			text{
				padding-left: 4px;
			}
		}
	}
	.funBox {
		// display: flex;
		width: 100%;
		// flex-wrap: wrap;
		// max-width: 624rpx;
		.range{
			// font-family: PingFangSC-Regular;
			font-size: 10px;
			color: #999999;
			letter-spacing: -0.19px;
			margin-bottom: 5px;
		}
		.noRange{
			display: flex;
			flex-wrap: wrap;
			// max-width: 624rpx;
			// margin-bottom: 28rpx;
			.boxChoiced,.boxChoice{
				height: 60rpx;
				border-radius: 4rpx;
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				letter-spacing: 0;
				line-height: 60rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				margin-right: 20rpx;
				margin-bottom: 13rpx;
			}
			.boxChoiced{
				background: rgba(255,107,74,0.15);
				color: #FF6B4A;
			}
			.boxChoice{
				background: #F2F2F2;
				color: #666666;
			}
			.boxChoiced-C,.boxChoice-C{
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin-right: 8px;
			}
			.boxChoiced-C{
				opacity: 0.7;
				border: 1px solid #FF6B4A;
			}
			.boxChoice-C{
				opacity: 0.7;
				border: 1px solid #FFFFFF;
			}
		}

	}
</style>