<template>
    <div v-if="bgColor" :style="{padding:'0 '+prConfig+'px',marginTop:mTOP+'px'}">
        <div class="home_coupon" :class="bgStyle===0?'':'couponOn'" :style="{background:bgColor[0].item}" v-if="bgColor.length>0">
            <div class="title-wrapper" :style="{color:titleColor}">
                <span :style="{color:titleColor}">领优惠券</span>
                <div class="right">查看更多 <span class="iconfont-diy iconjinru"></span></div>
            </div>
            <div class="coupon" v-if="couponBg.length>0">
                <div class="item" :style="{background:`linear-gradient(90deg,${couponBg[0].item} 0%,${couponBg[1].item} 100%)`}">
                    <div class="left">
                        <div class="num"><span>￥</span>50</div>
                        <div class="txt">满100元可用</div>
                    </div>
                    <div class="right">立<br>即<br>领<br>取</div>
                    <div class="roll up-roll" :style="{background:bgColor[0].item}"></div>
                    <div class="roll down-roll" :style="{background:bgColor[0].item}"></div>
                </div>
                <div class="item gary">
                    <div class="left">
                        <div class="num"><span>￥</span>50</div>
                        <div class="txt">满100元可用</div>
                    </div>
                    <div class="right">立<br>即<br>领<br>取</div>
                    <div class="roll up-roll" :style="{background:bgColor[0].item}"></div>
                    <div class="roll down-roll" :style="{background:bgColor[0].item}"></div>
                </div>
                <div class="item" :style="{background:`linear-gradient(180deg,${couponBg[0].item} 0%,${couponBg[1].item} 100%)`}">
                    <div class="left">
                        <div class="num"><span>￥</span>50</div>
                        <div class="txt">满100元可用</div>
                    </div>
                    <div class="right">立<br>即<br>领<br>取</div>
                    <div class="roll up-roll" :style="{background:bgColor[0].item}"></div>
                    <div class="roll down-roll" :style="{background:bgColor[0].item}"></div>
                </div>
        </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'home_coupon',
        cname: '优惠券',
        configName: 'c_home_coupon',
        icon: 'iconyouhuiquan2',
        type:1,// 0 基础组件 1 营销组件 2工具组件
        defaultName:'coupon', // 外面匹配名称
        props: {
            index: {
                type: null
            },
            num: {
                type: null
            }
        },
        computed: {
            ...mapState('mobildConfig', ['defaultArray'])
        },
        watch: {
            pageData: {
                handler (nVal, oVal) {
                    this.setConfig(nVal)
                },
                deep: true
            },
            num: {
                handler (nVal, oVal) {
                    let data = this.$store.state.mobildConfig.defaultArray[nVal]
                    this.setConfig(data)
                },
                deep: true
            },
            'defaultArray': {
                handler (nVal, oVal) {
                    let data = this.$store.state.mobildConfig.defaultArray[this.num]
                    this.setConfig(data);
                },
                deep: true
            }
        },
        data () {
            return {
                // 默认初始化数据禁止修改
                defaultConfig: {
                    name: 'coupon',
                    timestamp: this.num,
                    themeColor: {
                        title: '背景颜色',
                        name: 'themeColor',
                        default: [
                            {
                                item: '#FFFFFF'
                            }

                        ],
                        color: [
                            {
                                item: '#FFFFFF'
                            }

                        ]
                    },
                    titleColor: {
                        title: '标题颜色',
                        name: 'titleColor',
                        default: [
                            {
                                item: '#282828'
                            }

                        ],
                        color: [
                            {
                                item: '#282828'
                            }

                        ]
                    },
                    bgColor: {
                        title: '优惠券背景色',
                        name: 'bgColor',
                        default: [
                            {
                                item: '#FF7059'
                            },
                            {
                                item: '#F11B09'
                            }
                        ],
                        color: [
                            {
                                item: '#FF7059'
                            },
                            {
                                item: '#F11B09'
                            }

                        ]
                    },
                    bgStyle: {
                        title: '背景样式',
                        name: 'bgStyle',
                        type: 0,
                        list: [
                            {
                                val: '直角',
                                icon: 'iconPic_square'
                            },
                            {
                                val: '圆角',
                                icon: 'iconPic_fillet'
                            }
                        ]
                    },
                    prConfig: {
                        title: '背景边距',
                        val: 0,
                        min: 0
                    },
                    // 页面间距
                    mbConfig: {
                        title: '页面间距',
                        val: 0,
                        min: 0
                    }
                },
                pageData: {},
                bgColor: [],
                titleColor: [],
                couponBg: [],
                mTOP: 0,
                bgStyle:0,
                prConfig:0
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
                this.setConfig(this.pageData)
            })
        },
        methods: {
            setConfig (data) {
                if(!data) return
                if(data.mbConfig){
                    this.couponBg = data.bgColor.color;
                    this.titleColor = data.titleColor && data.titleColor.color[0].item;
                    this.mTOP = data.mbConfig.val;
                    this.bgColor = data.themeColor && data.themeColor.color;
                    this.bgStyle = data.bgStyle.type;
                    this.prConfig = data.prConfig.val;
                }
                // this.edge = data.lrConfig.val;
                // this.imgStyle = data.imgConfig.type
                // this.imgSrc = data.swiperConfig.list[0].img
            }
        }
    }
</script>

<style scoped lang="scss">
.couponOn{
    border-radius: 10px;
}
.home_coupon{
    background: #F8F8F8;
    .title-wrapper{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 13px;
        border-radius: 10px 10px 0 0;
        span{
            font-size: 12px;
        }  
        .right{
            font-size: 12px;
            span{
                font-size: 8px;
            }
        }     
    }   
}
.coupon{
    display: flex;
    align-items: center;
    padding: 5px 0 15px 10px;
   
    overflow: hidden;
    .item{
        flex-shrink: 0;
        position: relative;
        display: flex;
        width:152px;
        height:76px;
        background:rgba(233,51,35,1);
        color: #fff;
        border-radius: 5px;
        margin-right: 10px;
        &.gary{
            background: #D8D8D8;
        } 
        .left{
            width: 120px;
            height: 76px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .num{
                font-size: 24px;
                font-weight: bold;
                span{
                    font-size: 12px;
                }
            }    
            .txt{
                font-size: 12px;
            }     
        }          
        .right{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-left: 1px dashed #fff;
        }
            
        .roll{
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #F8F8F8;
            &.up-roll{
                right: 26px;
                top: -5px;
            }               
            &.down-roll{
                right: 26px;
                bottom: -5px;
            }
                
        }
    }
}      
</style>
