<!--
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },

    示例
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>

    必要数据
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},

    必要方法
        //弹窗组件左侧按钮方法-对应取消方法
        windowLeftClick(){
          this.windowType = !this.windowType;
        },
        //弹窗组件右侧按钮方法
        windowRightClick(){
          this.windowType = false;
          console.log("点击确定")
          let self = this;
          setTimeout(function(){
            self.windowText();
          },500);
        },

    //成功提示
    windowText(){
      this.windowData = {
        type:"2",
        title:"提示",
        text:"删除成功",
      };
      this.windowType = true;
    },


    调用方法示例-----type状态 1修改提示 2成功提示 3失败提示  1与3公用图标样式 非1时没有按钮 只有提示2秒后自动关闭
        handleDelete() {
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要删除这条信息吗?",
            leftButton:"取消",
            rightButton:"确定",
          };
          this.windowType = !this.windowType;
        },


-->
<template>
  <div class="component-max-box">
    <div class="component-box">
      <div class="component-title-box">
        <div class="component-left-box">
          <img src="~@/assets/images/icon_02.png">
          <p>{{data.title}}</p>
        </div>
        <div class="component-right-box cursor_pointer" @click="leftClick">
          <img src="~@/assets/images/icon_x_01.png">
        </div>
      </div>
      <!--type状态 1修改提示 2成功提示 3失败提示  1与3公用图标样式-->
      <img :class="{'margin-top':data.type!=1}" v-if="data.type==1||data.type==3" class="component-center-img" src="~@/assets/images/icon_01.png">
      <img :class="{'margin-top':data.type!=1}" v-else class="component-center-img" src="~@/assets/images/icon_01_1.png">
      <p class="component-center-text">{{data.text}}</p>
      <div class="component-button-box" v-if="data.type==1">
        <p class="cursor_pointer" @click="leftClick">{{data.leftButton}}</p>
        <p class="cursor_pointer" @click="rightClick">{{data.rightButton}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "interactiveWindow",//弹窗交互
    props:["windowData"],
    data () {
      return {
        data:{},
      }
    },

    created(){
      this.data = {...this.windowData}
    },
    mounted() {
      //data.type 如果不是1时,则该组件为弹窗组件 展示数秒后关闭
      if(this.data.type!=1){
        let self = this;
        setTimeout(function(){
          self.leftClick();
        },2000);
      }
    },
    methods: {
      leftClick(){
        this.$emit('windowLeftClick');
      },
      rightClick(){
        this.$emit('windowRightClick',this.data);
      },
    }
  }
</script>

<style scoped lang="stylus">
  .component-max-box
    height:100%;
    width:100%;
    z-index:1000;
    position: absolute
    top:0;
    left:0;
    background:rgba(0,0,0,0.7);
    .component-box
      height:286px;
      width:446px;
      position: absolute
      top:50%;
      left:50%;
      transform :translate3d(-50%,-50%,0)
      margin:auto;
      background url("~@/assets/images/min_back_07.png")
      background-size 100% 100%
      color:$color_ff;
      .component-title-box
        margin:16px 0 0 30px;
        display flex
        .component-left-box
          display flex
          flex:1;
          img
            display block
            margin:3px 5px 0 0;
            width:20px;
            height:20px;
          p
            line-height:27px;
            font-size:$font_16;
        .component-right-box
          width:44px;
          height:25px;
          img
            display block
            height:14px;
            width:14px;
            margin:6px 15px;
      .component-center-img
        display block
        height:49px;
        width:49px;
        margin:36px auto 0;
      .component-center-text
        line-height:62px;
        font-size:$font_19;
      .component-button-box
        display flex
        width:231px;
        margin:30px auto 0;
        p
          font-size:$font_12;
          line-height:30px;
          width:92px;
        p:nth-child(1)
          color:$theme;
          margin-right:47px;
          background url("~@/assets/images/button_01.png")
          background-size 100% 100%
        p:nth-child(2)
          background url("~@/assets/images/button_02.png")
          background-size 100% 100%
  .margin-top
    margin-top:70px !important;
</style>
