<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>