<template>
  <div class="basicMaskDiv" v-if="show" @click='clickEmpty()'>
    <div class="basicPopDiv" @click='stopClickEmpty'>
      <div class="closeDiv">
        <img @click="btnClick('0')" class="closeImg" src="//img10.360buyimg.com/imgzone/jfs/t1/212853/26/18084/464/626a4812E26295ade/62d9d070d6de83b8.png" />
      </div>
      <div class="contentDivAll">
        {{datas.content}}
      </div>
      <div class="bottomBtnDivAll">
        <div v-if="datas.type == '1'" @click="btnClick(datas.eventType)" class="oneBtn">{{datas.oneText}}</div>
        <div v-else class="twoBtnDiv">
          <div class="twoBtnLeft" @click="btnClick(datas.leftEventType)">{{datas.twoLeftText}}</div>
          <div class="twoBtnRight" @click="btnClick(datas.rightEventType)">{{datas.twoRightText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{

      }
    },
    created() {

    },
    methods:{
      //点击空白处关闭弹框
      clickEmpty(){
        this.btnClick('0');
      },
      //阻止冒泡
      stopClickEmpty(event){
        event.stopPropagation();
      },
      //1 1个按钮的操作 2两个按钮的左操作 3两个按钮的右操作
      btnClick(btnClickType){
        let submitData ={
          btnClickType:btnClickType
        }
        this.submit(submitData)
      }

    }
  }
</script>

<style lang="scss" scoped="scoped">
  .basicMaskDiv{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    top: 0;
    bottom: 0;
    z-index: 200;
    .basicPopDiv{
      position: fixed;
      top: 25%;
      max-height: 10.57rem;
      background: #FFFFFF;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      width: 5.88rem;
      // height: 2.76rem;
      z-index: 201;
      border-radius: 0.24rem;
      padding: 0.62rem 0 0.4rem 0;
      left: calc(50% - 5.88rem / 2);
      .closeDiv{
        .closeImg{
          height: 0.24rem;
          width: 0.24rem;
          position: absolute;
          right: 0.34rem;
          top: 0.34rem;
        }
      }
      .contentDivAll{
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #262626;
        padding: 0 1.01rem;
        text-align: center;
      }
      .bottomBtnDivAll{
        display: flex;
        justify-content: space-around;
        .oneBtn{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2.8rem;
          height: 0.6rem;
          border: 1px solid #F2270C;
          border-radius: 0.3rem;
          font-size: 0.24rem;
          font-weight: 500;
          color: #F2270C;
          margin-top: 0.49rem;
        }
        .twoBtnDiv{
          display: flex;
          justify-content: space-around;
          margin-top: 0.49rem;
          margin-left: 0.75rem;
          margin-right: 0.75rem;
          height: 0.6rem;
          .twoBtnLeft{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F2270C;
            border-radius: 0.3rem;
            font-size: 0.24rem;
            font-weight: 500;
            color: #F2270C;
            width: 2.2rem;
            margin-right: 0.19rem;
            // padding: 0 0.77rem;
          }
          .twoBtnRight{
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.3rem;
            font-size: 0.24rem;
            font-weight: 500;
            color: #FFFFFF;
            margin-left: 0.19rem;
            // padding: 0.18rem 0.77rem;
            width: 2.2rem;
            background: linear-gradient(90deg, #F2270C 0%, #FF6420 100%);
          }
        }

      }

    }
  }
</style>
