<style>
  .diy-integral-mall .diy-component-edit .goods-list {
        line-height: normal;
        flex-wrap: wrap;
    }

    .diy-integral-mall .diy-component-edit .goods-item,
    .diy-integral-mall .diy-component-edit .goods-add {
        width: 50px;
        height: 50px;
        border: 1px solid #e2e2e2;
        background-position: center;
        background-size: cover;
        margin-right: 15px;
        margin-bottom: 15px;
        position: relative;
    }

    .diy-integral-mall .diy-component-edit .goods-add {
        cursor: pointer;
    }

    .diy-integral-mall .diy-component-edit .goods-delete {
        position: absolute;
        top: -11px;
        right: -11px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        padding: 0 0;
        visibility: hidden;
    }

    .diy-integral-mall .diy-component-edit .goods-item:hover .goods-delete {
        visibility: visible;
    }

    .diy-integral-mall .diy-component-edit hr {
        height: 0;
        border-width: 0 0 1px 0;
        border-bottom: 1px solid #e2e2e2;
        position: absolute;
        top: 250px;
        left: 25px;
        width: 95%;
    }

    /*-------------------- 预览部分 --------------------*/
    .diy-integral-mall .diy-component-preview .goods-list {
        flex-wrap: wrap;
        padding: 10px;
    }

    .diy-integral-mall .diy-component-preview .goods-item {
        position: relative;
    }

    .diy-integral-mall .diy-component-preview .goods-tag {
        position: absolute;
        top: 0;
        left: 0;
        width: 64px;
        height: 64px;
        background-position: center;
        background-size: cover;
    }

    .diy-integral-mall .diy-component-preview .goods-pic {
        width: 100%;
        height: 706px;
        background-color: #e2e2e2;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .diy-integral-mall .diy-component-preview .goods-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .diy-integral-mall .diy-component-preview .goods-cover-3-2 .goods-pic {
        height: 470px;
    }

    .diy-integral-mall .diy-component-preview .goods-list-2 .goods-pic {
        height: 343px;
    }

    .diy-integral-mall .diy-component-preview .goods-list--1 .goods-pic {
        width: 200px;
        height: 200px;
        margin-right: 20px;
    }

    .diy-integral-mall .diy-component-preview .goods-list--1 .goods-item {
        margin-bottom: 20px;
    }

    .diy-integral-mall .diy-component-preview .goods-list--1 .goods-item:last-child {
        margin-bottom: 0;
    }

    .diy-integral-mall .diy-component-preview .goods-name-static {
        height: 80px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        margin-bottom: 12px;
    }

    .diy-integral-mall .diy-component-preview .goods-price {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ff4544;
        line-height: 48px;
    }

    .diy-integral-mall .diy-component-preview .coupon-list {
        padding: 10px;
    }

    .diy-integral-mall .diy-component-preview .coupon-item {
        width: 256px;
        height: 130px;
        background-size: cover;
        background-position: center;
        margin: 10px;
    }

    .diy-integral-mall .diy-component-preview .coupon-condition {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
    }

</style>
<template>
  <div :class="{'active':mallData.isCked}">
    <div class="diy-component-options" v-if="mallData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-integral-mall">
      <div class="diy-component-preview" :style="cListStyle">
        <div v-if="data.showCoupon" style="overflow-x: auto;" class="coupon-list" flex="dir:left">
          <div style="display: inline-block" v-for="(item,cindex) in couponList" :key="cindex">
            <div class="coupon-item"
              :style="'background-image: url('+getIconLink(data.couponPicUrl)+'); color: '+data.couponColor+';'" flex="box:last">
              <div flex="dir:top box:last">
                <div flex="main:center cross:center">
                  <div>
                    <span style="font-size: 24px;">￥</span><span style="font-size: 32px;">50.00</span>
                  </div>
                </div>
                <div class="coupon-condition">满100可用</div>
              </div>
              <div flex="cross:center" style="width: 56px; padding: 0 15px;line-height: 1.15;font-size: 24px;">
                立即兑换
              </div>
            </div>
          </div>
        </div>
        <div v-if="data.showGoods" class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
          <div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
            <div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
              :style="cGoodsStyle">
              <div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)"></div>
              <div v-if="data.showGoodsTag" class="goods-tag"
                :style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
              <div :style="cGoodsInfoStyle">
                <div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
                  <template v-if="data.showGoodsName">{{item.name}}</template>
                </div>
                <div flex="box:last cross:bottom">
                  <div class="goods-price" :style="cPriceStyle">
                    <div>
                      <template v-if="item.integral > 0">{{item.integral}}积分</template>
                    </div>
                    <div v-if="data.listStyle == -1"
                      style="color: #909399;text-decoration: line-through;position: absolute;left: 0;bottom: 0;font-size: 24px;">
                      <span>￥{{item.originalPrice}}</span>
                    </div>
                    <div v-else style="color: #909399;text-decoration: line-through;font-size: 24px;line-height: 1">
                      <span>￥{{item.originalPrice}}</span>
                    </div>
                  </div>
                  <div v-if="cShowBuyBtn" style="padding: 0 10px;">
                    <el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="mallData.isCked">
        <el-form @submit.native.prevent label-width="150px">
          <template>
            <el-form-item label="显示优惠券">
              <el-switch v-model="data.showCoupon"></el-switch>
            </el-form-item>
            <el-form-item v-if="data.showCoupon" label="优惠券文字颜色">
              <el-color-picker v-model="data.couponColor"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="data.showCoupon" label="优惠券背景图片">
              <!-- <app-image-upload width="320" height="164" v-model="data.couponPicUrl"></app-image-upload> -->
              <div class="zk_pic_box" @click="choicImg=true,commomIndex=1" flex="main:center cross:center"
                :style="{backgroundImage:'url(' + getIconLink(data.couponPicUrl) + ')'}">
                <i v-if="data.couponPicUrl==''" class="el-icon-picture-outline"></i>
                <el-button type="danger" v-if="data.couponPicUrl!=''" class="image-delete" size="mini"
                  icon="el-icon-close" @click.stop="data.couponPicUrl=''" circle></el-button>
              </div>
            </el-form-item>
          </template>
          <template>
            <hr>
            <el-form-item style="margin-top: 35px" label="显示商品">
              <el-switch v-model="data.showGoods"></el-switch>
            </el-form-item>
            <el-form-item v-if="data.showGoods" label="商品列表">
              <div class="goods-list" flex>
                <div class="goods-item" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
                  :style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
                  <el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
                    icon="el-icon-close"></el-button>
                </div>
                <div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-if="data.showGoods" label="购买按钮颜色">
              <el-color-picker v-model="data.buttonColor"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="data.showGoods" label="列表样式">
              <el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
              <el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
              <el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
            </el-form-item>
            <el-form-item v-if="data.showGoods&&data.listStyle==1" label="商品封面图宽高比例">
              <el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
              <el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
            </el-form-item>
            <el-form-item v-if="data.showGoods" label="商品封面图填充">
              <el-radio v-model="data.fill" :label="1">填充</el-radio>
              <el-radio v-model="data.fill" :label="0">留白</el-radio>
            </el-form-item>
            <el-form-item label="商品样式">
              <el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
              <el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
              <el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
            </el-form-item>
            <el-form-item v-if="data.listStyle!==-1" label="文本样式">
              <el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
              <el-radio v-model="data.textStyle" :label="2">居中</el-radio>
            </el-form-item>
            <el-form-item v-if="data.showGoods" label="显示商品名称">
              <el-switch v-model="data.showGoodsName"></el-switch>
            </el-form-item>
            <template v-if="cShowEditBuyBtn && data.showGoods">
              <el-form-item label="显示购买按钮">
                <el-switch v-model="data.showBuyBtn"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.showBuyBtn && data.showGoods" label="购买按钮样式">
                <el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
                <el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
                <el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
                <el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
              </el-form-item>
              <el-form-item v-if="data.showBuyBtn && data.showGoods" label="购买按钮文字">
                <el-input maxlength='4' size="small" v-model="data.buyBtnText"></el-input>
              </el-form-item>
            </template>
            <el-form-item v-if="data.showGoods" label="显示商品角标">
              <el-switch v-model="data.showGoodsTag"></el-switch>
            </el-form-item>
            <el-form-item label="商品角标样式" v-if="data.showGoodsTag">
              <el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
                @change="goodsTagChange">
                {{tag.name}}
              </el-radio>
              <el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
              </el-radio>
            </el-form-item>
            <el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag && data.showGoods">
              <div class="zk_pic_box" @click="choicImg=true,commomIndex=2" flex="main:center cross:center"
                :style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
                <i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
                <el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
                  icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
              </div>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
              <el-input type="text" v-model="data.backgroundColor" size="small"
                style="width: 80px; margin-right: 25px;">
              </el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="isShowGoods">
      <choiceGood ref="choiceGood"></choiceGood>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="quxiaoGoods()">取 消</el-button>
        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import draggable from "vuedraggable"
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceGood from "../../common/choiceGood.vue";
  export default {
    props: ["mallData", "index", "dataLeng"],
    components: {
      draggable,
      ChooseImg,
      choiceGood
    },
    data() {
      return {
        choicImg: false,
        isShowGoods: false,
        data: this.mallData.data,
        commomIndex:-1,
        position: 'center center',
        repeat: 'no-repeat',
        couponList: [1, 2, 3, 4],
        goodsTags: [{
            name: '热销',
            picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
          },
          {
            name: '新品',
            picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
          },
          {
            name: '折扣',
            picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
          },
          {
            name: '推荐',
            picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
          },
        ],

      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if(this.commomIndex==1){
            this.data.couponPicUrl=msg.url;
        }else if(this.commomIndex==2){
            this.data.goodsTagPicUrl = msg.url;
        }
        this.choicImg = false;
      },
      cGoodsPicStyle(picUrl) {
        let style = `background-image: url(${this.getIconLink(picUrl)});` +
          `background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
        return style;
      },
      listStyleChange(listStyle) {
        if (listStyle === -1 && this.data.textStyle === 2) {
          this.data.textStyle = 1;
        }
      },
      deleteGoods(index) {
        this.data.list.splice(index, 1);
      },
      goodsTagChange(e) {
        this.data.goodsTagPicUrl = e;
        this.data.customizeGoodsTag = false;
      },
      customizeGoodsTagChange(e) {
        this.data.goodsTagPicUrl = '';
        this.data.customizeGoodsTag = true;
      },
      //选择商品
      getGoodsChoice() {
        var ckedArr = this.$refs.choiceGood.getChoicedGoods();
        console.log(ckedArr, 'ddd');
        this.data.list = this.data.list.concat(ckedArr);
        this.isShowGoods = false;
        this.$refs.choiceGood.toggleSelection();
      },
      //取消选择商品
      quxiaoGoods() {
        this.isShowGoods = false;
        this.$refs.choiceGood.toggleSelection();
      }

    },
    computed: {
      cListStyle() {
        if (this.data.backgroundColor) {
          return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
        } else {
          return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
        }
      },
      cList() {
        if (!this.data.list || !this.data.list.length) {
          const item = {
            id: 0,
            name: '演示商品名称',
            CoverImage: '',
            price: '0.00',
            integral: 50,
            originalPrice: '50.00',
          };
          return [item, item, ];
        } else {
          return this.data.list;
        }
      },
      cListFlex() {
        if (this.data.listStyle === -1) {
          return 'dir:top';
        } else {
          return 'dir:left';
        }
      },
      cItemStyle() {
        if (this.data.listStyle === 2) {
          return 'width: 50%;';
        } else {
          return 'width: 100%;';
        }
      },
      cGoodsStyle() {
        let style = 'border-radius:5px;';
        if (this.data.goodsStyle === 2) {
          style += 'border: 1px solid #e2e2e2;';
        }
        if (this.data.goodsStyle != 3) {
          style += 'background-color:#ffffff';
        }
        return style;
      },
      cGoodsInfoStyle() {
        let style = 'position:relative;';
        if (this.data.listStyle !== -1) {
          style += 'padding:20px;';
        } else {
          style += 'padding: 15px 20px 0 0;'
        }
        if (this.data.textStyle === 2) {
          style += 'text-align: center;';
        }
        return style;
      },
      cPriceStyle() {
        let style = 'margin-top: 10px;';
        if (this.data.textStyle === 2) {
          style += 'text-align: center;width: 100%;';
        }
        return style;
      },
      cGoodsFlex() {
        if (this.data.listStyle === -1) {
          return 'dir:left box:first';
        } else {
          return 'dir:top';
        }
      },
      cButtonStyle() {
        let style =
          `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height50px;padding:0 20px;`;
        if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
          style += `border-radius:999px;`;
        }
        if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
          style += `background:#fff;color:${this.data.buttonColor}`;
        }
        return style;
      },
      cShowBuyBtn() {
        return this.data.textStyle !== 2 &&
          this.data.showBuyBtn
      },
      cShowEditBuyBtn() {
        return this.data.textStyle !== 2
      },
    },
    mounted() {

    }
  };

</script>
