<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="dialogWidth"
    :before-close="handleClose"
    append-to-body>
    <span v-if="typeof subTitle === 'string'">{{ subTitle }}</span>
    <div v-if="Array.isArray(subTitle)">
      <div class="sub_title" v-for="(item, index) in subTitle" :key="index">{{
          item
        }}
      </div>
    </div>
    <slot name="header"></slot>
    <div v-if="flagState === 1">
      <slot name="content"></slot>
      <div class="input_box">
        <el-input type="textarea" v-model="input" :placeholder="placeholder"></el-input>
      </div>
      <div class="kuajie">
        <el-tag class="kuajie_span" v-for="(item, index) in tips" :key="index" @click="input += item">{{ index + 1 }}:{{
            item
          }}
        </el-tag>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <slot name="footer"></slot>
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="backBtnHide" :type="btnTypes[flagState]" @click="handleCancel">{{ backText }}</el-button>
      <el-button type="primary" @click="handleConfirm">{{ submitText }}</el-button>
    </span>
  </el-dialog>
</template>

<script>

const classEnum = {
  small: '56px',
  default: '86px',
  large: '106px',
  largeX: '126px',
  largeXX: '146px',
  largeXXL: '186px',
}
const btnTypes = {
  0: 'warning',
  1: 'danger'
}
export default {
  name: "promptDialog",
  data() {
    return {
      btnTypes,
      input: '',
      status: 0,
      btnType: ''
    }
  },
  props: {
    backBtnStatus: {
      default: 0,
      type: Number,
      required: false,
    },
    submitText: {
      default: '通 过',
      type: String,
      required: false,
    },
    submitVail: {
      default: true,
      type: Boolean,
    },
    backText: {
      default: '驳 回',
      type: String,
      required: false,
    },
    isInputInfo: {
      type: Boolean,
      default: true,
    },
    backBtnHide: {
      default: true,
      type: Boolean,
    },
    visible: {
      default: false,
      type: Boolean,
      required: true,
    },
    fullScreen: {
      default: false,
      type: Boolean,
      required: false,
    },
    title: String,
    subTitle: String | Array,
    tips: {
      default: [],
      type: Array,
      required: false,
    },
    pattern: Object,
    placeholder: {
      default: '请输入内容',
      type: String,
      required: false,
    },
    dialogWidth: {
      type: String,
      default: '40%'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.input = ''
        this.status = 0
      }
    }
  },
  computed: {
    flagState() {
      if (this.backBtnStatus) {
        return 1
      }
      return this.status
    }
  },
  methods: {
    handleClose() {
      this.$emit('onClose')
    },
    handleCancel() {
      if (!this.isInputInfo) {
        this.vailValue().then(() => {
          this.$emit('onCancel', this.input)
        })
        // this.$emit('onCancel')
        return
      }
      if (this.status) {
        this.vailValue().then(() => {
          this.$emit('onCancel', this.input)
        })
        // this.$emit('onCancel', this.input)
      } else {
        this.status = 1
      }
    },
    vailValue() {
      return new Promise((resolve) => {
        if (this.pattern) {
          if (this.pattern.check(this.input) || this.pattern.reg.test(this.input)) {
            resolve()
          } else {
            this.$message({
              type: 'info',
              message: this.pattern.message
            });
          }
        } else {
          resolve()
        }
      })
    },
    handleConfirm() {
      if (this.submitVail) {
        this.vailValue().then(() => {
          this.$emit('onConfirm', this.input)
        })
      } else {
        this.$emit('onConfirm', this.input)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.input_box {
  margin-top: 50px;
}

.kuajie {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;

  .kuajie_span {
    margin-right: 20px;
    margin-bottom: 10px;
    color: #666666;
    cursor: pointer;
  }

  .kuajie_span:active {
    color: blue;
  }
}

.sub_title {
  color: #666666;
  font-size: 13px;
  margin-bottom: 10px;
}
</style>
