<style>
  /*-----------------设置部分--------------*/
  .diy-goods .diy-component-edit .diy-goods-label {
    width: 85px;
  }

  .diy-goods .diy-component-edit .cat-item {
    border: 1px solid #e2e2e2;
    margin-bottom: 5px;
    padding: 15px;
    max-width: 400px;
  }

  .diy-goods .diy-component-edit .goods-list {
    flex-wrap: wrap;
  }

  .diy-goods .diy-component-edit .goods-pic {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .diy-goods .diy-component-edit .goods-delete {
    position: absolute;
    left: calc(100% - 10px);
    top: -10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 0;
    visibility: hidden;
    z-index: 1;
  }

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

  /*-----------------预览部分--------------*/

  .diy-goods .diy-component-preview .goods-list {
    padding: 11px;
  }

  .diy-goods .diy-component-preview .goods-item {
    padding: 11px;
  }

  .diy-goods .diy-component-preview .goods-pic {
    background-size: cover;
    background-position: center;
    width: 99.8%;
    height: 700px;
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 10px 10px 0 0;
  }

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

  .diy-goods .diy-component-preview .goods-name-static {
    height: 94px;
  }

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

  .diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
  .diy-goods .diy-component-preview .goods-list-style-1 .goods-item {
    width: 100%;
  }

  .diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
    width: 50%;
  }

  .diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
    width: 33.333333%;
  }

  .diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
    width: 249px;
  }

  .diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
    width: 200px;
    height: 200px;
    border-radius: 10px 0 0 10px;
  }

  .diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
    height: 342px;
    border-radius: 10px 10px 0 0;
  }

  .diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
  .diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
    height: 200px;
    border-radius: 10px 10px 0 0;
  }

  .diy-goods .diy-component-preview .goods-pic-fill-0 {
    background-size: contain;
  }

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

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

  .diy-goods .diy-component-preview .goods-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    z-index: 1;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .diy-goods hr {
    border: none;
    height: 1px;
    background-color: #e2e2e2;
  }

  .diy-goods .goods-item.goods-cat-list {
    border-top: 1px solid #e2e2e2;
  }

  .diy-goods .goods-item.goods-cat-list:first-of-type {
    border-top: 0;
  }

  .diy-goods .cat-list {
    max-height: 500px;
    overflow: auto;
  }

  .goodsDialog .el-dialog__body {
    padding: 10px 20px;
  }
  .education-edit-item {
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
}
.education_image_upload .pic-box {
    width: 70px;
    height: 70px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.education-edit-options .el-button {
    height: 25px;
    line-height: 25px;
    width: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    position: absolute;
    margin-left: 0;
}
.education_image_upload .pic-box .size-tip {
    line-height: 1.35;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    letter-spacing: -1px;
}
.education_image_upload .image-delete {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    visibility: hidden;
    z-index: 1;
}
.education_image_upload:hover .image-delete {
    visibility: visible;
}
</style>
<template>
  <div :class="{'active':cusData.isCked}">
    <div class="diy-component-options" v-if="cusData.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-goods">
      <div class="diy-component-preview"
        :style="{'backgroundColor':data.backgroundColor,'borderRadius':data.SearchFilletPX+'px'}">
        <div :flex="cMainFlex" :style="{marginLeft:data.PaddingLeft+'px',
        marginRight:data.PaddingRight+'px',marginTop:data.PaddingTop+'px',
        marginBottom:data.PaddingBottom+'px'}">
          <div class="goods-list" :class="'goods-list-style-'+data.listStyle">
            <div v-for="(cat,catIndex) in cCatList" :key="catIndex">
              <div :style="cGoodsListStyle" flex>
                <div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
                  :class="data.catPosition==='left'?'goods-cat-list':''">
                  <div style="display: inline-block;" :style="cGoodsItemWidth">
                    <div :style="{'borderRadius':data.SearchFilletPX+'px'}" :flex="cGoodsItemFlex" style="position: relative;border:1px solid rgb(226, 226, 226)">
                      <div class="goods-pic"
                        :class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
                        :style="'background-image: url('+getIconLink(goods.picUrl)+')'">
                      </div>
                      <div :style="cGoodsItemInfoStyle">
                        <div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
                          <div style="font-size:16px;">{{goods.name}}</div>
                          <div style="font-size:14px;margin-top:10px;">{{goods.lableName}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="cusData.isCked">
        <el-form label-width='150px' @submit.native.prevent>
          <template>
            <el-form-item label="自定义数量">
              <el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
            </el-form-item>
            <el-form-item label="自定义列表">
              <div flex="dir:top">
                <div class="education-edit-item" v-for="(item,index) in data.list" :key="index">
                  <div class="education-edit-options">
                    <el-button type="primary" icon="el-icon-delete" @click="delBanner(index)"
                      style="position:absolute;top: -1px; right: -26px;"></el-button>
                  </div>
                  <div flex="box:first">
                    <div>
                      <div class="education_image_upload" style="margin:5px 5px 0 0;">
                        <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box"
                          :style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
                          <i style="font-size:22px;color:#909399;" class="el-icon-picture-outline"
                            v-if="item.picUrl==''"></i>
                          <div class="size-tip">720 × 250</div>
                          <el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini"
                            icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div>
                        <el-input type="text" v-model="item.name" placeholder="标题" size="small" style="margin-bottom:5px;"></el-input>
                        <el-input type="text" v-model="item.lableName" placeholder="副标题" size="small" style="margin-bottom:5px;"></el-input>
                        <el-input type="text" v-model="item.linkUrl" placeholder="点击选择链接" size="small">
                          <el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-button size="small" @click="addBanner()">添加自定义</el-button>
            </el-form-item>
          </template>
          <hr>
          <el-form-item label="列表样式">
            <el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
            <el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
            <el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
            <el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
          </el-form-item>
          <el-form-item label="背景颜色">
            <div class="input-color" flex="dir:left cross:center">
              <el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
              <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="上边距">
            <el-input type="number" size="small" :min="0" v-model="data.PaddingTop">
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
          <el-form-item label="下边距">
            <el-input type="number" size="small" :min="0" v-model="data.PaddingBottom">
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
          <el-form-item label="左边距">
            <el-input type="number" size="small" :min="0" v-model="data.PaddingLeft">
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
          <el-form-item label="右边距">
            <el-input type="number" size="small" :min="0" v-model="data.PaddingRight">
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
          <el-form-item label="圆角">
            <el-input type="number" size="small" :min="0" v-model="data.SearchFilletPX">
              <template slot="append">px</template>
            </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" custom-class="goodsDialog">
      <choiceGood ref="choiceGood"></choiceGood>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowGoods=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
        <chooseMenu ref="chooseMenu"></chooseMenu>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="isShowLink=false">取 消</el-button>
            <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceGood from "../../common/choiceGood.vue";
  import chooseMenu from "../../common/chooseMenu.vue";

  export default {
    props: ["cusData", "index", "dataLeng"],
    components: {
      ChooseImg,
      choiceGood,
      chooseMenu
    },
    data() {
      return {
        //可以选择的商品数
        ckGoods: 0,
        data: this.cusData.data,
        position: 'center center',
        repeat: 'no-repeat',
        choicImg: false,
        isShowGoods: false,
        //添加的下标
        comIndex: -1,
        commonIndex:0,
        isShowLink:false,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      cCatGoodsList(cat, catIndex) {
        const goodsList = cat.goodsList;
        let newList = [];
        if (catIndex > 0) {
          newList = [];
        } else {
          if (goodsList && goodsList.length) {
            newList = goodsList;
          } else {
            const defaultGoodsItem = {
              id: 0,
              name: '商品名称',
              lableName:'',
              picUrl: '',
              linkUrl:'',
            };
            newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
          }
        }
        return newList;
      },
      //选择图片
      SelectId(msg) {
        this.data.list[this.commonIndex].picUrl=this.getIconLink(msg.url);
        this.choicImg=false;
      },
      //选择商品
      getGoodsChoice() {
        var ckedArr = this.$refs.choiceGood.getChoicedGoods();
        var myArray = [];
        if (ckedArr && ckedArr.length > 0) {
          ckedArr.forEach(element => {
            myArray.push({
              id: element.Id,
              name: element.Name,
              picUrl: element.CoverImage,
              price: element.SellingPrice
            });
          });
        }
        if (this.comIndex !== null) {

        } else {
          this.data.list = this.data.list.concat(myArray);
        }
        this.isShowGoods = false;
        this.$refs.choiceGood.toggleSelection();
      },
      //删除banner
      delBanner(index){
        this.data.list.splice(index,1);
      },
      //选取图片
      choiceMyImg(index){
        this.choicImg = true;
        this.commonIndex=index;
      },
      //选择链接
      getMyChoice(index){
        this.isShowLink=true;
        this.commonIndex=index;
      },
      //添加商品
      addBanner(){
        let obj={
            id:0,
            name:'', //标题
            lableName:'', //副标题
            picUrl:'', //商品图片
            linkUrl:'' //链接
        }
        if(this.data.list.length<this.data.goodsLength){
          if(this.data.list.length>0){
            for(var i=0;i<this.data.list.length;i++){
              if(this.data.list[i].linkUrl==''){
                this.Error(`请选择第${i+1}个的链接`);
                return;
              }
            }
            this.data.list.push(obj);
          }
        }else{
          this.Error('超出自定义数量');
        }
      },
      //获取选择链接
      getChoiceLink(){
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.data.list[this.commonIndex].linkUrl=obj.PageUrl;
        this.isShowLink = false;
      },
    },
    computed: {
      cMainFlex() {
        if (this.data.catPosition === 'left') {
          return 'dir:left box:first';
        }
        if (this.data.catPosition === 'top') {
          return 'dir:top';
        }
      },
      cCatFlex() {
        if (this.data.catPosition === 'left') {
          return 'dir:top';
        }
        if (this.data.catPosition === 'top') {
          return 'dir:left';
        }
      },
      cCatList() {
        if (this.data.showCat) {
          if (this.data.catList && this.data.catList.length) {
            return this.data.catList;
          } else {
            const defaultCatItem = {
              id: 0,
              name: '分类名称',
              menuName: '分类名称',
              goodsList: [],
              goodsNum: 3,
            };
            return [defaultCatItem, defaultCatItem];
          }
        } else {
          return [{
            id: null,
            name: null,
            menuName: null,
            goodsList: this.data.list,
          }];
        }
      },
      cCatStyle() {},
      cGoodsListStyle() {
        if (this.data.listStyle === 0) {
          return 'flex-wrap: nowrap;overflow-x:auto;';
        } else {
          return 'flex-wrap: wrap;';
        }
      },
      cGoodsItemFlex() {
        if (this.data.listStyle === -1) {
          return 'dir:left box:first cross:center';
        }
        return 'dir:top';
      },
      cGoodsItemStyle() {
        let style;
        if (this.data.goodsStyle != 3) {
          if (this.data.listStyle === -1) {
            style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
          } else {
            style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
          }
        } else {
          return style
        }
        if (this.data.goodsStyle === 2) {
          return style
        } else if (this.data.goodsStyle === 1) {
          if (this.data.listStyle === -1) {
            return 'border-radius:10px;background:#fff;'
          } else {
            return 'border-radius:10px;background:#fff;'
          }
        } else {
          return 'background:#fff;';
        }
      },
      cShowBuyBtn() {
        if (!this.data.showBuyBtn) {
          return false;
        }
        if (this.data.textStyle === 2 || this.data.listStyle === 0) {
          return false;
        }
        return true;
      },
      cGoodsItemInfoStyle() {
        let style = '';
        if (this.data.textStyle === 2) {
          style += `text-align: center;`;
        }
        if (this.data.listStyle === -1) {
          style += `height: 200px;padding: 20px 24px 20px 32px;`;
        } else {
          style += `padding:24px 24px;`;
        }
        return style;
      },
      cGoodsItemWidth() {
        if (this.data.listStyle === 0) {
          return 'width: 200px;';
        }
        return 'width: 100%;';
      },
      cButtonStyle() {
        let style =
          `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;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;
      },
    },
    mounted() {

    }
  };

</script>
