<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 :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%">
    <div id="modal-search-bar">
      <span class="edge left-top" />
      <span class="edge right-top" />
      <span class="edge left-bottom" />
      <span class="edge right-bottom" />
      <a-input-group compact>
        <a-select v-model:value="searchType">
          <a-select-option value="case">案件</a-select-option>
          <a-select-option value="population">人口</a-select-option>
          <a-select-option value="house">房屋</a-select-option>
        </a-select>
        <a-input
          v-model:value="searchKey"
          placeholder="请输入搜索关键词"
          @pressEnter="handleSearch"
        />
      </a-input-group>
      <div class="search-btn" @click="handleSearch">搜索</div>
    </div>
    <div class="modal-case-content">
      <template v-if="caseList.length > 0">
        <div v-for="(item, i) in caseList" :key="i" @click="handleSelect(item)">
          <span :class="getStyle(item.managementType)">{{
            item.managementType
          }}</span>
          <p>{{ item.address }}</p>
        </div>
      </template>
      <m-empty v-else />
    </div>
  </m-modal>
  <m-drawer v-model="caseModal">
    <CaseDrawer
      :community-info="communityInfo"
      :property-info="propertyInfo"
      :case-info="caseInfo"
    />
  </m-drawer>
</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 CaseDrawer from '@/view/drawers/case-drawer.vue'
import store from '@/store'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'MapBtns',
  components: { CaseDrawer },
  emits: ['full', 'change', 'zoom'],
  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: 'points', icon: btn6, title: '显示/隐藏小区点' },
        // { key: '', 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 searchType = ref('case')
    const searchKey = ref('')
    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
          searchKey.value = ''
          searchType.value = 'case'
          store.dispatch('getCaseList')
          break
        case 'in':
        case 'out':
          ctx.emit('zoom', key)
          break
        case 'points':
          store.commit(
            'SET_SHOW_COMMUNITY_POINTS',
            !store.state.showCommunityPoints
          )
          break
        default:
          break
      }
    }
    const caseList = computed(() => store.state.caseList)
    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
    }
    watch(
      [() => curViewType.value, () => store.state.curMapType],
      () => (checkboxValues.value = [])
    )

    const handleSearch = () => {
      const address = searchKey.value
      store.dispatch('getCaseList', address)
    }
    const getStyle = (type: string): string => {
      switch (type) {
        case '小区':
          return 'green'
        case '街面':
          return 'yellow'
        case '综合':
          return 'blue'
        default:
          return ''
      }
    }

    const caseModal = ref(false)
    const communityInfo = ref(null)
    const propertyInfo = ref(null)
    const caseInfo = ref(null)
    const handleSelect = async (item: any) => {
      const { content } = (
        await ajax.get({ url: `${api.GET_CASE_DETAIL}/${item.id}` })
      ).data
      propertyInfo.value = content
      if (item.communityId) {
        const { content } = (
          await ajax.get({
            url: api.GET_COMMUNITY_DETAIL,
            params: { sectId: item.communityId },
          })
        ).data
        communityInfo.value = content && content[0]
      }
      caseModal.value = true
    }

    return {
      btns,
      fullScreen,
      searchModal,
      handleClick,
      searchType,
      searchKey,
      caseList,
      options,
      checkboxValues,
      handleChange,
      curViewType,
      handleSearch,
      getStyle,
      handleSelect,
      caseModal,
      communityInfo,
      propertyInfo,
      caseInfo,
    }
  },
})
</script>

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

$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)
.btns-tip *
  color #fff !important
  font-size .1rem
  .ant-checkbox-group-item
    display block
#modal-search-bar
  width 100%
  position relative
  margin-bottom .1rem
  .edge
    display block
    position absolute
    width .06rem
    height @width
    border .01rem solid $secondary-color
    z-index 1
    &.left-top
      top 0
      left 0
      border-right none
      border-bottom none
    &.right-top
      top 0
      right 0
      border-left none
      border-bottom none
    &.left-bottom
      bottom 0
      left 0
      border-right none
      border-top none
    &.right-bottom
      bottom 0
      right 0
      border-left none
      border-top none
  .ant-select
    border-radius 0
    color $secondary-color
    background $bg
    width .7rem
    height .25rem
    line-height @height
    font-size .12rem
    .ant-select-selector
      background inherit
      border-radius inherit
      border $border
      height inherit
      line-height inherit
      font-size inherit
      .ant-select-selection-item
        line-height inherit
    .ant-select-arrow
      color $secondary-color
      font-size .1rem
  .ant-input
    width calc(100% - 0.7rem)
    border $border
    background $bg
    color #fff
    height .25rem
    line-height @height
    font-size .1rem
    padding-right .4rem
  .search-btn
    height 100%
    color $secondary-color
    line-height .25rem
    position absolute
    top 0
    right .1rem
    cursor pointer
    z-index 99999
    font-size .12rem
    &:hover
      font-weight bold
      text-decoration underline
.modal-case-content
  max-height 60vh
  overflow-y auto
  overflow-x hidden
  >div
    display flex
    align-items center
    background $table-content-bg
    padding .04rem
    box-sizing border-box
    cursor pointer
    &:nth-of-type(odd)
      background transparent
    &:hover
      background $table-content-title
      color $secondary-color
    >span
      display inline-block
      border .01rem solid #fff
      border-radius .02rem
      font-size .08rem
      padding 0 .02rem
      margin-right .1rem
      &.yellow
        color $yellow
        border-color @color
      &.green
        color $green
        border-color @color
      &.blue
        color $blue
        border-color @color
</style>
<style lang="stylus" scoped>
.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 .3s ease
    background rgba(0,0,0,.6)
    $blur()
    &:hover
      transform scale(1.2)
</style>
