<template>
  <div class="map-btns" :class="{ full: fullScreen }">
    <template v-for="btn in btns">
      <a-tooltip v-if="btn.key === 'polyline'" :key="btn.key" placement="right">
        <img :key="btn.key" :src="btn.icon" draggable="false" />
        <template v-if="options.length > 0" #title>
          <div class="btns-tip">
            <a-checkbox-group
              v-model:value="checkboxValues"
              :options="options"
              @change="handleChange"
            />
          </div>
        </template>
      </a-tooltip>
      <a-tooltip
        v-else-if="btn.key === 'point'"
        :key="btn.key"
        placement="right"
      >
        <img :key="btn.key" :src="btn.icon" draggable="false" />
        <template #title>
          <a-tree
            v-model:expandedKeys="expandedKeys"
            :checked-keys="checkedKeys"
            :tree-data="treeData"
            checkable
            @check="handleCheck"
          />
        </template>
      </a-tooltip>
      <a-tooltip v-else :key="btn.key" placement="right">
        <img :src="btn.icon" draggable="false" @click="handleClick(btn.key)" />
        <template #title>{{ btn.title }}</template>
      </a-tooltip>
    </template>
  </div>
  <m-modal v-model="searchModal" title="搜索" width="20%" offset="-70%">
    <SearchView />
  </m-modal>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import btn1 from '@/assets/images/map-btn1.png'
import btn2 from '@/assets/images/map-btn2.png'
import btn3 from '@/assets/images/map-btn3.png'
import btn4 from '@/assets/images/map-btn4.png'
import btn5 from '@/assets/images/map-btn5.png'
import btn6 from '@/assets/images/map-btn6.png'
import btn7 from '@/assets/images/map-btn7.png'
import d2 from '@/assets/images/2d.png'
import d3 from '@/assets/images/3d.png'
import zoomIn from '@/assets/images/zoom-in.png'
import zoomOut from '@/assets/images/zoom-out.png'
import SearchView from './search-view.vue'
import store from '@/store'

export default defineComponent({
  name: 'MapBtns',
  components: { SearchView },
  emits: ['full', 'change', 'zoom', 'point'],
  setup(_, ctx) {
    const curViewType = computed(() => store.state.curView.type)
    const btns = computed(() => {
      const mapType =
        store.state.curMapType === '2D'
          ? { key: '3D', icon: d3, title: '开启3D地图' }
          : { key: '2D', icon: d2, title: '开启2D地图' }
      const list = [
        { key: 'search', icon: btn1 },
        { key: 'in', icon: zoomIn, title: '放大地图' },
        { key: 'out', icon: zoomOut, title: '缩小地图' },
        { key: 'full', icon: btn2, title: '全屏' },
        { key: 'switch-community-point', icon: btn6, title: '显示/隐藏小区点' },
        { key: 'point', icon: btn4 },
        // { key: '', icon: btn5 },
        // { key: '', icon: btn6 },
      ]

      const polyline = { key: 'polyline', icon: btn7 }
      return curViewType.value === 'street'
        ? [mapType, ...list, polyline]
        : [mapType, ...list]
    })
    const fullScreen = ref(false)
    const searchModal = ref(false)

    const handleClick = (key: string) => {
      switch (key) {
        case '3D':
          store.commit('SET_MAP_TYPE', key)
          break
        case '2D':
          store.commit('SET_MAP_TYPE', key)
          break
        case 'full':
          fullScreen.value = !fullScreen.value
          ctx.emit('full', fullScreen.value)
          break
        case 'search':
          searchModal.value = true
          break
        case 'in':
        case 'out':
          ctx.emit('zoom', key)
          break
        case 'switch-community-point':
          store.commit(
            'SET_SHOW_COMMUNITY_POINTS',
            !store.state.showCommunityPoints
          )
          break
        default:
          break
      }
    }

    const options = computed(() => {
      if (curViewType.value === 'street') {
        return [
          { label: '第一工作站', value: 'workArea1' },
          { label: '第二工作站', value: 'workArea2' },
          { label: '第三工作站', value: 'workArea3' },
          { label: '振兴小区', value: 'zhenxing' },
          { label: '威海路62弄', value: 'weihai' },
        ]
      }
      return []
    })
    const checkboxValues = ref([])
    const handleChange = (e: any) => {
      ctx.emit('change', e)
      checkboxValues.value = e
    }
    const treeData = ref([
      {
        title: '居住',
        key: '居住',
        value: '居住',
        children: [
          {
            title: '商品房、二级旧里、直管公房',
            key: 'community',
            value: 'community',
          },
        ],
      },
      {
        title: '非居',
        key: '非居',
        value: '非居',
        children: [
          {
            title: '衣、食、住、行',
            key: 'life',
            tipvalue: 'life',
            children: [
              {
                title: '衣',
                key: 'yi',
                value: 'yi',
              },
              {
                title: '食',
                key: 'shi',
                value: 'shi',
              },
              {
                title: '住',
                key: 'zhu',
                value: 'zhu',
              },
              {
                title: '行',
                key: 'xing',
                value: 'xing',
              },
              {
                title: '其他',
                key: 'other',
                value: 'other',
              },
            ],
          },
          {
            title: '为老服务站',
            key: 'old',
            value: 'old',
          },
          {
            title: '地标性建筑',
            key: 'sign',
            value: 'sign',
          },
          {
            title: '历史保护建筑',
            key: 'history',
            value: 'history',
          },
        ],
      },
      // {
      //   title: '防寒抗冻',
      //   key: 'cold',
      //   value: 'cold',
      // },
    ])
    const expandedKeys = ref(['居住', '非居', 'life'])
    const checkedKeys = computed(() => store.state.checkedKeys)
    const handleCheck = (data: string[]) => {
      store.commit('SET_CHECKED_KEYS', data)
      ctx.emit('point', data)
    }
    watch(
      [() => curViewType.value, () => store.state.curMapType],
      () => (checkboxValues.value = [])
    )

    return {
      btns,
      fullScreen,
      searchModal,
      handleClick,
      options,
      checkboxValues,
      handleChange,
      curViewType,
      treeData,
      expandedKeys,
      checkedKeys,
      handleCheck,
    }
  },
})
</script>

<style lang="stylus">
.btns-tip *
  color #fff !important
  font-size .1rem
  padding .04rem .02rem
  .ant-checkbox-group-item
    display block
    margin-bottom .02rem
</style>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.map-btns
  position fixed
  bottom .05rem
  left calc(20vw + .1rem)
  transition left .3s ease
  &.full
    left .05rem
  img
    display block
    width .2rem
    height @width
    margin-top .05rem
    cursor pointer
    transition .2s ease
    background rgba(0,0,0,.6)
    $blur()
    &:hover
      transform scale(1.2)
</style>
