<style>
  .banner-container {
    background-color: #fff;
  }

  .bannerStyle-item {
    width: 100px;
    border: 1px solid #ebeef5;
    cursor: pointer;
    padding: 5px;
    line-height: normal;
    text-align: center;
    color: #606266;
  }

  .banner_active {
    border-color: #00a0e9;
    color: #409EFF;
  }

  .banner-style-1 {
    background: #e6f4ff;
    display: block;
    height: 50px;
    margin: 0 auto 5px;
    position: relative;
  }

  .banner-style-2 {
    display: block;
    height: 50px;
    margin: 0 auto 5px;
    position: relative;
  }

  .banner-style-2>div {
    background: #e6f4ff;
    position: absolute;
    left: 0;
    top: 10%;
    height: 50px;
    width: 100%;
    z-index: 0;
    zoom: .75;
  }

  .banner-style-2>div:last-child {
    left: 15%;
    zoom: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    z-index: 1;
    width: 70%;
    top: 0;
  }

  .banner-edit-item {
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
  }

  .banner_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;
  }

  .banner-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;
  }

  .banner_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;
  }

  .banner_image_upload .pic-box i {
    font-size: 12px;
    color: #fff;
  }

  .banner_image_upload .image-delete {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    visibility: hidden;
    z-index: 1;
  }

  .banner_image_upload:hover .image-delete {
    visibility: visible;
  }

  .banner-container .banner-img {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .banner-container .banner-img-contain {
    background-size: contain;
  }

  .banner-container .banner-img-cover {
    background-size: cover;
  }

  .bannerTopRadis {
    overflow: hidden;
  }

</style>
<template>
  <div :class="{'active':banData.isCked}">
    <div class="diy-component-options" v-if="banData.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-component-preview"
      :style="{backgroundColor:banData.data.background,paddingBottom:banData.data.topAndBottom+'px',paddingTop:banData.data.topAndBottom+'px',paddingLeft:banData.data.leftAndRight+'px',paddingRight:banData.data.leftAndRight+'px'}">
      <div class="banner-container bannerTopRadis"
        :style="{height:banData.data.height+'px',borderRadius:banData.data.radius+'px'}">
        <el-carousel :interval="3000" arrow="always" v-if="banData.data.style==1" :height="banData.data.height+'px'">
          <el-carousel-item v-for="(item,index) in banData.data.banners" :key="index">
            <div class="banner-img" :class="banData.data.fill==1?'banner-img-cover':'banner-img-contain'"
              :style="{backgroundImage:'url('+getIconLink(item.picUrl)+')'}"></div>
          </el-carousel-item>
        </el-carousel>
        <el-carousel v-else :interval="4000" type="card" :height="banData.data.height+'px'">
          <el-carousel-item v-for="(item,index) in banData.data.banners" :key="index">
            <div class="banner-img" :class="banData.data.fill==1?'banner-img-cover':'banner-img-contain'"
              :style="{backgroundImage:'url('+getIconLink(item.picUrl)+')'}"></div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="diy-component-edit" v-if="banData.isCked">
      <el-form label-width="100px">
        <el-form-item label="样式">
          <div flex="dir:left">
            <div class="bannerStyle-item" :class="{'banner_active':banData.data.style==1}"
              @click="banData.data.style=1">
              <div class="banner-style-1"></div>
              <div>样式1</div>
            </div>
            <div class="bannerStyle-item" style="margin-left:5px;" :class="{'banner_active':banData.data.style==2}"
              @click="banData.data.style=2">
              <div flex class="banner-style-2">
                <div></div>
                <div></div>
              </div>
              <div>样式2</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="填充方式">
          <el-radio-group v-model="banData.data.fill">
            <el-radio :label="0">留白</el-radio>
            <el-radio :label="1">填充</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="高度">
          <el-input type="number" size="small" v-model="banData.data.height">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="拉取轮播图">
          <el-button size="small" @click="isShowLunbo=true">选择</el-button>
        </el-form-item>
        <el-form-item label="链接标题">
          <el-radio-group v-model="banData.data.isShowTitle">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="轮播图">
          <div flex="dir:top">
            <div class="banner-edit-item" v-for="(item,index) in banData.data.banners" :key="index">
              <div class="banner-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="banner_image_upload" style="margin-right:5px;">
                    <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.url" placeholder="点击选择链接" size="small">
                      <el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
                    </el-input>
                    <el-input v-if="banData.data.isShowTitle==1" type="text" v-model="item.title" placeholder="链接标题" size="small"></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button size="small" @click="addBanner()">添加轮播图</el-button>
        </el-form-item>

        <el-form-item label="圆角">
          <el-input type="number" size="small" v-model="banData.data.radius">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上下边距">
          <el-input type="number" size="small" v-model="banData.data.topAndBottom" :min="0" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="左右边距">
          <el-input type="number" size="small" v-model="banData.data.leftAndRight" :min="0" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="背景色">
          <el-color-picker v-model="banData.data.background"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <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>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择轮播图 -->
    <el-dialog title="选择文件" :visible.sync="isShowLunbo" width="900px">
      <chooseLunbo ref="lunbo"></chooseLunbo>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="quxiaoLunbo()">取 消</el-button>
        <el-button size="small" type="danger" @click="getChiceLunbo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import chooseMenu from "../../common/chooseMenu.vue";
  import chooseLunbo from "../../common/chooseLunbo.vue";
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["banData", "index", "dataLeng"],
    data() {
      return {
        isShowLink: false,
        choicImg: false,
        commonIndex: 0,
        //显示轮播图弹窗
        isShowLunbo: false
      };
    },
    components: {
      chooseMenu,
      ChooseImg,
      chooseLunbo
    },
    created() {

    },
    methods: {
      //添加轮播图
      addBanner() {
        let obj = {
          picUrl: '',
          url: '',
          openType: ''
        }
        this.banData.data.banners.push(obj);
      },
      //删除banner
      delBanner(index) {
        this.banData.data.banners.splice(index, 1);
      },
      //选择链接
      getMyChoice(index) {
        this.isShowLink = true;
        this.commonIndex = index;
      },
      //获取选择链接
      getChoiceLink() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.banData.data.banners[this.commonIndex].url = obj.PageUrl;
        this.isShowLink = false;
      },
      //选取图片
      choiceMyImg(index) {
        this.choicImg = true;
        this.commonIndex = index;
      },
      //选择图片
      SelectId(msg) {
        this.banData.data.banners[this.commonIndex].picUrl = msg.url;
        this.choicImg = false;
      },
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //取消选择
      quxiaoLunbo() {
        this.isShowLunbo = false;
        this.$refs.lunbo.toggleSelection();
      },
      getChiceLunbo() {
        var ckedArr = this.$refs.lunbo.getChoicedLunbo();
        ckedArr.forEach(x => {
          let obj = {
            picUrl: this.getIconLink(x.NavImg),
            url: x.NavLink,
            openType: ''
          }
          this.banData.data.banners.push(obj);
        });
        this.isShowLunbo = false;
        this.$refs.lunbo.toggleSelection();
      },
      getminNum() {
        if (this.banData.data.topAndBottom == '') {
          this.banData.data.topAndBottom = 0;
        }
        if (this.banData.data.leftAndRight == '') {
          this.banData.data.leftAndRight = 0;
        }
      }

    },
    mounted() {

    }
  };

</script>
