<template>
  <div class="map-tips" :class="{isFull}">
    <p>标识说明</p>
    <div v-if="theme === '智慧养老'">
      <div>
        <p v-for="tip in olds1" :key="tip.name">
          <span :style="{background:tip.color}" />
          {{tip.name}}
        </p>
      </div>
      <div>
        <p v-for="tip in olds2" :key="tip.name">
          <img v-if="tip.icon" :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          <span v-else :style="{background:tip.color}" />
          {{tip.name}}
        </p>
      </div>
    </div>
    <div v-else-if="theme === '人口分布'">
      <div>
        <p v-for="tip in tips1" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
      <div>
        <p v-for="tip in populations" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
    </div>
    <!-- <div v-else>
      <div>
        <p v-for="tip in tips1" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
      <div>
        <p v-for="tip in tips2" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
    </div> -->
    <div v-else>
      <div>
        <p v-for="tip in tips1" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
      <div>
        <p v-for="tip in olds2" :key="tip.name">
          <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
          {{tip.name}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapTips',
  props: {
    isFull: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      tips1: [
        {name: '街道', icon: 'icon1.png'},
        {name: '居委', icon: 'icon2.png'},
        {name: '服务站', icon: 'icon3.png'},
        {name: '商品房', icon: 'icon4.png'},
        {name: '直管公房', icon: 'icon5.png'},
        {name: '混合', icon: 'icon6.png'},
      ],
      tips2: [
        {name: '医院', icon: 'tip1.png'},
        {name: '学校', icon: 'tip2.png'},
        {name: '衣', icon: 'tip3.png'},
        {name: '食', icon: 'tip4.png'},
        {name: '旅', icon: 'tip5.png'},
        {name: '文娱', icon: 'tip6.png'},
        {name: '军产', icon: 'tip7.png'},
        {name: '文保', icon: 'tip8.png'},
        {name: '历保', icon: 'tip9.png'},
      ],
      olds1: [
        {name: '100岁以上', color: '#826AFA'},
        {name: '90-99岁', color: '#FF5151'},
        {name: '80-89岁', color: '#F47C1F'},
        {name: '70-79岁', color: '#FFCE34'},
        {name: '65-69岁', color: '#589C20'},
        {name: '60-94岁', color: '#00BFFF'},
      ],
      olds2: [
        // {name: '已建', color: '#FADB71'},
        // {name: '在建', color: '#B3B3B3'},
        {name: '敬老院', icon: 'old1.png'},
        {name: '综合为老服务中心', icon: 'old2.png'},
        {name: '老年活动室', icon: 'old3.png'},
        {name: '日托所', icon: 'old4.png'},
        {name: '助老洗衣房', icon: 'old5.png'},
        {name: '助餐点', icon: 'old6.png'},
        {name: '助浴点', icon: 'old7.png'},
      ],
      populations: [
        {name: '境外人口', icon: 'dimond1.png'},
        {name: '境内人口', icon: 'dimond2.png'},
      ],
    }
  },
  computed: {
    theme() {
      return this.$store.state.themeName
    },
  }
}
</script>

<style lang="stylus" scoped>
.map-tips
  position fixed
  right calc(33.3% + .4rem)
  bottom .1rem
  transition right .5s ease-in-out
  z-index 999
  &.isFull
    right .4rem
  >p
    font-size .12rem
    font-weight bold
    margin-bottom .05rem
  >div
    display flex
    >div
      min-width .8rem
      flex 1
      &:last-child
        img
          width .12rem
          height @width
      p
        display flex
        align-items center
        white-space nowrap
        img
          width .08rem
          height @width
          margin-right .05rem
        span
          display inline-block
          width .08rem
          height @width
          border-radius 50%
          margin-right .08rem
</style>
