/**
* @Author Think
* @Date 2018/11/24
*/

<template>
  <div :class="{'h-ios': isIos}" class="h-view">
    <slot/>
  </div>
</template>

<script>
import { detectOS } from '../../common/utils/index'

export default {
  name: 'HView',
  props: {
    fullScreen: {
      // 是否为全屏应用，全屏子应用此项需设为true
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      isIos: false,
    }
  },
  mounted () {
    if (this.title) {
      document.title = this.title
    }
  },
  activated () {
    if (this.title) {
      document.title = this.title
    }
  },
  created () {
    this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
  },
}
</script>

<style lang="less">
  ::selection {
    background: #3367d6;
    color: #fff;
  }
  input:hover ,input:focus{
    caret-color: #3367d6;
  }
  .h-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // padding-bottom: 44px;
    // background-color: $bgColor;
  }

  .platform-ios {
    .h-view {
      // padding-bottom: 64px;
    }
  }

  // iPhoneX适配
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .platform-ios {
      .h-view {
        // padding-bottom: 120px;
      }
    }
  }

  // iPhoneX Max适配
  @media only screen and (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .h-view {
        // padding-bottom: 120px;
      }
    }
  }
</style>
