<template>
  <el-dialog custom-class="hoo-result-dialog"
             :visible="visible"
             @open="openHandler"
             :style="resultDialogStyle"
             @close="closeHandler"
             :width="width">
    <div>
      <img :src="icon"
           class="result-icon"
           alt="">
      <slot>
        <div class="label">{{$t(label)}}</div>
      </slot>
      <div>
        <el-button @click.stop="backCloseHandler">{{$t(btnText)}}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'result-dialog',
  data () {
    return {}
  },
  props: {
    visible: {
      type: Boolean,
      default: true
    },

    width: {
      type: String,
      default: '400px'
    },
    // 结果状态，成功/失败
    status: {
      type: String,
      default: 'success'
    },
    // 高度
    height: {
      type: String,
      default: '324px'
    },

    // 传入结果label，国际化的字符串
    label: {
      type: String,
      default: 'ht.result.text_1'
    },
    // 传入背景色
    bgColor: {
      type: String,
      default: '#fff'
    },
    // 按钮文本
    btnText: {
      type: String,
      default: 'ht.common.comfirm'
    },
    // 按钮颜色
    btnBgColor: {
      type: String,
      default: '#22DDA2'
    },
    // 成功图标
    successIcon: {
      type: String,
      default: () => {
        return require('@/assets/images/result-success.png')
      }
    },
    // 失败图标
    failIcon: {
      type: String,
      default: () => {
        return require('@/assets/images/result-fail.png')
      }
    }
  },
  computed: {
    icon () {
      const obj = {
        success: this.successIcon,
        fail: this.failIcon
      }
      return obj[this.status]
    },
    resultDialogStyle () {
      return {
        '--height': this.height,
        '--bgColor': this.bgColor,
        '--btnBgColor': this.btnBgColor
      }
    }
  },
  methods: {
    openHandler () {
      this.$nextTick(() => {
        this.$el.style.zIndex = '3001'
      })
    },
    backCloseHandler () {
      this.$emit('update:visible', false)
      this.$emit('confirm')
    },
    // 父子双向绑定关闭
    closeHandler () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.hoo-result-dialog {
  height: var(--height);
  display: flex;
  flex-direction: column;
  background: var(--bgColor);
  .el-dialog__headerbtn .el-dialog__close {
    color: #000;
  }
  .el-button--default {
    width: 100%;
    border: none;
    background: var(--btnBgColor) !important;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #ffffff;
    &::hover {
      opacity: 0.7;
    }
  }
  .el-dialog__body {
    padding: 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .detail-label {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    padding-bottom: 40px;
    color: #22dda2;
  }
  .label {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #000;
    padding: 20px 0 60px;
  }
  .result-icon {
    width: 74px;
    height: 74px;
    display: block;
    margin: auto;
  }
}
</style>
