<template>
  <div class="map-btns" :class="{ full: fullScreen }">
    <img
      v-for="btn in btns"
      :key="btn.key"
      :src="btn.icon"
      draggable="false"
      @click="handleClick(btn.key)"
    />
  </div>
  <m-modal v-model="searchModal" title="搜索">
    <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 } 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 store from '@/store'

export default defineComponent({
  name: 'MapBtns',
  emits: ['full'],
  setup(_, ctx) {
    const btns = ref([
      { key: 'search', icon: btn1 },
      { key: 'full', icon: btn2 },
      { key: '', icon: btn3 },
      { key: '', icon: btn4 },
      { key: '', icon: btn5 },
      { key: '', icon: btn6 },
    ])
    const fullScreen = ref(false)
    const searchModal = ref(false)
    const handleClick = (key: string) => {
      switch (key) {
        case 'full':
          fullScreen.value = !fullScreen.value
          ctx.emit('full', fullScreen.value)
          break
        case 'search':
          searchModal.value = true
          break
        default:
          break
      }
    }
    const searchType = ref('case')
    const searchKey = ref('')
    const caseList = computed(() => store.state.caseList)
    return {
      btns,
      fullScreen,
      searchModal,
      handleClick,
      searchType,
      searchKey,
      caseList,
    }
  },
})
</script>

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

$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)

#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
</style>
