<template>
  <div
    class="wrapper-ipx"
    v-if="show && isipx"
    :style="{
      'background-color': bgColor || 'transparent',
      'border-top-color': borderTopColor || 'transparent'
    }"
  ></div>
</template>

<script>
import { Bridge } from 'dolphin-native-bridge'
export default {
  props: {
    bgColor: String,
    borderTopColor: String,
    show: {
      type: Boolean,
      default: true
    }
  },
  data: () => ({
    bottomArc: 0
  }),
  computed: {
    isipx: function() {
      if (this.bottomArc) return true
      if ( weex.config.env.platform == "harmony" && weex.config.env.safeAreaBottomHeight ) return true
      return (
        weex &&
        (weex.config.env.deviceModel === 'iPhone10,3' ||
        weex.config.env.deviceModel === 'iPhone10,6' || //iphoneX
        weex.config.env.deviceModel === 'iPhone11,8' || //iPhone XR
        weex.config.env.deviceModel === 'iPhone11,2' || //iPhone XS
        weex.config.env.deviceModel === 'iPhone11,4' ||
        weex.config.env.deviceModel === 'iPhone11,6' || //iPhone XS Max
        weex.config.env.deviceModel === 'iPhone12,1' || //iPhone 11
        weex.config.env.deviceModel === 'iPhone12,3' || //iPhone 11 Pro
        weex.config.env.deviceModel === 'iPhone12,5' || //iPhone 11 Pro Max
        weex.config.env.deviceModel === 'iPhone13,1' || //iPhone 12 mini
        weex.config.env.deviceModel === 'iPhone13,2' || //iPhone 12
        weex.config.env.deviceModel === 'iPhone13,3' || //iPhone 12 Pro
        weex.config.env.deviceModel === 'iPhone13,4' || //iPhone 12 Pro Max
        weex.config.env.deviceModel === 'iPhone14,4' || //iPhone 13 mini
        weex.config.env.deviceModel === 'iPhone14,5' || //iPhone 13
        weex.config.env.deviceModel === 'iPhone14,2' || //iPhone 13 Pro
        weex.config.env.deviceModel === 'Iphone14,3' || //iPhone 13 Pro Max
        weex.config.env.deviceModel === 'iPhone14,7' || // iPhone 14
        weex.config.env.deviceModel === 'iPhone14,8' || // iPhone 14 Plus
        weex.config.env.deviceModel === 'iPhone15,2' || // iPhone 14 Pro
          weex.config.env.deviceModel === 'iPhone15,3') // iPhone 14 Pro Max
      )
    }
  },
  created() {
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
  }
}
</script>

<style>
.wrapper-ipx {
  height: 68px;
  border-top-width: 1px;
  border-top-style: solid;
}
</style>
