<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>
      <SubTitle>事件类型</SubTitle>
      <div class="duty-type">
        <div v-if="showChart" class="chart">
          <m-pie :dataset="pieData" :option="pieOption" />
        </div>
        <div class="legend">
          <div v-for="(item, i) in pieData.source" :key="item.name">
            <p>
              <span :style="{ background: pieOption.color[i] }" />
              {{ item.name }}
            </p>
            <p>
              {{ ((item.value / total) * 100).toFixed(0) }}%
              <m-count :value="item.value" />人
            </p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <SubTitle>居委事件数量</SubTitle>
      <div v-if="showChart" class="chart">
        <m-bar :dataset="barData" :option="barOption" />
      </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 { computed, 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'
import store from '@/store'

export default defineComponent({
  name: 'DutyAnalysis',
  components: { Tabs, SubTitle, Place },
  setup() {
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curView.type !== 'street')
    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: '商业' },
    ])
    const barData = ref({
      dimensions: [
        { name: 'name', displayName: '居委' },
        { name: 'data1', displayName: '类型1' },
        { name: 'data2', displayName: '类型2' },
        { name: 'data3', displayName: '类型3' },
        { name: 'data4', displayName: '类型4' },
        { name: 'data5', displayName: '类型5' },
      ],
      source: [
        {
          name: '均乐',
          data1: 100,
          data2: 100,
          data3: 100,
          data4: 50,
          data5: 50,
        },
        {
          name: '振兴',
          data1: 110,
          data2: 110,
          data3: 120,
          data4: 10,
          data5: 20,
        },
        {
          name: '顺天村',
          data1: 120,
          data2: 130,
          data3: 140,
          data4: 30,
          data5: 40,
        },
        {
          name: '江阴',
          data1: 130,
          data2: 140,
          data3: 160,
          data4: 40,
          data5: 60,
        },
        {
          name: '新昌',
          data1: 140,
          data2: 150,
          data3: 180,
          data4: 50,
          data5: 80,
        },
        {
          name: '长江',
          data1: 150,
          data2: 160,
          data3: 190,
          data4: 60,
          data5: 90,
        },
        {
          name: '定兴',
          data1: 150,
          data2: 160,
          data3: 190,
          data4: 60,
          data5: 90,
        },
        {
          name: '三德',
          data1: 150,
          data2: 160,
          data3: 190,
          data4: 60,
          data5: 90,
        },
      ],
    })
    const barOption = ref({
      color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
      legend: {
        right: '2%',
        itemWidth: fontSize.value * 0.6,
        itemHeight: fontSize.value * 0.8,
      },
      series: [
        {
          type: 'bar',
          barWidth: '18%',
          itemStyle: { borderRadius: 8 },
          barGap: 0,
          stack: '总量',
        },
        {
          type: 'bar',
          barWidth: '18%',
          itemStyle: { borderRadius: 8 },
          barGap: 0,
          stack: '总量',
        },
        {
          type: 'bar',
          barWidth: '18%',
          itemStyle: { borderRadius: 8 },
          barGap: 0,
          stack: '总量',
        },
      ],
    })
    const pieData = ref({
      dimensions: [
        { name: 'name', displayName: '类型名称' },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        { name: '事件类型1', value: 2939 },
        { name: '事件类型2', value: 4261 },
        { name: '事件类型3', value: 2204 },
        { name: '事件类型4', value: 2086 },
        { name: '事件类型5', value: 1910 },
      ],
    })
    const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
    const pieOption = ref({
      color: ['#00BFFF', '#FFCE34', '#826AFA', '#589C20', '#F47C1F'],
      legend: { show: false },
      series: {
        type: 'pie',
        radius: [0, '90%'],
        center: ['40%', '50%'],
        label: {
          show: false,
        },
      },
    })
    return {
      showChart,
      total,
      tabs,
      options,
      curOption,
      rankList,
      placeList,
      barData,
      barOption,
      pieData,
      pieOption,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.nav
  width 100%
  display flex
  align-items center
  justify-content space-between
  margin .03rem 0
  >div
    width 75%
    &: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
  .content
    display flex
    justify-content space-between
    >div
      width 32%
.chart
  width 100%
  height 1rem
.duty-type
  width 100%
  height .6rem
  display flex
  .chart
    width 25%
    height 100%
  .legend
    display flex
    flex-wrap wrap
    align-items center
    flex 1
    font-size .09rem
    >div
      width 33.3%
      p
        span
          width .06rem
          height @width
          display inline-block
          margin-right .04rem
          border-radius 50%
        &:last-child
          font-size .08rem
          margin-left .08rem
</style>
