<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="轮播图">
                    <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>
                                    </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>