<template>
    <view class="container">
        <view class="detail">
            <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
            <view class="detail2">
                <view class="detail2_name">{{details.data.p_name}}</view>
                <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
                <view class="detail2_price">
                    <span>￥{{details.data.p_sale_price*count}}</span>
                    <view class="counter">
                            <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
                            <text>{{count}}</text>
                            <view class="btn" @click="counter(true)">+</view>
                    </view>                    
                </view>
            </view>
        </view>
        <view class="choose">
            <view class="colour">
                <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
                <view class="colour_exp">*{{colour}}</view>
                <view>
                <view class="colour2">
                    <view 
                    v-for="(items,index) in details.data.skuList" 
                    :key="index" 
                    @click="viewChoose(index)"
                    class="colour2_view"
                    v-bind:class="{'colour2_viewed': chooseNum == index}"
                    >
                        <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>    
                    </view>
                </view>
                </view>
                <hr/>
            </view>
            <view class="size">
                <view class="size1">
                    <view class="size1_1">框架尺寸</view>
                    <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
                </view>
                <view class="colour"> 
                    <view class="colour_exp">*{{colour}}</view>
                </view>
                <view class="D3_list">
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[0].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="300"/>
                                <text>{{details.data.frame_width}}mm</text>
                           </view>
                            <view>{{parameter[0].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[1].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="190"/>
                                <view>{{details.data.glass_width}}mm</view>
                            </view>
                            <view>{{parameter[1].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[2].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                            <c-progress class="c-progress"  :inner_widthProp="210"/>
                            <view>{{details.data.glass_height}}mm</view>
                            </view>
                            <view>{{parameter[2].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[3].img"></image></view>
                        <view class="D3_list_jDu">
                            
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="160"/>
                                <view>{{details.data.nose_width}}mm</view>
                            </view>
                            <view>{{parameter[3].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[4].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="260"/>
                                <view>{{details.data.leg_long}}mm</view>
                            </view>
                           <view>{{parameter[4].standard}}</view>
                        </view> 
                    </view>
                    <hr/>
                </view>
            </view>
            <view class="part">
                <view class="size1">
                    <view class="size1_1">配件</view>
                    <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
                </view>
                <view class="colour_exp">*0290</view>
                <view class="part_som">
                    <view 
                    v-for="(part) in part" 
                    :key="part.key"
                    v-bind:class="{'size_viewed': part.is_actived}"
                    >
                    <image v-bind:src="part.img"></image>
                </view>
                </view>
            </view>
        </view>
        <view class="buy">
            <view class="buy1">选了镜框，想选镜片？</view>
            <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
            <view class="buy3">
                <view class="buy3_1">暂时不选</view>
                <view class="buy3_2" @click="popArgs">立即去选</view>
            </view>
        </view>
        <view class="zhanwei"></view>
        <view class="button"><view>立即结算</view></view>
    </view>
</template>
<script>
import CProgress from '../../components/UniSliper/UniSliper'
import store from '@/store'

export default {
    components: {
        CProgress
    },
    data(){
        return{
            count: 1,
            colour: '1.56非球面防蓝光_亚黑色',
            chooseNum : '',
            parameter:[
                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
            ],
            //配饰
            part:[
                {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
                {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
                {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
                {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
                {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
            ],
        }
    },

    computed: {
        details(){
            return this.$store.state.detailStandard_k.list
        },
    },
    onLoad:function(){
        store.dispatch('detailStandard_k/fetch', {
			uid: "1",
			pid: "26",
		});
        // console.log(this.$store.state.detailStandard_k.list+'ssss');
    },
    methods: {
        counter(isadd){
		    if(isadd){
				this.count++
			}else{
				this.count <= 1? this.disabled = true:this.count--
            }
        },
        colourChange(index,e){
            this.colour = e ; //颜色选择
            // console.log(index,e);

        },
        viewChoose(index){
            this.chooseNum = index
        },
        popArgs(){
            uni.navigateTo({
				url: '../detailsChoiceArgs/detailsChoiceArgs',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
        }
    }

}
</script>

<style lang="scss">
.container{
    min-height: 100vh;
    background: #F2F2F2;
    padding-top: 10px;
    box-sizing: border-box;
}
hr{
    border: none;
    height: 1px;
    background: #F2F2F2;
    margin-top: 18px;
}
.detail{
    height: 272rpx;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.detail1{
    height: 178rpx;
    width: 188rpx;
    image{
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}
.detail2{
    width: 68%;
    view{
        margin-bottom: 6px;
        font-family: PingFangSC-Regular;
    }
    .detail2_name{
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
    .detail2_tui{
        font-size: 10px;
        color: #999999;
        letter-spacing: -0.19px;
        span{
            margin-right: 10px;
        }
    }
    .detail2_price{
        font-size: 14px;
        color: #FF6B4A;
        letter-spacing: -0.26px;
    }
}
.counter{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 28rpx;
	color: #333333;
	width: 122rpx;
    float: right;
	.btn{
		display: flex;
		justify-content: center;
		line-height: 32rpx;
        height: 32rpx;
		width: 32rpx;
		background-color: #F2F2F2;
		color: #CFCFCF;
		}
}
.choose{
    background: #FFFFFF;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 8px;
    .colour1{
        span{
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            letter-spacing: -0.3px;
            text-align: justify;
            line-height: 24px;
            font-weight: bold;
        }
        image{
            float: right;
            width: 40rpx;
            height: 36rpx;
        }
    }
    .colour_exp{
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #666666;
        letter-spacing: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .colour2{
        display: grid;
        grid-template-columns: repeat(5, 17%);
        justify-content: space-between ;
        grid-row-gap: 10px;
        margin-bottom: 14px;
        .colour2_view{
            border: 1px solid #F2F2F2;
            image{
                width: 100rpx;
                height: 60rpx;
            }
        }
        .colour2_viewed{
            border: 1px solid #FF6B4A;
            image{
                width: 100rpx;
                height: 60rpx;
            }
        }
    }
}
.size,.part{
    margin-top:14px;
    .size1{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .size1_1{
            font-weight: bold;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            letter-spacing: -0.3px;
            line-height: 24px;
        }
        view{
            span{
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #FF6B4A;
                letter-spacing: -0.26px;
                margin-right: 12px;
            }
            image{
                width: 40rpx;
                height: 36rpx;
            }
        }
    }
    .size2{
        view{
            display: inline-flex;
            align-items: center;
            justify-content: center; //字体居中
            margin-right: 12px;
            margin-bottom: 20px;
            width: 136rpx;
            height: 60rpx;
            background: #F2F2F2;
            border-radius: 2px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
        }
        view:hover{
            color: #FF6B4A;
            background: rgba(255,107,74,0.15);
        }
    }
    .D3_list{
        margin-bottom: 4px;
    }
    .D3_list>view{
        display: flex;
        align-content: center;
        margin-bottom: 10px;
        view{
            margin-right: 10px;
        }
    }
    .D3_list image{
        width: 50px;
        height: 25px;
        margin-right: 6px;
    }
    .D3_list span{
        margin-left: 6px;
        margin-right: 5px;
        font-family: 'PingFangSC-Regular';
    }
    .D3_list_jDu{
        view{
            font-family: PingFangSC-Regular;
            font-size: 10px;
            color: #999999;
            letter-spacing: -0.19px;
        }
        .D3_list1{
            display: flex;
        }
    }
}
.part{
    .part_som{
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(4, 22%);
        grid-row-gap: 12px;
        margin-bottom: 14px;
        view{
            border: 1px solid #F2F2F2;
            height: 72rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .size_viewed{
            border: 1px solid #FF6B4A;
            height: 72rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.buy{
    height: 300rpx;
    background: #FFFFFF ;
    margin-top: 10px;
    border-radius: 8px;
    padding-top: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.buy1{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-align: center;
}
.buy2{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin: 10px;
}
.buy3{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-top: 14px;
    view{
        border-radius: 20px;
        width: 240rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .buy3_1{
        margin-right: 20px;
        background: rgba(255,107,74,0.15);
        color: #FF6B4A ;
    }
    .buy3_2{
        background: #FF6B4A;
        color: #FFFFFF ;
    }
}
.zhanwei{
    background: #F2F2F2;
    height: 120rpx;
}
.button{
    position: fixed;
    bottom: 0;
    width:100%;
    height: 112rpx;
    background: #FF6B4A 100%;
    view{
        color: #FFFFFF;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 16px;
    }
}
</style>