<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">
        <SubTitle>响应度</SubTitle>
        <div class="chart">
          <m-line :dataset="responseChartData" :option="chartOption" />
        </div>
        <SubTitle>分类排行</SubTitle>
        <div class="chart wrapper">
          <div>
            <m-radar :dataset="classChartData" :option="chartOption2" />
          </div>
          <div>
            <p v-for="item in classChartData.dimensions" :key="item.name">
              <span /> {{ item.displayName }}：
              {{ classChartData.source[0][item.name] }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="emergency">
      <m-sub>紧急案件</m-sub>
      <div class="detail">
        <div>
          <p>综合管理 · 事件分类 · 来源</p>
          <span>上海市黄浦区北京东路31-91号益丰·外滩源</span>
        </div>
        <div>
          内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
        </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 { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'

export default defineComponent({
  name: 'Complain',
  components: { Tabs, SubTitle },
  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<ECOption>({
      color: ['#9B88F9', 'gold'],
      legend: {
        right: '1%',
      },
    })
    const classChartData = ref({
      dimensions: [
        { name: 'class1', displayName: '分类1', max: 500 },
        { name: 'class2', displayName: '分类2', max: 500 },
        { name: 'class3', displayName: '分类3', max: 500 },
        { name: 'class4', displayName: '分类4', max: 500 },
        { name: 'class5', displayName: '分类5', max: 500 },
      ],
      source: [
        {
          seriesName: '分类排行',
          class1: 150,
          class2: 200,
          class3: 200,
          class4: 300,
          class5: 230,
        },
      ],
    })
    const chartOption2 = ref({
      color: ['#FF9D27'],
      legend: { show: false },
      radar: {
        name: {
          // show: false,
          color: 'transparent',
        },
        indicator: {},
        splitArea: {
          areaStyle: {
            color: [
              'rgba(1,124,143,.9)',
              'rgba(1,124,143,.7)',
              'rgba(1,124,143,.5)',
              'rgba(1,124,143,.3)',
              'rgba(1,124,143,.1)',
            ],
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.3)',
          },
        },
        axisLine: {
          show: false,
        },
        radius: '80%',
      },
    })
    return {
      summary,
      tabList,
      responseChartData,
      chartOption,
      classChartData,
      chartOption2,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.summary
  display flex
  justify-content space-between
  align-items center
  margin-top .1rem
  >div
    display flex
    align-items center
    >div
      margin-left .05rem
      .count
        font-size .12rem
        font-weight bold
      p
        color #ccc
.manage
  display flex
  height 60%
  // margin-bottom .05rem
  .content
    flex 1
    padding-left .1rem
    .chart
      width 100%
      height 43%
      &.wrapper
        display flex
        >div
          width 50%
          height 100%
          &:last-child
            $center()
            flex-direction column
            p
              display flex
              align-items center
              span
                display inline-block
                width .06rem
                height @width
                border-radius 50%
                margin-right .1rem
                background #826AFA
              &:nth-of-type(2) > span
                background #E02020
              &:nth-of-type(3) > span
                background #F7B500
              &:nth-of-type(4) > span
                background #6DD400
              &:nth-of-type(5) > span
                background #32C5FF
.emergency
  overflow hidden
  .detail
    display flex
    flex-direction column
    padding .1rem
    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
    margin-bottom .05rem
    >div
      flex 1
      &:first-child
        border-bottom .01rem solid $primary-border
        padding-bottom .05rem
        margin-bottom @padding-bottom
      span
        color #ccc
      p
        font-size .12rem
        font-weight bold
</style>
