<template>
  <div :style="{marginTop:slider+'px'}">
    <div class="page-shop" :style="{paddingLeft:prConfig+'px',paddingRight:prConfig+'px',background:bgColor}" :class="bgStyle?'':'shopOn'">
      <div v-if="titleUrl" class="title-count">
        <img :src="titleUrl">
      </div>
      <!-- 风格一 -->
      <div class="mobile-page" v-if="isOne == 0">
        <div class="home-shop" v-for="(item, index) in shopList" :key="index">
          <div class="shop-info" :style="{background:bgColor.item}" :class="bgStyle?'':'shopOn'">
            <img class="bgImg" src="@/assets/images/store_bg.png" :class="bgStyle?'':'shopOn'">
            <div class="shop-title">
              <img src="@/assets/images/store_avatar.png">
              <div class="shop-name">{{ item.name }}</div>
              <div class="store-type" :style="{background:themeColor}">自营</div>
            </div>
          </div>
          <div class="shop-product" :class="bgStyle?'':'shopOn'">
            <div v-for="(itm, idx) in item.proList" class="item" :key="idx">
              <img v-if="itm.image" :src="item.image">
              <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
              <div class="info">
                <div v-if="titleShow" class="name line1">{{ itm.store_name }}</div>
                <div v-if="priceShow" class="price" :style="{color:themeColor}">¥ <span>{{ itm.price }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 风格二 -->
      <div class="mobile-page" v-if="isOne == 1">
        <div class="shop-list">
          <div v-for="(item, index) in shopList" class="list" :key="index">
            <img src="@/assets/images/store_avatar.png">
          </div>
        </div>
      </div>
      <!-- 风格三 -->
      <div class="mobile-page mobile-page-style-3" v-if="isOne == 2">
        <div class="home-shop shop-block" v-for="(item, index) in shopList" :key="index" :style="{borderRadius:(bgStyle == 1 ? '8px' : '')}">
          <div class="shop-block-top">
            <div class="image">
              <img class="store-avatar" src="@/assets/images/store_avatar.png">
              <div class="store-type">品牌店铺</div>
            </div>
            <div class="store-desc">
              <div class="store-name">
                <div class="store-title">小米商城</div>
                <div class="store-name-label">优选</div>
              </div>
              <div class="statistics">
                <div class="stars">
                  <i class="active-i el-icon-star-on"></i>
                  <i class="active-i el-icon-star-on"></i>
                  <i class="active-i el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </div>
                <div class="per-avg">人均 258 元</div>
                <div class="month-sale">月售 300+</div>
              </div>
              <div class="class-address">
                <div class="store-class">美妆护理</div>
                <div class="store-address">人民北路39号</div>
                <div class="store-distance">983m</div>
              </div>
              <div class="other-label-list">
                <div class="other-label-item">服务超给力</div>
                <div class="other-label-item">青羊区美容排行榜第一名</div>
              </div>
            </div>
          </div>
          <div class="goods-list">
            <div class="goods-block">
              <div class="left-label">
                <div class="left-label-tag">套餐</div>
              </div>
              <div class="goods-info-left">
                <i class="el-icon-s-goods" />
                <div class="price">¥198</div>
                <div class="line-price">¥680</div>
              </div>
              <div class="goods-info-right">
                <div class="goods-name">爆品推荐美容护肤单品优先抢购先到先得</div>
                <i class="el-icon-arrow-right" />
              </div>
            </div>
            <div class="goods-block">
              <div class="left-label">
                <div class="left-label-tag">优惠促销</div>
              </div>
              <div class="goods-info-left">
                <i class="el-icon-s-goods" />
                <div class="price">¥198</div>
                <div class="line-price">¥680</div>
              </div>
              <div class="goods-info-right">
                <div class="goods-name">爆品推荐美容护肤单品优先抢购先到先得</div>
                <i class="el-icon-arrow-right" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统一底部 -->
      <div class="shop-more">更多店铺<span class="iconfont iconjinru"></span></div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'
export default {
    name: 'home_shop',
    cname: '品牌好店',
    icon: 'icondianpujie',
    configName: 'c_home_shop',
    type:0,// 0 基础组件 1 营销组件 2工具组件
    defaultName:'shopList', // 外面匹配名称
    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:'shopList',
                timestamp: this.num,
                setUp: {
                    tabVal: "0"
                },
                logoConfig:{
                    type: 1,
                    header: '标题图片',
                    title: '最多可添加1张，图片建议尺寸242*48px',
                    url: ''
                },
                numConfig: {
                    val:4,
                    title: '店铺数量'
                },
                tabConfig: {
                    title: '展示样式',
                    tabVal: 0,
                    type: 1,
                    tabList: [
                        {
                            name: '风格一',
                            icon: 'icondanhang'
                        },
                        {
                            name: '风格二',
                            icon: 'iconduohang'
                        },
                        {
                          name: '风格三',
                          icon: 'icondanhang'
                        }
                    ]
                },
                titleShow: {
                    title: '是否显示商品名称',
                    val: true
                },
                priceShow: {
                    title: '是否显示价格',
                    val: true
                },
                bgStyle: {
                    title: '背景样式',
                    name: 'bgStyle',
                    type: 1,
                    list: [
                        {
                            val: '直角',
                            icon: 'iconPic_square'
                        },
                        {
                            val: '圆角',
                            icon: 'iconPic_fillet'
                        }
                    ]
                },
                prConfig: {
                    title: '背景边距',
                    val: 0,
                    min: 0
                },
                themeColor: {
                    title: '主题风格',
                    name: 'themeColor',
                    default: [{
                        item: '#333333'
                    }],
                    color: [
                        {
                            item: '#333333'
                        }

                    ]
                },
                bgColor: {
                    title: '背景颜色',
                    name: 'bgColor',
                    default: [{
                        item: '#fff'
                    }],
                    color: [
                        {
                            item: '#fff'
                        }

                    ]
                },
                // 页面间距
                mbConfig: {
                    title: '页面间距',
                    val: 0,
                    min: 0
                }
            },
            boxStyle: '',
            bgColor: '',
            themeColor: '',
            slider: 0,
            isOne: 0,
            pageData: {},
            bgStyle:0,
            prConfig:0,
            titleUrl: "",
            titleShow: true,
            priceShow: true,
            shopList:[
                {
                    name:'小米商城',
                    avatar:'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic:'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList:[
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name:'小米商城',
                    avatar:'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic:'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList:[
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name:'小米商城',
                    avatar:'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic:'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList:[
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name:'小米商城',
                    avatar:'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic:'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList:[
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                }

            ],

        }
    },
    mounted () {
        this.$nextTick(() => {
            this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
            this.setConfig(this.pageData)
        })
    },
    methods: {
        // 对象转数组
        objToArr(data) {
            let obj = Object.keys(data);
            let m = obj.map((key) => data[key]);
            return m;
        },
        setConfig (data) {
            if(!data) return;
            if(data.mbConfig){
                this.slider = data.mbConfig.val;
                this.bgStyle = data.bgStyle.type;
                this.prConfig = data.prConfig.val;
                this.bgColor = data.bgColor.color[0].item;
                this.themeColor = data.themeColor.color[0].item;
                this.isOne = data.tabConfig.tabVal;
                this.titleUrl = data.logoConfig.url;
                this.shopList =  (data.shopList && data.shopList.length > 0) ? data.shopList : this.shopList;
                this.titleShow = data.titleShow.val;
                this.priceShow = data.priceShow.val;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.shopOn{
    border-radius: 0!important;
}
.page-shop{
    border-radius: 8px;
}
.home-shop{
    margin-bottom: 10px;
    .shop-info{
        position: relative;
        width: 100%;
        height: 100px;
        border-radius: 8px 8px 0 0;
        .bgImg{
            width: 100%;
            height: 100%;
            border-radius: 8px 8px 0 0;
        }
        .shop-title{
            position: absolute;
            top: 10px;
            left: 10px;
            background: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            max-width: 60%;
            border-radius: 12px;
            padding: 3px 9px;
            .empty-box{
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-right: 4px;
                border-radius: 50%;
            }
             img{
                width: 18px;
                height: 18px;
                margin-right: 4px;
                border-radius: 50%;
            }
            .store-type{
                font-size: 10px;
                color: #fff;
                background-color: #e93323;
                padding: 0 5px;
                line-height: 19px;
                height: 19px;
                margin-left: 20px;
                border-radius: 14px;
            }
            .shop-name{
                font-size: 14px;
            }
        }
    }
    .shop-product{
        display: flex;
        background: #fff;
        padding: 10px 10px 0;
        border-radius: 0 0 8px 8px;
        .item{
            width: 31.3%;
            margin: 0 3.05% 10px 0;
            &:nth-child(3n) {
                margin-right: 0;
            }
            .empty-box{
                width: 100%;
                height: 107px;
                .icontupian{
                    font-size: 30px;
                }
            }
            .info{
                padding: 8px 5px 0;
                text-align: center;
                .name{
                   font-size: 14px;
                    color: #282828;
                }
                .price{
                    font-size: 12px;
                    margin-top: 5px;
                    font-weight: bold;
                    span{
                        font-size: 15px;

                    }
                }

            }
        }
    }
}
.shop-list{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    .list{
        width: 23.5%;
        margin: 0 2% 10px 0;
        background-color: #FEFEFF;
        border-radius: 6px;
        height: 70px;
        &:nth-child(4n){
            margin-right: 0;
        }
        .empty-box,img{
            width: 100%;
            height: 70px;
        }
    }
}
.shop-more{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 13px 0;
    color: #999999;
    font-size: 13px;
    .iconfont{
        font-size: 8px;
        margin-left: 3px;
    }
}
.title-count{
    text-align: center;
    padding: 10px 0;
    img{
        max-width: 100%;
        width: 133px;
        // height: 80px;
    }
}
.mobile-page-style-3{
  --store-avatar-size-: 100px;

  .shop-block{
    --shop-block-background-: #ffffff;
    padding: 10px;
    background: var(--shop-block-background-);

    .shop-block-top{
      width: 100%;
      height: var(--store-avatar-size-);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;

      .image{
        height: var(--store-avatar-size-);
        width: var(--store-avatar-size-);
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        .store-avatar{
          width: 100% !important;
          height: 100% !important;
        }
        .store-type{
          position: absolute;
          top: 0;
          left: 0;
          height: 18px;
          line-height: 18px;
          padding: 0 5px;
          font-size: 12px;
          background: #f5dda9;
          color: #000000;
          border-radius: 3px;
        }
      }
      .store-desc{
        padding-left: 10px;
        width: calc(100% - var(--store-avatar-size-));
        height: var(--store-avatar-size-);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: flex-start;

        .store-name{
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          height: 25px;
          line-height: 25px;

          .store-title{
            font-size: 15px;
            font-weight: bold;
            max-width: calc(100% - 40px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .store-name-label{
            height: 17px;
            line-height: 18px;
            font-size: 12px;
            background: black;
            color: #93674b;
            border-radius: 3px;
            width: 35px;
            text-align: center;
            margin-left: 5px;
          }
        }
        .statistics{
          --stars-width-: 80px;
          --month-sale-width-: 65px;
          --stars-size-: calc((var(--stars-width-) - 5px) / 5);

          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 25px;
          font-size: 12px;

          .stars{
            width: var(--stars-width-);

            i{
              height: var(--stars-size-) !important;
              line-height: var(--stars-size-) !important;;
              width: var(--stars-size-) !important;
              background: #cccccc;
              color: #FFFFFF;
              float: left;
              text-align: center;
              border-radius: 1px;
            }
            i:not(:last-child){
              margin-right: 1px;
            }
            .active-i{
              background: #f65906!important;
            }
          }
          .per-avg{
            width: calc(100% - (var(--stars-width-) + var(--month-sale-width-)));
            padding-left: 5px;
            height: 15px;
            line-height: 16px;
            color: #919191;
          }
          .month-sale{
            text-align: right;
            width: var(--month-sale-width-);
            height: 15px;
            line-height: 16px;
            color: #919191;
          }
        }
        .class-address{
          height: 25px;
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          color: #7a7a7a;
          .store-class{
            width: 65px;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 5px;
          }
          .store-address{
            width: calc(100% - 65px - 60px);
            white-space: nowrap;
            overflow: hidden;
          }
          .store-distance{
            color: #3a3a3a;
            width: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-align: right;
          }
        }
        .other-label-list{
          height: 25px;
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          white-space: nowrap;
          overflow: hidden;
          .other-label-item{
            height: 18px;
            line-height: 18px;
            padding: 0 5px;
            background: #fcf0e6;
            color: #f19d75;
            border-radius: 3px;
            font-size: 12px;
          }
          .other-label-item:not(:last-child){
            margin-right: 5px;
          }
        }
      }
    }

    .goods-list{
      width: 100%;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: flex-start;
      .goods-block{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        height: 30px;
        .left-label{
          --left-label-tag-border-color-: #f8ddd4;

          width: var(--store-avatar-size-);
          height: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-end;
          align-items: center;
          padding-right: 10px;

          .left-label-tag{
            border: 1px solid var(--left-label-tag-border-color-);
            padding: 0 5px 0 10px;
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            color: #e75a29;
            position: relative;
          }
          .left-label-tag:after, .left-label-tag:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            left: 100%;
            position: absolute;
            top: -2px;
            width: 0;
          }
          .left-label-tag:after {
            border-width: 10px;
            border-left-color: var(--shop-block-background-);
            top: 0;
          }
          .left-label-tag:before {
            border-width: 12px;
            border-left-color: var(--left-label-tag-border-color-);
          }
        }
        .goods-info-left{
          width: calc((100% - var(--store-avatar-size-)) * 0.4);
          height: 100%;
          padding-left: 10px;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;

          .el-icon-s-goods{
            height: 18px;
            width: 18px;
            background: linear-gradient(179deg, #fd931e, #ec6b00);
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
            color: #FFFFFF;
          }
          .price{
            color: #e33a25;
            font-size: 12px;
            margin-right: 5px;
          }
          .line-price{
            color: #767676;
            font-size: 12px;
            text-decoration: line-through;
          }
        }
        .goods-info-right{
          width: calc((100% - var(--store-avatar-size-)) * 0.6);
          height: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          .goods-name{
            width: calc(100% - 15px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 10px;
            font-size: 12px;
          }
          .el-icon-arrow-right{
            height: 30px;
            line-height: 30px;
            width: 15px;
            text-align: center;
            font-size: 15px;
          }
        }
      }
    }
  }
}
</style>
