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

  .diy-advance .diy-component-edit .goods-item,
  .diy-advance .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-advance .diy-component-edit .goods-add {
    cursor: pointer;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .diy-advance .diy-component-preview .goods-advance-timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background: -webkit-linear-gradient(left, #f44, #ff8b8b);
    background: -webkit-gradient(linear, left top, right top, from(#f44), to(#ff8b8b));
    background: -moz-linear-gradient(left, #f44, #ff8b8b);
    background: linear-gradient(90deg, #f44, #ff8b8b);
    color: #fff;
  }

  .diy-advance .plugin-name {
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    color: #ff4544;
    font-size: 24px;
    background-color: #feeeee;
    border-radius: 14px;
    margin-right: 8px;
  }

  .des-text {
    display: inline-block;
    height: 28px;
    border: 1px solid #ff4544;
    border-radius: 8px;
    font-size: 19px;
    line-height: 26px;
    text-align: center;
    padding: 0 5px;
  }

</style>
<template>
  <div :class="{'active':advanceData.isCked}">
    <div class="diy-component-options" v-if="advanceData.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-advance">
      <div class="diy-component-preview" :style="cListStyle">
        <div 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 :style="cTimerStyle" :flex="cTimerFlex" class="goods-advance-timer"
                        v-if="data.listStyle===1 || data.listStyle===2">
                    <div v-if="data.listStyle===1">预售</div>
                    <div>距结束 xx:xx:xx</div>
                </div>
              </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"><span v-if="data.listStyle!=1" class="plugin-name">预售</span>{{item.name}}</template>
                </div>
                <div v-if="data.listStyle===-1" style="color: #909399;">
                    <i class="el-icon-time"></i>
                    距结束 <span style="color: #FF4544;">xx:xx:xx</span>
                </div>
                <div flex="box:last cross:bottom">
                    <div class="goods-price" :style="cPriceStyle">
                        <div class="des-text">
                            定金{{item.deposit}}抵{{item.swell_deposit}}
                        </div>
                        <div style="color: #ff4544;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: -1px;">
                            <span>￥{{item.price}}</span><span v-if="data.listStyle == -1" style="color: #909399;text-decoration: line-through;font-size: 24px;margin-left: 10px;">￥{{item.originalPrice}}</span>

                        </div>
                        <div v-if="data.listStyle != -1" 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: 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="advanceData.isCked">
        <el-form @submit.native.prevent label-width="150px">
          <el-form-item label="商品列表">
            <draggable class="goods-list" flex v-model="data.list" ref="parentNode">
              <div class="goods-item drag-drop" 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>
            </draggable>
          </el-form-item>
          <el-form-item label="购买按钮颜色">
            <el-color-picker v-model="data.buttonColor"></el-color-picker>
          </el-form-item>
          <el-form-item 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 label="商品封面图宽高比例" v-if="data.listStyle==1">
            <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 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 label="显示商品名称">
            <el-switch v-model="data.showGoodsName"></el-switch>
          </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>
          <template v-if="cShowEditBuyBtn">
            <el-form-item label="显示购买按钮">
              <el-switch v-model="data.showBuyBtn"></el-switch>
            </el-form-item>
            <el-form-item v-if="data.showBuyBtn" 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" label="购买按钮文字">
              <el-input size="small" v-model="data.buyBtnText"></el-input>
            </el-form-item>
          </template>
          <el-form-item 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">
            <div class="zk_pic_box" @click="choicImg=true" 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>
        </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: ["advanceData", "index", "dataLeng"],
    components: {
      draggable,
      ChooseImg,
      choiceGood
    },
    data() {
      return {
        choicImg: false,
        isShowGoods: false,
        data: this.advanceData.data,
        position: 'center center',
        repeat: 'no-repeat',
        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) {
        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: '100.00',
            originalPrice: '300.00',
            deposit: '10',
            swell_deposit: '20',
          };
          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() {
        console.log(this.data.buyBtnStyle);
        let style =
          `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:50px;padding: 0 20px;`;
        if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
          style += `border-radius:24px;`;
        }
        if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
          style += `background:#fff;color:${this.data.buttonColor}`;
        }
        return style;
      },
      cTimerStyle() {
        if (this.data.listStyle === 2) {
          return 'height:60px;line-height:60px;font-size:24px;text-align:center;';
        } else {
          return '';
        }
      },
      cTimerFlex() {
        if (this.data.listStyle === 2) {
          return 'main:center';
        } else {
          return 'box:last';
        }
      },
      cShowBuyBtn() {
        return this.data.textStyle !== 2 &&
          this.data.showBuyBtn;
      },
      cShowEditBuyBtn() {
        return this.data.textStyle !== 2
      },
    },
    mounted() {

    }
  };

</script>
