<template>
  <div v-if="show">
    <div class="noticDiv">
      <div class="basicPopDiv">
        <div class="close-btn" @click="closeClick"></div>
        <div class="title">
          {{ data.title }}
        </div>
        <div class="contentBox">
          <!-- <pre>{{ data.msg }}</pre> -->
          <pre style="white-space: pre-wrap;">{{ data.msg }}</pre>
        </div>
        <div class="btnAll">
          <div class="btnBox">
            <div class="btn1" @click="closeClick">我知道了</div>
          </div>
          <div class="btnBox" v-if="data.address.show">
            <div class="btn2" @click="enterAddress">填写收货信息</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { AddressPopComService } from "../../../util/hdzxtcomCreate";
  export default {
    data() {
      return {
      };
    },
    created() {
    },
    methods: {
      closeClick() {
        this.submit(1);
      },
      enterAddress() {
        var datas = {
          isEditAddress: true,
          isAlLookAddress: false,
        };
        AddressPopComService.create(datas, this.styleData, (submit) => {
          AddressPopComService.close();
          if (submit) {
            window.location.reload(); // 强制刷新页面
          }
        });
      }

    },
  };
</script>
<style lang="scss" scoped>
  .noticDiv {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    top: 0;
    bottom: 0;
    z-index: 202;

    .basicPopDiv {
      position: absolute;
      width: 5.65rem;
      height: 6.62rem;
      background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/399971/7/6178/26199/69a548ebFb76847bb/00832352965af655.png');
      background-size: 100% 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.24rem;
      .title {
        font-size: 0.5rem;
        font-weight: bold;
        position: absolute;
        text-align: center;
        width: 100%;
        top: 0.5rem;
        color: #fff;
      }
      .close-btn {
        position: absolute;
        width: 0.4rem;
        height: 0.4rem;
        background: url('//img10.360buyimg.com/imgzone/jfs/t1/183690/31/37249/1097/64e2d8dcFb8273014/2bd869caeaf31168.png');
        background-size: 100%;
        bottom: 0.15rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .contentBox {
        width: 4.5rem;
        height: 2.6rem;
        border-radius: 0.3rem;
        margin: 0 auto;
        margin-top: 1.5rem;
        padding: 0.2rem;
        font-size: 0.26rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btnAll {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 4.6rem;
        height: 1.4rem;
        margin: 0.35rem auto 0;
      }
      .btnBox{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn1 {
        width: 1.7rem;
        height: .6rem;
        border-radius: 0.3rem;
        font-size: 0.24rem;
        color: #EA9844;
        border:1px solid #EA9844;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
      .btn2{
        width: 2.3rem;
        height: .74rem;
        background: linear-gradient(to right, #EDA254, #EA4E67);
        border-radius: 0.37rem;
        font-size: 0.24rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
    }
  }
</style>
