<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      width="482px"
      center
      custom-class="previewDialog"
    >
      <el-row class="operation-wait-dialog">
        <el-col :span="14">
          <el-row class="wait-info">
            <el-col :span="3">
              <img :src="require('@/assets/image/icon_wait.png')" alt="">
            </el-col>
            <el-col :span="15" class="wait-info-msg">
              <p class="wait-info-msg-title">{{ promptInfo }}</p>
              <p class="wait-info-msg-second">{{ time }}秒</p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <img :src="require('@/assets/image/wait.png')" alt="操作等待">
        </el-col>
      </el-row>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="cancel">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    waitVisible: {
      type: Boolean,
      default: false
    },
    promptInfo: {
      type: String,
      default: () => ''
    },
    breakTimer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      time: 120,
      intervals: null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.waitVisible
      },
      set(val) {
        console.log(val)
        this.$emit('updateVisible', val) // dialogVisible改变的时候通知父组件
      }
    }
  },
  watch: {
    waitVisible(res) {
      if (res) {
        this.time = 120
        this.reduce()
      }
    },
    time(newVal) {
      if (newVal === 0) {
        this.$emit('updateWaitVisible', false)
      }
    },
    breakTimer(val) {
      if (val) {
        clearTimeout(this.intervals)
        this.time = 0
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('updateWaitVisible', false)
    },
    /**
     * 定时器方法
     */
    reduce() {
      this.intervals = setTimeout(() => {
        if (this.time > 0) {
          this.time--
          this.reduce()
        } else if (this.time === 0) {
          clearTimeout(this.intervals)
          this.time = 120
        }
      }, 1000)
    }
  }
}
</script>
<style scoped lang="scss">
.operation-wait-dialog{
  .wait-info{
    img{
      width: 28px;
      height: 28px;
      margin-top: 16px;
    }
    .wait-info-msg{
      text-align: left;
      .wait-info-msg-title{
        width: 396px;
        height: 24px;
        font-family: SourceHanSansCN-Bold;
        font-size: 16px;
        color: #111111;
        line-height: 24px;
        font-weight: 700;
      }
      .wait-info-msg-second{
        width: 45px;
        height: 20px;
        opacity: 0.6;
        font-family: SourceHanSansCN-Normal;
        font-size: 14px;
        color: #111111;
        line-height: 24px;
        font-weight: 400;
      }
    }
  }
}
</style>

<style lang="scss">
.previewDialog{
  .el-dialog__header {
    display: none;
  }
  .el-dialog-content {
    padding: 0;
    overflow: unset;
  }
}
</style>
