<template>
  <el-dialog
    :title="oTitle"
    :width="calcWidth"
    :top="top"
    :close-on-click-modal="false"
    :visible.sync="show"
    v-if="show"
    class="dialog"
    :modal="modal"
    :append-to-body="append"
    @close="closed"
  >
    <div>
      <slot />
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    width: {
      default: '50%',
      type: String
    },
    height: {
      default: '70%',
      type: String
    },
    title: {
      default: '',
      type: String
    },
    top: {
      default: '20vh',
      type: String
    },
    modal: {
      default: true,
      type: Boolean
    },
    append: {
      default: true,
      type: Boolean
    },
    isShow: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      oTitle: '',
      refShow: false
    }
  },
  computed: {
    show: {
      get() {
        return this.isShow || this.refShow
      },
      set(val) {
        this.refShow = val
        this.$emit('update:isShow', val)
      }
    },
    calcWidth() {
      if (this.isPC()) {
        return this.width
      } else {
        if (this.width.includes('px')) {
          return this.width
        } else {
          const widthSplit = this.width.split('%')
          const widthOne = widthSplit[0]
          return `${18 * Number(widthOne)}px`
        }
      }
    }
  },
  watch: {
    title: {
      handler() {
        this.oTitle = this.title
      },
      immediate: true
    }
  },
  methods: {
    setTitle(title) {
      this.oTitle = title
    },
    closed() {
      this.$emit('close')
      this.show = false
    },
    isPC() {
      var userAgentInfo = navigator.userAgent
      var Agents = ['Android', 'iPhone',
        'SymbianOS', 'Windows Phone',
        'iPad', 'iPod'
      ]
      var flag = true
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false
          break
        }
      }
      return flag
    }
  }
}
</script>

<style lang="scss">
.dialog {
  .el-dialog {
    border-radius: 5px;
  }
  .el-dialog__header {
    background: #F0F9FC;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    min-height: 25px;
    border-radius: 10px 10px 0px 0px;
  }
  .el-dialog__header .el-dialog__headerbtn {
    top: 15px;
  }
  .el-dialog__header .el-dialog__title {
    color: #333;
    font-size: 15px;
  }
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__body .footer {
    display: flex !important;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #333;
  }
  .el-dialog__header .el-dialog__headerbtn {
    top: 11px
  }
}

</style>
