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

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

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

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

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

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

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

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

  .diy-booking .diy-component-preview .goods-name {
    margin-bottom: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

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

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

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

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

  .diy-booking .diy-component-preview .goods-name-static {
    height: 130px;
    padding: 10px 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .diy-booking .diy-component-preview .goods-price {
    color: #ff4544;
    line-height: 48px;
  }

  .diy-booking .diy-component-preview .buy-btn {
    border-color: #ff4544;
    color: #ff4544;
    padding: 0 20px;
    height: 48px;
    line-height: 50px;
    font-size: 24px;
  }

  .diy-booking .diy-component-preview .buy-btn.el-button--primary {
    background-color: #ff4544;
    color: #fff;
  }

  .diy-booking .diy-component-preview .goods-item .buy-btn.is-round {
    border-radius: 24px;
  }

</style>
<template>
  <div :class="{'active':bookData.isCked}">
    <div class="diy-component-options" v-if="bookData.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-booking">
      <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>
              <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">
                    <template v-if="item.price=='0.00' || item.price==0">免费</template>
                    <template v-else>￥{{item.price}}</template>
                  </div>
                  <div v-if="cShowBuyBtn" style="padding: 0 10px;">
                    <el-button :style="cButtonStyle" v-if="data.buyBtnStyle===1" class="buy-btn" type="primary"
                      size="small">{{data.buyBtnText}}
                    </el-button>
                    <el-button :style="cButtonStyle" v-if="data.buyBtnStyle===2" class="buy-btn" size="small">
                      {{data.buyBtnText}}
                    </el-button>
                    <el-button :style="cButtonStyle" v-if="data.buyBtnStyle===3" class="buy-btn" type="primary"
                      size="small" round>{{data.buyBtnText}}
                    </el-button>
                    <el-button :style="cButtonStyle" v-if="data.buyBtnStyle===4" class="buy-btn" size="small" round>
                      {{data.buyBtnText}}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="bookData.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: ["bookData", "index", "dataLeng"],
    components: {
      draggable,
      ChooseImg,
      choiceGood
    },
    data() {
      return {
        choicImg: false,
        isShowGoods: false,
        data: this.bookData.data,
        position: 'center center',
        repeat: 'no-repeat',
        goodsTags: [{
            name: '热销',
            picUrl: this.domainManager().ImageUrl+'/Static/goods-tag-rx.png',
          },
          {
            name: '新品',
            picUrl: this.domainManager().ImageUrl+'/Static/goods-tag-xp.png',
          },
          {
            name: '折扣',
            picUrl: this.domainManager().ImageUrl+'/Static/goods-tag-zk.png',
          },
          {
            name: '推荐',
            picUrl: this.domainManager().ImageUrl+'/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();
        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}`
        }
      },
      cButtonStyle() {
        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;
      },
      cList() {
        if (!this.data.list || !this.data.list.length) {
          const item = {
            id: 0,
            name: '演示商品名称',
            CoverImage: '',
            price: '300.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 = '';
        if (this.data.listStyle !== -1) {
          style += 'padding:20px;';
        }
        if (this.data.textStyle === 2) {
          style += 'text-align: center;';
        }
        return style;
      },
      cPriceStyle() {
        let style = '';
        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';
        }
      },
      cShowBuyBtn() {
        return this.data.textStyle !== 2 &&
          this.data.showBuyBtn;
      },
      cShowEditBuyBtn() {
        return this.data.textStyle !== 2
      },
    },
    mounted() {

    }
  };

</script>
