<style>
  .diy-modal .modal-background {
    width: 224px;
    height: 400px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    margin-right: 20px;
  }

  .diy-modal .modal-container {
    max-width: 184px;
    max-height: 300px;
    overflow: hidden;
  }

  .diy-modal .modal-container img {
    max-width: 100%;
    max-height: 100%;
  }

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

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

  .diy-modal .edit-options {
    position: relative;
  }

  .diy-modal .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;
  }

  .chooseLink .el-input-group__append {
    background-color: #fff;
  }

</style>
<template>
  <div :class="{'active':modalData.isCked}">
    <div class="diy-component-options" v-if="modalData.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-modal">
      <div class="diy-component-preview" v-loading="!data">
        <div @click="dialogVisible=true" 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="modalData.isCked">
        <el-dialog title="弹窗广告设置" :visible.sync="dialogVisible" :close-on-click-modal="false">
          <div flex="box:first">
            <div>
              <div class="modal-background" flex="main:center cross:center">
                <div class="modal-container" flex="main:center cross:center">
                  <img v-if="data.list.length" :src="getIconLink(data.list[0].picUrl)">
                </div>
              </div>
            </div>
            <div>
              <el-form @submit.native.prevent>
                <el-form-item label="是否开启">
                  <el-switch v-model="data.opened"></el-switch>
                </el-form-item>
                <el-form-item v-if="data.opened" label="广告图片">
                  <span style="color: #909399;">图片最大高度700px，最大宽度650px。</span>
                  <br>
                  <div
                    style="border: 1px solid #e2e2e2;padding: 5px;margin-bottom: 5px;line-height: normal;max-width: 400px"
                    v-for="(item,index) in data.list" :key="index">
                    <div class="edit-options">
                      <el-button @click="deleteAd(index)" icon="el-icon-delete" type="primary"
                        style="right: -31px;top: -6px;"></el-button>
                    </div>
                    <div flex="box:first">
                      <div style="margin-right: 10px">
                        <div class="zk_pic_box" @click="choicImg=true,comImgIndex=index" flex="main:center cross:center"
                          :style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
                          <i v-if="item.picUrl==''" class="el-icon-picture-outline"></i>
                          <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 class="chooseLink">
                        <div style="margin: 5px 0;">广告链接</div>
                        <el-input v-model="item.link.url" placeholder="点击选择链接" :disabled="true" size="small">
                          <el-button slot="append" size="small" @click="isShowLink=true,comImgIndex=index">选择链接
                          </el-button>
                        </el-input>
                      </div>
                    </div>
                  </div>
                  <el-button size="small" @click="addAd" v-if="data.list.length<3">添加广告</el-button>
                </el-form-item>
                <el-form-item v-if="data.opened" label="弹窗次数">
                  <el-radio v-model="data.times" :label="0">每次</el-radio>
                  <el-radio v-model="data.times" :label="1">仅首次</el-radio>
                </el-form-item>
                <el-button style="padding: 9px 25px" v-if="data.opened" size="small" type="primary"
                  @click="dialogVisible = false">保存</el-button>
              </el-form>
            </div>
          </div>
        </el-dialog>

      </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>

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

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      addAd() {
        this.data.list.push({
          picUrl: '',
          link: {
            url: '',
            openType: '',
          },
        });
      },
      deleteAd(index) {
        this.data.list.splice(index, 1);
      },
      //选择图片
      SelectId(msg) {
        this.data.list[this.comImgIndex].picUrl = this.getIconLink(msg.url);
        this.choicImg = false;
      },
      //选择链接
      getChoiceLink() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        // this.data.list[this.comImgIndex].link.openType = link.open_type;
        this.data.list[this.comImgIndex].link.url = obj.PageUrl;
        this.isShowLink = false;
      },
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
