<style>
  .diy-quick-nav .pic-select {
    width: 72px;
    height: 72px;
    color: #00a0e9;
    border: 1px solid #ccc;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
  }

  .diy-quick-nav .pic-preview {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .diy-quick-nav .edit-item {
    border: 1px solid #e2e2e2;
    padding: 15px;
    margin-bottom: 20px;
  }

</style>
<template>
  <div :class="{'active':quickData.isCked}">
    <div class="diy-component-options" v-if="quickData.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-quick-nav">
      <div class="diy-component-preview" v-loading="!data">
        <div style="padding: 20px 0;text-align: center;">
          <div>快捷导航设置</div>
          <div style="font-size: 22px;color: #909399">本条内容不占高度</div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="quickData.isCked">
        <el-form @submit.native.prevent label-width="100px">
          <el-form-item label="快捷导航开关">
            <el-switch v-model="data.navSwitch" :inactive-value="0" :active-value="1"></el-switch>
          </el-form-item>
          <el-form-item v-if="data.navSwitch == 1" label="使用商城配置">
            <el-switch v-model="data.useMallConfig" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <template v-if="data.useMallConfig && data.navSwitch == 1">
            <el-form-item label="导航样式">
              <el-radio v-model="data.navStyle" :label="1">样式1(点击收起)</el-radio>
              <el-radio v-model="data.navStyle" :label="2">样式2(全部展示)</el-radio>
            </el-form-item>
            <el-form-item label="收起图标">
              <div class="zk_pic_box" @click="choicImg=true,getImgUtl(1)"
                flex="main:center cross:center"
                :style="{backgroundImage:'url(' + getIconLink(data.closedPicUrl) + ')'}">
                <i v-if="data.closedPicUrl==''" class="el-icon-picture-outline"></i>
                <el-button type="danger" v-if="data.closedPicUrl!=''" class="image-delete" size="mini"
                  icon="el-icon-close" @click.stop="data.closedPicUrl=''" circle></el-button>
              </div>
            </el-form-item>
            <el-form-item label="展开图标">
             <div class="zk_pic_box" @click="choicImg=true,getImgUtl(2)"
                flex="main:center cross:center"
                :style="{backgroundImage:'url(' + getIconLink(data.openedPicUrl) + ')'}">
                <i v-if="data.openedPicUrl==''" class="el-icon-picture-outline"></i>
                <el-button type="danger" v-if="data.openedPicUrl!=''" class="image-delete" size="mini"
                  icon="el-icon-close" @click.stop="data.openedPicUrl=''" circle></el-button>
              </div>
            </el-form-item>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">返回首页</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.home.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.home.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(3)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.home.picUrl) + ')'}">
                    <i v-if="data.home.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.home.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.home.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">小程序客服</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.customerService.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.customerService.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(4)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.customerService.picUrl) + ')'}">
                    <i v-if="data.customerService.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.customerService.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.customerService.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">一键拨号</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.tel.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.tel.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(5)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.tel.picUrl) + ')'}">
                    <i v-if="data.tel.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.tel.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.tel.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
              <el-form-item v-if="data.tel.opened" label="电话号码">
                <el-input v-model="data.tel.number"></el-input>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">网页链接</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.web.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.web.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(6)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.web.picUrl) + ')'}">
                    <i v-if="data.web.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.web.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.web.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
              <el-form-item v-if="data.web.opened" label="网址">
                <el-input v-model="data.web.url"></el-input>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">跳转小程序</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.mApp.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.mApp.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(7)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.mApp.picUrl) + ')'}">
                    <i v-if="data.mApp.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.mApp.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.mApp.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
              <el-form-item v-if="data.mApp.opened" label="appId">
                <el-input v-model="data.mApp.appId"></el-input>
              </el-form-item>
              <el-form-item v-if="data.mApp.opened" label="页面路径">
                <el-input v-model="data.mApp.page"></el-input>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">地图导航</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.mapNav.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.mapNav.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(8)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.mapNav.picUrl) + ')'}">
                    <i v-if="data.mapNav.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.mapNav.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.mapNav.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
              <el-form-item v-if="data.mapNav.opened" label="详细地址">
                <el-input v-model="data.mapNav.address"></el-input>
              </el-form-item>
              <el-form-item v-if="data.mapNav.opened" label="经纬度">
                <el-input v-model="data.mapNav.location" @focus="isShowMap=true" placeholder="点击进入地图选择" readonly></el-input>
              </el-form-item>
            </div>
            <div class="edit-item">
              <div style="margin-bottom: 10px;">自定义按钮</div>
              <el-form-item label="是否开启">
                <el-switch v-model="data.customize.opened" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
              <el-form-item v-if="data.customize.opened" label="图标">
                <div class="zk_pic_box" @click="choicImg=true,getImgUtl(9)"
                    flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(data.customize.picUrl) + ')'}">
                    <i v-if="data.customize.picUrl==''" class="el-icon-picture-outline"></i>
                    <el-button type="danger" v-if="data.customize.picUrl!=''" class="image-delete" size="mini"
                    icon="el-icon-close" @click.stop="data.customize.picUrl=''" circle></el-button>
                </div>
              </el-form-item>
              <el-form-item v-if="data.customize.opened" label="跳转链接">
                <el-input :disabled="true" size="small" v-model="data.customize.link_url" autocomplete="off">
                  <el-button slot="append" size="mini" @click="isShowLink=true">选择链接</el-button>
                </el-input>
              </el-form-item>
            </div>
          </template>
        </el-form>
      </div>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </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="isShowMap" width="960px">
      <commonMap @map-submit="mapEvent"></commonMap>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import chooseMenu from "../../common/chooseMenu.vue";
  import commonMap from "../../common/commonMap.vue";
  export default {
    props: ["quickData", "index", "dataLeng"],
    components: {
      ChooseImg,
      chooseMenu,
      commonMap
    },
    data() {
      return {
        choicImg: false,
        isShowLink: false,
        isShowMap:false,
        data: this.quickData.data,
        type:null,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        let commonUrl = this.getIconLink(msg.url);
        switch (this.type){
            case 1:
            this.data.closedPicUrl=commonUrl;
            break;
            case 2:
            this.data.openedPicUrl=commonUrl;
            break;
            case 3:
            this.data.home.picUrl=commonUrl;
            break;
            case 4:
            this.data.customerService.picUrl=commonUrl;
            break;
            case 5:
            this.data.tel.picUrl=commonUrl;
            break;
            case 6:
            this.data.web.picUrl=commonUrl;
            break;
            case 7:
            this.data.mApp.picUrl=commonUrl;
            break;
            case 8:
            this.data.mapNav.picUrl=commonUrl;
            break;
            case 9:
            this.data.customize.picUrl=commonUrl;
            break;
        }
        this.choicImg = false;
      },
      //选择链接
      getChoiceLink() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.data.customize.link_url = obj.PageUrl;
        this.isShowLink = false;
      },
      getImgUtl(type,) {
        this.type = type;
      },
      mapEvent(e) {
        this.data.mapNav.location = e.lat + ',' + e.long;
        this.data.mapNav.address =e.address;
        this.isShowMap=false;
      },

    },
    computed: {

    },
    mounted() {

    }
  };

</script>
