<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="30%" 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>
        <a-input v-model:value="searchKey" placeholder="请输入搜索关键词" />
      </a-input-group>
      <div class="search-btn">搜索</div>
    </div>
    <div class="modal-case-content">
      <div
        v-for="(item, i) in caseList"
        :key="i"
        :class="{ done: item.status === 1 }"
      >
        <div>
          <p>
            <span>{{ item.troubleType }}</span>
            {{ item.address }}
          </p>
          <p>{{ item.acceptTime }} ~ {{ item.backTime }}</p>
        </div>
        <div>{{ item.reportContent }}</div>
        <div v-if="item.status === '已结'" class="flag">已结案</div>
        <div v-else class="flag">处置中</div>
      </div>
    </div>
  </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 store from '@/store'

export default defineComponent({
  name: 'MapBtns',
  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: 'dragable', icon: btn8, title: '开启/关闭拖拽功能' },
        { 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 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 'points':
          store.commit(
            'SET_SHOW_COMMUNITY_POINTS',
            !store.state.showCommunityPoints
          )
          break
        default:
          break
      }
    }
    const searchType = ref('case')
    const searchKey = ref('')
    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 = [])
    )
    return {
      btns,
      fullScreen,
      searchModal,
      handleClick,
      searchType,
      searchKey,
      caseList,
      options,
      checkboxValues,
      handleChange,
      curViewType,
    }
  },
})
</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
  >div
    position relative
    padding .1rem
    border $border
    border-left .02rem solid $secondary-color
    margin-bottom .1rem
    overflow hidden
    &.done
      border-left-color #27C5A2
      .flag
        background #27C5A2
    >div
      &:nth-of-type(1)
        border-bottom $border
        padding-bottom .1rem
        margin-bottom .1rem
        p
          span
            display inline-block
            color orange
            border .01rem solid orange
            border-radius .02rem
            margin-right .1rem
            padding 0 .03rem
            font-size .08rem
          &:last-child
            color #aaa
            font-size .08rem
            margin-top .05rem
    .flag
      background $secondary-color
      position absolute
      top -0.08rem
      right -0.28rem
      transform rotate(45deg)
      height .4rem
      width .8rem
      display flex
      align-items flex-end
      justify-content center
      font-weight bold
      padding-bottom .02rem
</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>
