<style>
     .diynav-container {
        min-height: 100px;
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .Headernav-item {
        text-align: center;
        font-size: 24px;
        padding: 20px 0;
    }
    .Navabout-text {
        color: #909399;
        font-size: 12px;
        margin-top: -10px;
    }
    .navigation_pic_boxDiv {
        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;
    }
    .navigation_pic_boxDiv i {
        font-size: 22px;
        color: #909399;
    }
    .divbg_position {
        width: 170px;
        height: 180px;
    }
    .divbg_position > div {
        height: 50px;
        width: 50px;
        margin-bottom: 10px;
        cursor: pointer;
        background-color: #F5F7F9;
    }
    .bg_active{
        background-color: #E6F4FF;
        border: 2px dashed #5CB3FD;
    }
    .edit-nav-item {
        border: 1px solid #e2e2e2;
        line-height: normal;
        padding: 5px;
        margin-bottom: 5px;
    }
    .nav-edit-options {
        position: relative;
    }
    .navapp-image-upload{
        display: inline-block;
        margin-right: 5px;
    }
    .nav-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;
    }
    .navapp-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;
    }
    .navapp-image-upload .pic-box i {
        font-size: 22px;
        color: #909399;
    }
    .navapp-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;
    }
    .navapp-image-upload .image-delete {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px;
        visibility: hidden;
        z-index: 1;
    }
    .navapp-image-upload .image-delete i{
        font-size: 12px;
        color: #fff;
    }
    .navapp-image-upload:hover .image-delete {
        visibility: visible;
    }
    .Headernav-item img {
        display: block;
        width: 88px;
        height: 88px;
        margin: 0 auto 5px auto;
    }
    .Headernav-item > div {
        height: 25px;
        line-height: 25px;
    }
    .navigation_pic_boxDiv .image-delete {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px;
        visibility: hidden;
        z-index: 1;
    }
    .navigation_pic_boxDiv:hover .image-delete{
        visibility: visible;
    }
    .navigation_pic_boxDiv .image-delete i{
        font-size: 12px;
        color: #fff;
    }
</style>
<template>
    <div :class="{'active':navData.isCked}">
        <div class="diy-component-options" v-if="navData.isCked">
            <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></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">
            <div class="diynav-container" :style="{backgroundColor:navData.data.backgroundColor,overflowX:navData.data.scroll?'auto':'hidden',backgroundPosition:bgPostion,
            backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}">
                <div flex="dir:left" style="width:750px;flex-wrap:wrap;">
                    <div class="Headernav-item" v-for="(item,index) in navData.data.navs" :key="index" :style="{width:getNavWidth(navData.data.columns)}">
                        <img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+item.icon"/>
                        <div style="color: rgb(53, 53, 53);">{{item.name}}</div>
                    </div>
                </div>
            </div>    
        </div>
        <div class="diy-component-edit" v-if="navData.isCked">
            <el-form label-width="100px">
                <el-form-item label="每页行数" size="small">
                    <el-input type="number" :min="1" :max="100" v-model="navData.data.rows"></el-input>
                </el-form-item>
                <el-form-item label="每行个数">
                    <el-radio-group v-model="navData.data.columns">
                        <el-radio :label="3">3</el-radio>
                        <el-radio :label="4">4</el-radio>
                        <el-radio :label="5">5</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="左右滑动">
                    <el-switch v-model="navData.data.scroll"></el-switch>
                </el-form-item>
                <el-form-item label="拉取商城导航">
                    <el-button size="small" @click="isShowNavLink=true">选择</el-button>
                </el-form-item>
                <el-form-item label="导航图标">
                    <div flex="dir:top">
                        <div class="edit-nav-item" v-for="(item,index) in navData.data.navs" :key="index">
                            <div class="nav-edit-options">
                                <el-button type="primary" icon="el-icon-delete" @click="delIcon(index)" style="top: -6px; right: -31px;"></el-button>
                            </div>
                            <div flex="dir:left box:first cross:center">
                                <div>
                                    <div class="navapp-image-upload">
                                        <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box" :style="{backgroundImage:'url(' + getIconLink(item.icon) + ')'}">
                                            <i class="el-icon-picture-outline" v-if="item.icon==''"></i> 
                                            <div class="size-tip">88 × 88</div>
                                            <el-button type="danger" v-if="item.icon!=''" class="image-delete"  size="mini" icon="el-icon-close" @click.stop="item.icon=''" circle></el-button>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div style="margin-bottom:5px;">
                                        <el-input type="text" placeholder="名称" v-model="item.name" size="small"></el-input>
                                    </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="addNavigatiton()">添加图标</el-button>
                </el-form-item>
                <el-form-item label="背景颜色">
                    <el-color-picker v-model="navData.data.backgroundColor" size="small"></el-color-picker>
                    <el-input type="text" v-model="navData.data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;"></el-input>
                </el-form-item>
                <el-form-item label="背景图片">
                    <el-switch v-model="navData.data.showImg"></el-switch>
                    <div class="Navabout-text">当前组件高度为156px,宽750px</div>
                </el-form-item>
                <el-form-item label="上传背景" v-if="navData.data.showImg">
                    <div style="line-height:normal;display:inline-block;">
                        <div class="navigation_pic_boxDiv" @click="choicImg=true,selectType=1" flex="main:center cross:center" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}">
                            <i class="el-icon-picture-outline" v-if="navData.data.backgroundPicUrl==''"></i>
                            <el-button type="danger" class="image-delete" v-if="navData.data.backgroundPicUrl!=''" size="mini" icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl=''" circle></el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="图片位置" v-if="navData.data.showImg">
                    <div flex="main:justify wrap:wrap" class="divbg_position">
                        <div :class="{'bg_active':navData.data.position==1}" @click="navData.data.position=1,selectPosition('left top')"></div>
                        <div :class="{'bg_active':navData.data.position==2}" @click="navData.data.position=2,selectPosition('center top')"></div>
                        <div :class="{'bg_active':navData.data.position==3}" @click="navData.data.position=3,selectPosition('right top')"></div>
                        <div :class="{'bg_active':navData.data.position==4}" @click="navData.data.position=4,selectPosition('left center')"></div>
                        <div :class="{'bg_active':navData.data.position==5}" @click="navData.data.position=5,selectPosition('center center')"></div>
                        <div :class="{'bg_active':navData.data.position==6}" @click="navData.data.position=6,selectPosition('right center')"></div>
                        <div :class="{'bg_active':navData.data.position==7}" @click="navData.data.position=7,selectPosition('left bottom')"></div>
                        <div :class="{'bg_active':navData.data.position==8}" @click="navData.data.position=8,selectPosition('center bottom')"></div>
                        <div :class="{'bg_active':navData.data.position==9}" @click="navData.data.position=9,selectPosition('right bottom')"></div>
                    </div>
                </el-form-item>
                <el-form-item label="填充方式" v-if="navData.data.showImg">
                    <el-radio-group v-model="navData.data.mode">
                        <el-radio :label="1">充满</el-radio>
                        <el-radio :label="2">左右平铺</el-radio>
                        <el-radio :label="3">上下平铺</el-radio>
                        <el-radio :label="4">平铺满</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="背景图宽" v-if="navData.data.mode!=1">
                    <el-slider v-model="navData.data.backgroundWidth" show-input :show-input-controls='false' style="float:left;width:95%;"></el-slider>
                    <div style="float:right;">%</div>
                </el-form-item>
                <el-form-item label="背景图高" v-if="navData.data.mode!=1">
                    <el-slider v-model="navData.data.backgroundHeight" show-input :show-input-controls='false' style="float:left;width:95%;"></el-slider>
                    <div style="float:right;">%</div>
                </el-form-item>
                <el-form-item label="文字颜色">
                    <el-color-picker v-model="navData.data.color" size="small"></el-color-picker>
                    <el-input type="text" v-model="navData.data.color" size="small" style="width: 80px; margin-right: 25px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="导航链接" :visible.sync="isShowNavLink" width="800px">
            <Navigation ref="Navigation"></Navigation>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="isShowNavLink=false">取 消</el-button>
                <el-button size="small" type="danger" @click="getMyLink()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
            <chooseMeun ref="chooseMeun"></chooseMeun>
            <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>
    </div>
</template>
<script>
  import Navigation from "../../common/NavigationLinks.vue";
  import chooseMeun from "../../common/chooseMeun.vue";
  import ChooseImg from "@/components/global/ChooseImg.vue";

  export default {
    props: ["navData","index","dataLeng"],
    data() {
      return {
          bgPostion:'',
          //宽度
          navWidth:'',
          isShowNavLink:false,
          //弹窗
          isShowLink:false,
          //数组下标
          commonIndex:0,
          //选择图片弹窗
          choicImg:false,
          selectType:1,
      };
    },
    components: {
      Navigation,
      chooseMeun,
      ChooseImg
    },
    created() {

    },
    methods: {
        //切换背景位置
        selectPosition(po){
           this.bgPostion=po; 
        },
        //改变宽度
        getNavWidth(w){
            let str=''
            if(w==3){
                str='33.3333%'
            }else if(w==4){
                str='25%'
            }else{
                str='20%'
            }
            return str;
        },
        //添加导航图标
        addNavigatiton(){
            let obj={
                icon:'',
                name:'',
                url:'',
                openType:'navigate',
                key:'diy'
            }
          this.navData.data.navs.push(obj);
        },
        //删除导航图标
        delIcon(index){
            this.navData.data.navs.splice(index,1);
        },
        //点击确定获取linK
        getMyLink(){
            var ckedArr = this.$refs.Navigation.getChooseLink();
            this.navData.data.navs = this.navData.data.navs.concat(ckedArr);
            this.isShowNavLink=false;
        },
        getMyChoice(index){
            this.isShowLink=true;
            this.commonIndex=index;
        },
        //获取选择链接
        getChoiceLink(){
            //调用子组件方法
            var obj = this.$refs.chooseMeun.getChooseMenu();
            this.navData.data.navs[this.commonIndex].url=obj.PageUrl;
            this.isShowLink = false;
        },
        //选择图片
        SelectId(msg){
            if(this.selectType==1){
                this.navData.data.backgroundPicUrl=msg.url;
            }else{
                this.navData.data.navs[this.commonIndex].icon=msg.url;
            }
            this.choicImg=false;
        },
        //向父组件传值 并调用排序
        resetSord(IsUp){
            this.$emit('getSord', this.index,IsUp);
        },
        //选取图片
        choiceMyImg(index){
            this.choicImg=true;
            this.commonIndex=index;
            this.selectType=2;
        },
        //判断是否包含http
        getIconLink(url){
            let str=''
            if(url.indexOf('http')!=-1){
                str=url
            }else{
                str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
            }
            return str;
        }
    },
    mounted() {

    }
  };

</script>
