<template>
  <m-card title="案件分析" class="box">
    <div class="nav">
      <div>
        <Tabs :list="tabs" horizontal @select="curTab = $event" />
      </div>
      <div>
        <span
          v-for="option in options"
          :key="option.key"
          :class="{ on: curOption === option.key }"
          @click="curOption = option.key"
        >
          {{ option.name }}
        </span>
      </div>
    </div>
    <div class="rank">
      <SubTitle>分类排行</SubTitle>
      <div v-if="rankList.length > 0" class="content">
        <m-scroll :length="rankList.length" :limit="4">
          <m-progress
            v-for="rank in rankList"
            :key="rank.name"
            :value="rank.rate"
            :msg="rank"
          />
        </m-scroll>
      </div>
      <m-empty v-else />
    </div>
    <div class="place">
      <SubTitle>多发地点</SubTitle>
      <div class="content">
        <div v-for="item in placeList" :key="item.name">
          <Place :data="item" />
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import Place, { PlaceProp } from '../components/place.vue'
import store from '@/store'
export default defineComponent({
  name: 'CaseAnalysis',
  components: { Tabs, SubTitle, Place },
  setup() {
    const curTab = ref('综合')
    const tabs = ref<TabsProp[]>([
      { name: '综合管理', key: '综合' },
      { name: '街面管理', key: '街面' },
      { name: '小区管理', key: '小区' },
    ])
    const options = ref([
      { name: '日', key: 'day' },
      { name: '周', key: 'week' },
      { name: '月', key: 'month' },
    ])
    const curOption = ref('month')

    watch(
      [() => curTab.value, () => curOption.value],
      ([type, time]) => {
        if (!time || !type) return
        store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
          managementType: type,
        })
        store.dispatch('GET_MOREHAPPEN_ADDR', {
          managementType: type,
        })
      },
      { immediate: true }
    )

    const rankList = computed(() => {
      const data = store.state.analysisRank[curOption.value] || []
      const total = data.reduce((acc, cur) => acc + cur.num, 0)
      return data.map((item: any) => ({
        name: item.businsessType || item.businessType,
        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
        value: item.num,
        unit: '件',
      }))
    })

    const placeList = computed(() => {
      const data = store.state.moreHappenAddr[curOption.value] || []
      return data.map((item: any) => ({
        name: item.address,
        value: item.num,
        type: '路段',
      }))
    })

    return {
      tabs,
      options,
      curTab,
      curOption,
      rankList,
      placeList,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.box
  overflow hidden
  .nav
    width 100%
    overflow hidden
    display flex
    align-items center
    justify-content space-between
    margin-top 0.05rem
    >div
      width 75%
      &:last-child
        width 20%
        display flex
        >span
          $center()
          width 0.22rem
          height @width
          color $primary-border
          border 0.01rem solid @color
          cursor pointer
          &:hover, &.on
            color $secondary-color
            border-color @color
            background rgba(50, 197, 255, 0.2)
  .rank
    overflow hidden
    // height 1rem
    .content
      height 1.2rem
      overflow hidden
  .place
    overflow hidden
    .content
      display flex
      justify-content space-between
      >div
        width 32%
</style>
