<template>
  <m-card title="有诉必答">
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
        <m-wave-ball :value="item.percent" size=".34rem" />
        <div>
          <m-count class="count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="manage">
      <Tabs :list="tabList" />
      <div class="content">
        <m-line :dataset="responseChartData" :option="chartOption"></m-line>
      </div>
    </div>
    <div class="emergency">
      <m-sub>紧急案件</m-sub>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'

export default defineComponent({
  name: 'Complain',
  components: { Tabs },
  setup() {
    const summary = ref([
      {
        name: '街面管理',
        value: 75,
        percent: 60,
      },
      {
        name: '综合管理',
        value: 56,
        percent: 30,
      },
      {
        name: '小区管理',
        value: 85,
        percent: 78,
      },
    ])
    const tabList = ref<TabsProp[]>([
      {
        key: 'all',
        name: '综合管理',
      },
      {
        key: 'street',
        name: '街面管理',
      },
      {
        key: 'community',
        name: '小区管理',
      },
    ])
    const responseChartData = ref({
      dimensions: [
        { name: 'name', displayName: '坐标名' },
        { name: 'data1', displayName: '今日新增及存量' },
        { name: 'data2', displayName: '今日派单处置' },
      ],
      source: [
        { name: '09-10', data1: 100, data2: 10 },
        { name: '20-11', data1: 110, data2: 20 },
        { name: '11-12', data1: 120, data2: 30 },
        { name: '12-13', data1: 130, data2: 40 },
        { name: '13-14', data1: 140, data2: 50 },
        { name: '14-15', data1: 150, data2: 60 },
        { name: '15-16', data1: 150, data2: 100 },
      ],
    })
    const chartOption = ref({
      color: ['#9B88F9', 'gold'],
    })
    return {
      summary,
      tabList,
      responseChartData,
      chartOption,
    }
  },
})
</script>

<style lang="stylus" scoped>
.summary
  display flex
  justify-content space-between
  align-items center
  margin .1rem 0
  >div
    display flex
    align-items center
    >div
      margin-left .05rem
      .count
        font-size .12rem
        font-weight bold
      p
        color #ccc
.manage
  display flex
  .content
    flex 1
</style>
