<template>
  <div
    v-if="show"
    class="diog-wrap"
    @click.stop="cancle"
  >
    <div class="diog-box">
      <div
        class="diog-main"
        @click.stop=""
      >
        <div class="diog-message">
          <div class="diog-left">
            <img
              :src="warningImg"
              alt=""
              srcset=""
            >
          </div>
          <div class="diog-right">
            <p class="title">
              {{ title }}
            </p>
          </div>
        </div>
        <div
          v-if="content"
          class="diog-content"
        >
          {{ content }}
        </div>
        <div class="btn">
          <div
            class="confirm-btn"
            @click.stop="confirm"
          >
            {{ confirmTxt }}
          </div>
          <div
            v-if="cancleTxt"
            class="cancle-btn"
            @click.stop="cancle"
          >
            {{ cancleTxt }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        warningImg: require('@/assets/image/live/warning.png'),
        show: false,
        title: '',
        content: '',
        confirmTxt: '确定',
        cancleTxt: '',
        _promise: null,
      };
    },
    created() {},
    methods: {
      reset() {
        this.title = '';
        this.confirmTxt = '确定';
        this.cancleTxt = '';
        this.content = '';
        this._promise = null;
      },
      init(obj = {}) {
        Object.assign(this, obj);
        console.log('obj---', obj);
        this.show = true;
        return new Promise((resolve, reject) => {
          this._promise = {
            resolve,
            reject,
          };
        });
      },
      async cancle() {
        this.show = false;
        (await this._promise.reject) && this._promise.reject();
        this.reset();
      },
      async confirm() {
        this.show = false;
        (await this._promise.resolve) && this._promise.resolve();
        this.reset();
      },
      hide() {
        this.show = false;
        this.reset();
      },
    },
  };
</script>

<style lang="scss" scoped>
.diog-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 3000;
  .diog-box {
    position: absolute;
    top: 64px;
    right: 0;
    left: 255px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    //background: rgba(0,0,0,0.6);
    .diog-main {
      width: 480px;
      padding: 34px 32px 24px 34px;
      box-sizing: border-box;
      background: rgba(31, 31, 31, 1);
      box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.12),
        0px 9px 28px 0px rgba(0, 0, 0, 0.2),
        0px 6px 16px -8px rgba(0, 0, 0, 0.32);
      border-radius: 2px;
      .diog-message {
        display: flex;
        .diog-left {
          height: 21px;
          width: 21px;
          margin-right: 17px;
        }
        .diog-right {
          .title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            line-height: 24px;
          }
        }
      }
      .diog-content {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        margin-top: 24px;
      }
      .btn {
        margin-top: 24px;
        display: flex;
        flex-direction: row-reverse;
        .confirm-btn {
          margin-left: 12px;
          padding: 0 16px;
          height: 32px;
          background: rgba(47, 134, 246, 1);
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }
        .cancle-btn {
          width: 60px;
          height: 32px;
          border-radius: 2px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.65);
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
