<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;" @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">
      <div class="diynav-container" :style="{backgroundColor:navData.data.backgroundColor,overflowX:navData.data.scroll?'auto':'hidden',backgroundPosition:bgPostion,
            backgroundImage:'url(' + getIconLink(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="getIconLink(item.icon)" />
            <div :style="{color:navData.data.color}">{{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" placeholder="组件名称" v-model="item.url" size="small"></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" :active-value="true" :inactive-value="false"
            @change="showImgChange()"></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(' + getIconLink(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">
      <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>
  </div>
</template>
<script>
  import Navigation from "../../common/NavigationLinks.vue";
  import chooseMenu from "../../common/chooseMenu.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,
      chooseMenu,
      ChooseImg
    },
    created() {

    },
    methods: {
      //是否显示背景图切换
      showImgChange() {
        if (!this.navData.data.showImg) {
          this.navData.data.backgroundPicUrl = "";
        }
      },
      //切换背景位置
      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.chooseMenu.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;
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      }
    },
    mounted() {

    }
  };

</script>
