<template>
  <m-card title="案件分析">
    <div class="nav">
      <div>
        <Tabs :list="tabs" horizontal />
      </div>
      <div>
        <span
          v-for="option in options"
          :key="option"
          :class="{ on: curOption === option }"
          @click="curOption = option"
        >
          {{ option }}
        </span>
      </div>
    </div>
    <div class="rank">
      <SubTitle>分类排行</SubTitle>
      <div class="content">
        <m-progress
          v-for="rank in rankList"
          :key="rank.name"
          :value="rank.value"
          :msg="rank"
        />
      </div>
    </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 } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import Place, { PlaceProp } from '../components/place.vue'

export default defineComponent({
  name: 'Analysis',
  components: { Tabs, SubTitle, Place },
  setup() {
    const tabs = ref<TabsProp[]>([
      {
        key: 'all',
        name: '综合管理',
      },
      {
        key: 'street',
        name: '街面管理',
      },
      {
        key: 'community',
        name: '小区管理',
      },
    ])
    const options = ref(['日', '周', '月'])
    const curOption = ref('月')
    const rankList = ref([
      { name: '分类1', value: 50 },
      { name: '分类2', value: 31 },
      { name: '分类3', value: 15 },
    ])
    const placeList = ref<PlaceProp[]>([
      { name: '延安东路1292弄', value: 3, type: '路段' },
      { name: '延安东路1293弄', value: 5, type: '小区' },
      { name: '延安东路1294弄', value: 8, type: '商业' },
    ])
    return {
      tabs,
      options,
      curOption,
      rankList,
      placeList,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.nav
  width 100%
  display flex
  align-items center
  justify-content space-between
  margin .05rem 0
  >div
    width 70%
    &:last-child
      width 20%
      display flex
      >span
        $center()
        width .22rem
        height @width
        color $primary-border
        border .01rem solid @color
        cursor pointer
        &:hover
        &.on
          color $secondary-color
          border-color @color
          background rgba(50,197,255,.2)
.rank
  flex 1
.place
  margin .05rem 0
  .content
    display flex
    justify-content space-between
    >div
      width 30%
</style>
