<template>
  <div class="place-wrapper">
    <p>{{ data.name }}</p>
    <div>
      <m-count class="count" :value="data.value" />
      <span :style="getStyle(data.type)">{{ data.type }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export interface PlaceProp {
  type: string
  name: string
  value: number
}
export default defineComponent({
  name: 'Place',
  props: {
    data: {
      type: Object as PropType<PlaceProp>,
      required: true,
    },
  },
  setup() {
    const getStyle = (type: string | null) => {
      switch (type) {
        case '路段':
          return {
            borderColor: '#F7B500',
            color: '#F7B500',
            background: 'rgba(247, 181, 0, 0.3)',
          }
        case '小区':
          return {
            borderColor: '#6DD400',
            color: '#6DD400',
            background: 'rgba(109, 212, 0, 0.3)',
          }
        case '商业':
          return {
            borderColor: '#FA6400',
            color: '#FA6400',
            background: 'rgba(250,100,0,.3)',
          }
        default:
          return {
            borderColor: '#F7B500',
            color: '#F7B500',
            background: 'rgba(247, 181, 0, 0.3)',
          }
      }
    }
    return {
      getStyle,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.place-wrapper
  width 100%
  height 100%
  background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
  font-weight bold
  padding .05rem .08rem
  display flex
  flex-direction column
  justify-content space-around
  >div
    display flex
    align-items center
    justify-content space-between
    .count
      font-size .14rem
      color $secondary-color
    span
      font-size .08rem
      font-weight normal
      border .01rem solid
      padding 0 .03rem
</style>
