<template>
  <m-card title="案件分析" class="box">
    <div class="rank">
      <m-sub2>分类排行</m-sub2>
      <div class="nav">
        <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 v-if="rankList.length > 0" class="content">
        <div v-for="item in rankList" :key="item.name">
          <span>{{ item.name }}</span>
          <div v-if="showChart" class="progress">
            <m-progress :color="['#FF692D', '#F7973D']" :value="item.rate" />
          </div>
          <m-count class="count" :value="item.value" />
        </div>
      </div>
      <m-empty v-else />
    </div>
    <div class="place">
      <m-sub2>多发地点</m-sub2>
      <div v-if="placeList.length > 0" class="content">
        <div v-for="item in placeList" :key="item.name">
          <p>{{ item.name }}</p>
          <div>
            <span>{{ item.type }}</span>
            <m-count class="count" :value="item.value" />
          </div>
        </div>
      </div>
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import store from '@/store'
export default defineComponent({
  name: 'CaseAnalysis',
  setup() {
    const showChart = computed(() => store.state.curTheme === 'manage')
    const options = ref([
      { name: '日', key: 'day' },
      { name: '周', key: 'week' },
      { name: '月', key: 'month' },
    ])
    const curOption = ref('month')

    const rankList = computed(() => {
      const data = store.state.analysisRank[curOption.value] || []
      const total = data.reduce((acc, cur) => acc + cur.num, 0)
      const result = data.map((item: any) => ({
        name: item.managementType,
        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
        value: item.num,
      }))
      if (result.length > 0) {
        const [a, b, c] = result
        return [c, a, b]
      }
      return []
    })

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

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

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.box
  overflow hidden
  .nav
    width 100%
    display flex
    align-items center
    justify-content flex-end
    >div
      width 75%
      &:last-child
        width 20%
        display flex
        >span
          $center()
          width .4rem
          height .12rem
          margin-left .04rem
          color $primary-border
          cursor pointer
          font-size .08rem
          background rgba(50,197,255,.2)
          &:hover
          &.on
            color #fff
            background $secondary-color
  .rank
    overflow hidden
    .content
      height .8rem
      display flex
      flex-direction column
      justify-content space-around
      >div
        display flex
        align-items center
        justify-content space-between
        .progress
          flex 1
          margin 0 .1rem
        span
          color #ccc
        .count
          font-family $font-barlow
          font-size .12rem
  .place
    .content
      display flex
      justify-content space-between
      >div
        width 32%
        height .6rem
        background url('@/assets/images/place-bg.png') center / cover no-repeat
        padding .05rem
        >div
          display flex
          justify-content space-between
          align-items center
          margin-top .05rem
          span
            color #77bff9
            border .01rem solid @color
            background rgba(119, 191, 249, 0.2)
            font-size .08rem
            padding 0 .05rem
          .count
            font-size .14rem
</style>
