<template>
  <div class="sv-dialog">
    <header class="sv-dialog-header">{{title}}</header>
    <main class="sv-dialog-body">
      <div class="sv-dialog-body-prompt" v-if="type === 'prompt'">
        <div class="prompt-input-wrapper" :class="{'label-top': inputLabel && inputLabelPosition === 'top', 'label-left': inputLabel && inputLabelPosition === 'left'}">
          <label class="input-label">{{inputLabel}}</label>
          <sv-input :class="{'invalid': showValidateMessage}" :type="inputType" :placeholder="inputPlaceholder" v-model="inputValue"></sv-input>
        </div>
        <div class="prompt-validate-message" :class="{'visible': showValidateMessage}">{{inputValidateMessage}}</div>
      </div>
      <template v-else>
        {{message}}
      </template>
    </main>
    <footer class="sv-dialog-footer">
      <button class="button button-cancel" v-if="type !== 'alert'" @click="handleCallback(false)">{{cancelButtonText}}</button>
      <button class="button button-confirm" @click="handleCallback(true)">{{confirmButtonText}}</button>
    </footer>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        type: '',
        title: '',
        message: '',
        visible: false,
        inputType: 'text',
        inputLabel: '',
        inputLabelPosition: 'top',
        inputPlaceholder: '请输入内容',
        inputValue: '',
        inputValidator: null,
        inputPattern: null,
        inputValidateMessage: '',
        showValidateMessage: false,
        cancelButtonText: '',
        confirmButtonText: '',
        confirmCallback: null,
        cancelCallback: null
      }
    },
    computed: {
      inputLabelClass () {
        return `input-label-${this.inputLabelPosition}`
      }
    },
    watch: {
      inputValue () {
        if (this.inputValidator && typeof this.inputValidator === 'function') {
          let validatorReturnValue = this.inputValidator(this.inputValue)
          if (typeof validatorReturnValue === 'undefined') {
            return
          }

          if (typeof validatorReturnValue === 'boolean') {
            this.showValidateMessage = !validatorReturnValue
          }

          if (typeof validatorReturnValue === 'string') {
            this.inputValidateMessage = validatorReturnValue
            this.showValidateMessage = true
          }
        }
      }
    },
    methods: {
      handleCallback (isConfirm) {
        if (isConfirm) {
          if (this.type === 'prompt') {
            if (this.validateInputValue()) {
              this.confirmCallback(this.inputValue)
              this._reset()
              this._close()
            }
          } else {
            this.confirmCallback()
            this._reset()
            this._close()
          }
        } else {
          this.cancelCallback()
          this._reset()
          this._close()
        }
      },
      validateInputValue () {
        if (this.inputValidator && typeof this.inputValidator === 'function') {
          let validatorReturnValue = this.inputValidator(this.inputValue)
          if (typeof validatorReturnValue === 'undefined') {
            return true
          }

          if (typeof validatorReturnValue === 'boolean') {
            this.showValidateMessage = !validatorReturnValue
            return validatorReturnValue
          }

          if (typeof validatorReturnValue === 'string') {
            this.inputValidateMessage = validatorReturnValue
            this.showValidateMessage = true
            return false
          }
        } else {
          return true
        }
      },
      _reset () {
        // 清空输入框输入的值
        this.inputValue = ''
        this.showValidateMessage = false
        this.inputValidateMessage = ''
      },
      _open () {
        window.setTimeout(() => {
          this.visible = true

          this.$mask.open()
          this.$mask.getZIndex().then(maskZIndex => {
            this.$el.style.zIndex = maskZIndex + 1
          })
        })
      },
      _close () {
        this.visible = false
        this._reset()
        window.setTimeout(() => {
          this.$el.remove()
          this.$mask.close()
        }, 300)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-dialog{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border-radius: pxToRem(20px);
    background: $color-light;
    overflow:hidden;
    @keyframes zoom-out-in {
      0%{
        transform: scale(1.5);
        transform-origin: center;
      }
      100%{
        transform: scale(1);
        transform-origin: center;
      }
    }
    /*animation: zoom-out-in .2s;*/
    .sv-dialog-header{
      padding: pxToRem(30px 30px 0 30px);
      text-align: center;
      font-size: pxToRem(32px);
      color:#333;
    }
    .sv-dialog-body{
      padding:pxToRem(30px);
      text-align: center;
      font-size: pxToRem(26);
      color:#333;
      .sv-dialog-body-prompt{
        text-align: left;
        .prompt-input-wrapper{
          &.label-top,&.label-left{
            display: flex;
            .input-label{
              display: block;
            }
          }
          &.label-left{
            align-items: center;
            .input-label{
              margin-right: pxToRem(6);
            }
            .sv-input-wrapper{
              width: auto;
              flex: 1;
            }
          }
          &.label-top{
            flex-direction: column;
            .input-label{
              margin-bottom: pxToRem(6);
            }
          }
          .input-label{
            display: none;
            font-size: pxToRem(12);
            color:#666;
          }
          .sv-input-wrapper{
            &.invalid{
              border: 1px solid $color-danger;
              transition: border .3s ease-in;
            }
          }
        }
        .prompt-validate-message{
          margin-top: pxToRem(4);
          min-height: pxToRem(24);
          line-height: 1;
          text-align: left;
          visibility: hidden;
          opacity: 0;
          color:$color-danger;
          font-size: pxToRem(10);
          &.visible{
            visibility: visible;
            opacity: 1;
            transition: opacity .3s ease-in;
          }
        }
      }
    }
    .sv-dialog-footer{
      display: flex;
      height: pxToRem(80px);
      border-top: 1px solid #ddd;
      .button{
        flex:1;
        border: none;
        outline: none;
        border-right: 1px solid #ddd;
        letter-spacing: pxToRem(4);
        font-size: pxToRem(32px);
        color:#333;
        background: $color-light;
        &:last-child{
          border-right:none;
        }
        &:active{
          background: #f2f2f2;
        }
        &.button-cancel{
          color:#999;
        }
        &.button-confirm{
          color: $color-success;
          &.button-disabled{
            opacity: .6;
          }
        }
      }
    }
  }
</style>
