<template>
    <view class="app-submit-goods">

        <view v-if="plugin !== 'composition'"
              class="app-submit-goods-item">
            <view v-for="(goodsItem, goodsIndex) in newList.goods_list" :key="goodsIndex"
                  class="goods-item">
                <view class="dir-left-nowrap">
                    <view class="box-grow-0" style="position: relative;">
                        <view v-if="goodsItem.address_disabled" class="address-disabled">不在配送范围内</view>
                        <image class="goods-image"
                               :src="goodsItem.goods_attr.pic_url ? goodsItem.goods_attr.pic_url : goodsItem.cover_pic"></image>
                    </view>
                    <view class="box-grow-1 dir-top-nowrap">
                        <view class="goods-name box-grow-1">{{goodsItem.name}}</view>
                        <view class="box-grow-0">
                            <view class="dir-left-wrap attr-list">
                                <view v-for="(attrItem,attrIndex) in goodsItem.attr_list"
                                      :key="attrIndex"
                                      class="attr-item">
                                    {{attrItem.attr_group_name}}：{{attrItem.attr_name}}
                                </view>
                            </view>
                            <view class="dir-left-nowrap">
                                <view class="box-grow-1 goods-num">×{{goodsItem.num}}</view>
                                <view class="box-grow-0 goods-price-info">
                                    <view>
                                        <text v-for="(customCurrency,customCurrencyIndex) in goodsItem.custom_currency"
                                              :key="customCurrencyIndex">
                                            {{customCurrency}}+
                                        </text>
                                        <text class="goods-price-unit">￥</text>
                                        <text>{{goodsItem.total_original_price}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-for="(discount,discountIndex) in goodsItem.discounts"
                      :key="discountIndex"
                      :class="[themeTextClass]"
                      :style="{'text-align': 'right','padding-top': '12rpx','font-size': '24rpx','color': !is_gift ? theme.color : ''}">
                    <view style="display: inline-block; margin-right: 6rpx;">{{discount.name}}</view>
                    <template v-if="discount.value<0">-¥{{priceFormat(0-discount.value)}}</template>
                    <template v-else-if="discount.value>0">+¥{{priceFormat(discount.value)}}</template>
                    <template v-else>¥0.00</template>
                </view>
            </view>
        </view>

        <view v-else class="composition">
            <view class="" v-for="(compositionItem, compositionIndex) in newList.composition_list"
                  :key="compositionIndex">
					<view class="main-between info-box">
						<view class="main-left">
							<image class="gd-cover" :src="compositionItem.cover_img ? compositionItem.cover_img : compositionItem.goods_list[0].cover_pic" mode=""></image>
							<view>
								<view class="title t-omit">{{compositionItem.name}}</view>
								<view>
									<text class="price">
										<text class="dw">￥</text>
										<text class="rmb">{{compositionItem.total_price.split('.')[0]}}</text>
										<text class="decimal">.{{compositionItem.total_price.split('.')[1]}}</text>
									</text>
									<text class="price-line"><text>￥</text>{{compositionItem.original_price.toFixed(2)}}</text>
								</view>
								<view class="main-between">
									<view class="main-left">
										<view class="tag">{{compositionItem.tag}}</view>
										<view class="tag">套装</view>
										<!-- <view class="tag">满200减10</view> -->
									</view>
								</view>
								<view class="cross-center hxj-compositionItem-show" @click="showGoodsList=!showGoodsList">包含<text class="t-omit" style="width: 150rpx;">{{compositionItem.name}}</text>等{{compositionItem.goods_list.length}}个商品<image style="width: 28rpx;height: 28rpx;" :src="showGoodsList?'https://t17.9026.com/web/statics/image/index/arrow-12.png':'https://t17.9026.com/web/statics/image/index/arrow-11.png'" mode=""></image></view>
							</view>
						</view>
						<view class="cross-bottom">
							<view class="main-center cross-center receive" @click="receive" v-if="coupons.length>0">
								领券<image src="https://t17.9026.com/web/statics/image/index/arrow-right-facet-white.png" mode=""></image>
							</view>
						</view>
					</view>
<!--                <view v-for="(goodsItem, goodsIndex) in compositionItem.goods_list" :key="goodsIndex" class="goods-item" >
                    <view class="dir-left-nowrap" >
                        <view class="box-grow-0" style="position: relative;">
                            <view v-if="goodsItem.address_disabled" class="address-disabled">不在配送范围内</view>
                            <image class="goods-image-composition"
                                   :src="goodsItem.goods_attr.pic_url ? goodsItem.goods_attr.pic_url : goodsItem.cover_pic"></image>
                        </view>
                        <view class="box-grow-1 dir-top-nowrap" >
                            <view class="goods-name box-grow-1">{{goodsItem.name}}</view>
                            <view class="box-grow-0">
                                <view class="dir-left-wrap attr-list">
                                    <view v-for="(attrItem,attrIndex) in goodsItem.attr_list"
                                          :key="attrIndex"
                                          class="attr-item">
                                        {{attrItem.attr_group_name}}：{{attrItem.attr_name}}
                                    </view>
                                </view>
                                <view class="dir-left-nowrap goods-other">
                                    <view class="box-grow-1 goods-num">×{{goodsItem.num}}</view>
                                    <view v-if="compositionItem.type == 2" class="box-grow-0 goods-price-info">
                                        <view>
                                            <text v-for="(customCurrency,customCurrencyIndex) in goodsItem.custom_currency"
                                                  :key="customCurrencyIndex">
                                                {{customCurrency}}+
                                            </text>
                                            <text class="goods-price-unit">￥</text>
                                            <text>{{goodsItem.total_price}}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view >
                    <view v-for="(discount,discountIndex) in goodsItem.discounts"
                          :key="discountIndex"
                          :class="[themeTextClass]"
                          :style="{'text-align': 'right','padding-top': '12rpx','font-size': '24rpx','color': !is_gift ? theme.color : ''}">
                        <view style="display: inline-block; margin-right: 6rpx;">{{discount.name}}</view>
                        <template v-if="discount.value<0">-¥{{priceFormat(0-discount.value)}}
                        </template>
                        <template v-else-if="discount.value>0">+¥{{priceFormat(discount.value)}}
                        </template>
                        <template v-else>¥0.00</template>
                    </view>
                </view> -->
				<view   class="hxj-composition-goods" v-show="showGoodsList">
					<view  class="main-between cross-center hxj-composition-goods-item" v-for="(goodsItem, goodsIndex) in compositionItem.goods_list" :key="goodsIndex">
						<view class="hxj-composition-goods-name t-omit">{{goodsItem.name}}</view>
						<view class="main-left hxj-composition-goods-attr-list t-omit">
							<view v-for="(attrItem,attrIndex) in goodsItem.attr_list"
							      :key="attrIndex"
							      class="cross-center hxj-composition-goods-attr-item">
							    {{attrItem.attr_name}}
							</view>
						</view>
						<view class="hxj-composition-goods-total_price"><text>￥</text>{{goodsItem.total_price}}</view>
					</view>
				</view>
                <!-- <view class="composition-info" :class="[themeTextClass]" :style="{'color': !is_gift ? theme.color : ''}">
                    <view style="margin-bottom: 8rpx;">{{compositionItem.type == 1 ? '固定套餐' : '搭配套餐'}}
                        ￥{{compositionItem.total_price}}
                    </view>
                    <view class="composition-discount">已省 ￥{{compositionItem.composition_price}}</view>
                </view> -->
            </view>
        </view>

    </view>
</template>

<script>

    import {mapState} from 'vuex';

    export default {
        name: "app-submit-goods",
        props: {
            list: {
                type: Object
            },
            plugin: {
                type: String
            },
            index: {
                type: Number
            },
            theme: [String, Object],
        },
		data(){
			return{
				showGoodsList:false,
			}
		},
        computed: {
            ...mapState({
                appImg: state => state.mallConfig.__wxapp_img,
            }),
            themeTextClass() {
                if (typeof(this.theme) == 'string' && this.theme.indexOf('gift') > 0) {
                    return `${this.theme} ${this.theme}-color`;
                }
            },
            is_gift() {
                if (typeof(this.theme) == 'string' && this.theme && this.theme.indexOf('gift') > 0) {
                    return true;
                }else {
                    return false;
                }
            },
            newList:function () {
                return this.list;
            }
        },
        methods: {
            priceFormat(val) {
                if (isNaN(val)) {
                    return val;
                }
                return parseFloat(val).toFixed(2);
            },
        },
        mounted() {
            console.log(this.list.goods_list);
        }
    }
</script>

<style scoped lang="scss">
    .app-submit-goods {
        .composition {
            .composition-item {
                margin-top: #{24rpx};

                .composition-open {
                    text-align: center;
                    background-color: #fff;
                    height: #{84rpx};

                    .composition-btn {
                        display: inline-block;
                        border: #{2rpx} solid #bbbbbb;
                        font-size: #{24rpx};
                        color: #999999;
                        padding: 0 #{24rpx};
                        margin: #{12rpx} 0 #{16rpx};
                        height: #{56rpx};
                        line-height: #{54rpx};
                        border-radius: #{28rpx};

                        image {
                            width: #{22rpx};
                            height: #{12rpx};
                            margin-left: #{16rpx};
                        }
                    }
                }

                .composition-info {
                    background-color: #fff;
                    font-size: #{28rpx};
                    text-align: right;
                    padding: #{24rpx};

                    .composition-discount {
                        font-size: #{24rpx};
                    }
                }
            }
        }

        .goods-item {
            background: #fff;
            padding: #{28rpx} #{32rpx};
            border-bottom: #{1rpx} solid #e2e2e2;
            font-size: #{28rpx};

            .address-disabled {
                background: #ffecec;
                color: #ff4544;
                position: absolute;
                bottom: 0;
                left: 0;
                right: #{22rpx};
                padding: #{12rpx} 0;
                text-align: center;
                font-size: #{20rpx};
                z-index: 100;
            }

            .goods-image {
                width: #{156rpx};
                height: #{156rpx};
                display: block;
                margin-right: #{24rpx};
                font-size: #{24rpx};
            }
			.goods-image-composition {
			    width: #{106rpx};
			    height: #{106rpx};
			    display: block;
			    margin-right: #{24rpx};
			    font-size: #{24rpx};
			}

            .goods-name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.25;
            }

            .attr-list {
                margin-bottom: #{12rpx};
            }

            .attr-list, .goods-num {
                font-size: #{24rpx};
                color: #999999;
            }

            .goods-other {
                margin-top: #{16rpx};
            }

            .attr-item {
                margin-right: #{24rpx};
            }

            .attr-item:last-child {
                margin-right: 0;
            }

            .goods-price-info {
                text-align: right;
            }
        }

        .goods-item:last-child {
            border-bottom: none;
        }
		
		
		.hxj-composition-goods{
			width: 643rpx;
			height: auto;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin: 0 auto 32rpx;
			padding: 24rpx 28rpx;
			.hxj-composition-goods-item{
				height: 60rpx;
				.hxj-composition-goods-name{
					width: 224rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #222222;
				}
				.hxj-composition-goods-attr-list{
					width: 224rpx;
					height: 100%;
					font-size: 24rpx;
					color: #999999;
					.hxj-composition-goods-attr-item{
						height: 100%;
						margin-right: 5rpx;
					}
				}
				.hxj-composition-goods-total_price{
					font-size: 26rpx;
					font-weight: 500;
					color: #222222;
					text{
						font-weight: 300;
					}
				}
			}
		}
		
		
    }
	
	.receive{
		width: 92rpx;
		height: 38rpx;
		background: #FF0000;
		border-radius: 19rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
		image{
			width: 22rpx;
			height: 22rpx;
			margin-left: 7rpx;
		}
	}
	.info-box{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 35rpx;
		.gd-cover{
			width: 170rpx;
			height: 170rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 28rpx;
		}
		.title{
			width: 365rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
			line-height: 46rpx;
		}
		.price{
			color: #F93F3F;
			line-height: 58rpx;
			.dw{
				font-size: 24rpx;
				font-weight: 500;
			}
			.rmb{
				font-size: 40rpx;
				font-weight: 600;
			}
			.decimal{
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.price-line{
			font-size: 20rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #999999;
			line-height: 36rpx;
			margin-left: 21rpx;
		}
		.tag{
			width: auto;
			height: 28rpx;
			border: 1rpx solid #F59922;
			border-radius: 2rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #F59922;
			line-height: 23rpx;
			margin-right: 13rpx;
			padding: 0 9rpx;
		}
		.hxj-compositionItem-show{
			font-size: 24rpx;
			font-weight: 500;
			color: #A18353;
			line-height: 36rpx;
		}
	}
</style>