<template>
    <view class="content">
        <view class="top">
            <view class="topItem">
                <view class="topItem_left">选择</view>
                <view @click="openPopup()" class="topItem_right">
                    {{ pfname }}
                    <u--image width="40rpx" height="40rpx" src="/static/myinfo/btn_right.png" ></u--image>
                </view>
            </view>
            <!-- <view class="topItem">
                <view class="topItem_left">配送</view>
                <view class="topItem_right">
                    请填写地址
                    <u--image width="40rpx" height="40rpx" src="/static/myinfo/btn_right.png" ></u--image>
                </view>
            </view> -->
            <view class="topItem">
                <view class="topItem_left">加工费</view>
                <view class="topItem_right2">
                    {{info.processingFee +'/'+info.processingUnit}}
                </view>
            </view>
            <view class="topItem">
                <view class="topItem_left">包装袋费用</view>
                <view class="topItem_right2">
                    {{info.packagingFee +'/'+info.packagingUnit}}
                </view>
            </view>
            <view class="topItem">
                <view class="topItem_left">制作说明</view>
                <view class="topItem_right2">
                    {{info.assemblyGuide}}
                </view>
            </view>
            <view class="topItem">
                <view class="topItem_left">成品指标</view>
                <view class="topItem_right2">
                    {{info.productSpec}}
                </view>
            </view>
        </view>


        <view class="bottom">
            <view class="bottomitem" v-for="(item,index) in list" :key="index">
                <u--image width="40rpx" height="40rpx" src="/static/market/icomx_quertj1.png" ></u--image>
                {{ item }}
            </view>
        </view>

        <u-popup :closeable='true' :round="10" :show="popupShow" @close="close" @open="open">
            <view class="popupView">
                <view class="scrollview">

                    <!-- 顶部图片和价格 -->
                    <view class="spinfo">
                        <view class="spinfo_img">
                            <u--image radius='16rpx' width="200rpx" height="200rpx" :src="checkpfImg" ></u--image>
                        </view>
                        <view class="spinfo_text">
                            <view class="spinfo_text1">总价</view>
                            <view class="menus_1_right">
                                <text class="mr1">￥</text>
                                <text class="mr2">{{computerAllPrice()}}</text>
                                <!-- <text class="mr1" >{{ '.'+ 99 }}</text> -->
                            </view>
                            <!-- <view class="spinfo_text2">已选6种配方</view> -->
                        </view>
                    </view>

                    <!-- 选择配方 -->
                    <view class="selectPF">
                        <view class="selectPF_title">
                            <view style="font-size: 28rpx;font-weight: bold;color: #333333;">推荐配方</view>
                            
                            <!-- <view style="font-size: 28rpx;font-weight: 500;color: #46A6FF;">确定</view> -->
                        </view>
                        <view class="pflist">
                            <view @click="checkpf(item,index)" :class="ischeckpf==index?'checkPF_item':'PF_item'" v-for="(item,index) in pflist" :key="index">
                                {{ item.name }}
                            </view>
                        </view>
                        <view class="selectPF_title selectPF">
                            <view style="font-size: 28rpx;font-weight: bold;color: #333333;">配方原料</view>
                        </view>
                        <view class="pfinfo">
                            <view class="pfinfo_item" v-for="(item,index) in pfinfolist" :key="index">
                                <view class="pfinfo_title">
                                    <view style="font-size: 28rpx;font-weight: bold;color: #333333;">
                                        {{item.name}} <text style="padding-left: 12rpx;font-size: 24rpx;font-weight: 500;color: #999;">{{ item.unitPrice + '元 /'+ item.unit }}</text>
                                    </view>
                                    <view style="font-size: 28rpx;font-weight: 500;color: #333;">
                                        {{ '￥' + computerPrice(item)   }}
                                    </view>
                                </view>
                                <view class="pfinfo_title">
                                    <view style="font-size: 28rpx;font-weight: bold;color: #999;">
                                       数量
                                    </view>
                                    <view >
                                        <u-number-box :min="1" :max="999" integer button-size="28" v-model="item.quantity" @blur="valblur($event,item)" @change="valChange"></u-number-box>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="selectPF_title selectPF">
                            <view style="font-size: 28rpx;font-weight: bold;color: #333333;">购买数量</view>
                            <view>
                                <u-number-box :min="1" :max="999" integer button-size="28" v-model="num" @blur="valblur($event,'num')" @change="valChange"></u-number-box>
                            </view>
                            <!-- <view style="font-size: 28rpx;font-weight: 500;color: #46A6FF;">确定</view> -->
                        </view>
                    </view>

                    <view style="height: 100rpx;"></view>
                </view>
            </view>
		</u-popup>
    </view>
</template>
<script>
export default {
    props: {
        info: {
            type: Object,
            default: null,
        },
    },
watch:{
    info: {
        immediate: true,
        handler(val) {
           console.log(val);
            //承诺保障
            // this.list = val?.promise?.split(',')
            this.list = val?.promiseList
            //配方列表
            this.pflist = val?.specsList
            if (this.pflist?.length>0) {
                //默认点击第一项
                this.checkpf(this.pflist[0],0)
            }
        },
    }
},
data() {
return {
    newsList:[],
    pflist:[],
    ischeckpf:0,
    num:1,
    pfinfolist:[],
    popupShow:false,
    list:[
        '正品保障','质量保障','包邮','可配送全球','7天无理由退换'
    ],
    pfname:'请选择规格',
    checkpfImg:''
}
},
onLoad(e) {
    
},
methods: {
    openPopup(){
        this.popupShow = true
    },
    computerPrice(item){
        //计算出单价
        if (item?.unitPrice && item?.quantity) {
            item.price = (Number(item?.unitPrice) * Number(item?.quantity))
            return (Number(item?.unitPrice) * Number(item?.quantity)).toFixed(2)
        }else{
            return 0
        }
    },
    computerAllPrice(){
        // console.log('this.pfinfolist',this.pfinfolist);
        if (this.pfinfolist?.length>0) {
            let Price = 0 
            this.pfinfolist.forEach(item => {
                if (item?.price) {
                    Price += item.price
                }else{
                    Price += (Number(item?.unitPrice) * Number(item?.quantity))
                }
            });
            return (Price * this.num).toFixed(2)
        }else{
            let Price = this.pflist[this.ischeckpf]?.price || 0 
            return (Price * this.num).toFixed(2)
        }
    },
    checkpf(item,index){
        this.ischeckpf = index

        this.pfname = item.name
        this.checkpfImg = item.fileList[0].fileUrl
        this.pfinfolist = item.originalRecipeList
    },
    open() {
    },
    close() {
        this.popupShow = false
    },
    valChange(e){
        console.log(e);
    },
    valblur(e,item){
        if (e.value == '') {
            console.log(item === 'object');
            if (typeof item === 'object') {
                console.log('quantity[item]',item.quantity);
                if (item.quantity==1) {
                    item.quantity = 2 
                }else{
                    item.quantity = 1
                }
            }else{
                console.log('this[item]',this[item]);
                if (this[item] == 2) {
                    this[item] = 1
                }else{
                    this[item] = 2
                }
            }
        }
    },
    getCheckData(){
        let porList = this.pfinfolist.map(v=>{
            return {
                id:v.id,
                quantity:v.quantity
            }
        })
        let data = {
            specsId:this.pflist[this.ischeckpf].id,
            num:this.num,
            porList:porList
        }
        return data
    }
}
}
</script>

<style>
.content{
    width: 702rpx;
    height: 620rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
}
.bottom{
    width: 702rpx;
    height: 160rpx;
    background: #EEEEEE;
    opacity: 1;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    align-content: space-around;
}
.bottomitem{
    display: flex;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
    margin-left: 10rpx;
}

.top{
    width: 702rpx;
    /* height: 584rpx; */
    height: 460rpx;
    background: #FFFFFF;
    opacity: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.topItem{
    width: 640rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
}
.topItem_left{
    display: flex;
    width: 140rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.topItem_right{
    display: flex;
    width: 400rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;

    text-align: right;
    flex-direction: row;
    justify-content: flex-end;
}
.topItem_right2{
    display: flex;
    width: 400rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
    line-height: 36rpx;

    text-align: right;
    flex-direction: row;
    justify-content: flex-end;

    /* display: -webkit-box; */
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}

.popupView{
    height: 1000rpx;
    display: flex;
    padding-top: 100rpx;
    flex-direction: column;
    align-items: center;
}
.scrollview{
    height: 850rpx;
    width: 702rpx;
    overflow: auto;
}

.spinfo{
    display: flex;
}
.spinfo_img{
    width: 200rpx;
    height: 200rpx;
    background-color: #666;
    border-radius: 16rpx;
}

.spinfo_text{
    margin-left: 24rpx;
    width: 400rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.spinfo_text1{
    width: 56rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #999999;
    line-height: 36rpx;
}
.menus_1_right{
    display: flex;
    align-items: center;
}
.mr1{
    height: 33rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #F6514F;
    line-height: 36rpx;
}
.mr2{
    height: 47rpx;
    font-size: 40rpx;
    font-weight: bold;
    color: #F6514F;
    line-height: 36rpx;
}
.spinfo_text2{
    width: 170rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.selectPF{
    margin-top: 40rpx;
}
.selectPF_title{
    display: flex;
    justify-content: space-between;
}
.pflist{
    display: flex;
    margin-top: 40rpx;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.PF_item{
    min-width: 160rpx;
    height: 80rpx;
    background: #EEEEEE;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin: 10rpx;
    padding: 0 24rpx;

    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 80rpx;
    text-align: center;
}
.checkPF_item{
    min-width: 160rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin: 10rpx;
    padding: 0 24rpx;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFF;
    line-height: 80rpx;
    text-align: center;
}
.pfinfo{
    width: 702rpx;
}
.pfinfo_item{
    width: 702rpx;
    height: 160rpx;
    background: #EEEEEE;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;

    margin-top: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.pfinfo_title{
    width: 600rpx;
    display: flex;
    justify-content: space-between;
}
</style>
    