<template>
  <m-card title="有诉必答">
    <div class="box">
      <div v-if="Object.keys(rank).length > 0" class="summary">
        <div v-for="item in summary" :key="item.name">
          <m-wave :value="item.percent" size=".34rem" color="#DB8000" />
          <div>
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="manage">
        <div class="content">
          <m-sub2>响应度</m-sub2>
          <div v-if="showChart" class="chart">
            <m-line
              v-if="responseChartData.source.length > 0"
              :dataset="responseChartData"
              :option="chartOption"
            />
            <m-empty v-else />
          </div>
          <m-sub2>分类排行</m-sub2>
          <div class="chart wrapper">
            <template
              v-if="
                classChartData.dimensions &&
                  classChartData.dimensions.length > 0
              "
            >
              <div>
                <p v-for="item in classChartData.dimensions" :key="item.name">
                  {{ item.displayName }}
                  <m-count
                    class="count"
                    :value="classChartData.source[0][item.name]"
                  />
                </p>
              </div>
              <div v-if="showChart">
                <m-radar :dataset="classChartData" :option="chartOption2" />
              </div>
            </template>
            <m-empty v-else style="width: 100%" />
          </div>
        </div>
      </div>
      <div class="emergency">
        <m-sub2 :addition="{ value: urgentCase.length }">紧急案件</m-sub2>
        <m-empty
          v-if="!urgentCase || urgentCase.length === 0"
          style="height: 1.22rem"
        />
        <m-scroll
          v-else
          :limit="1"
          :length="urgentCase.length"
          :step="1"
          mode="2"
        >
          <div v-for="item in urgentCase" :key="item" class="detail">
            <div class="title">
              <p>
                {{ item.managementType }}管理 · {{ item.businsessTypeLv1 }} ·
                {{ item.source }}
              </p>
              <span>{{ item.address }}</span>
            </div>
            <div class="msg">
              {{ item.reportContent || '暂无' }}
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
import store from '@/store'

export default defineComponent({
  name: 'Complain',
  setup() {
    const rank = computed(() => store.state.yousubidaRank)
    const classificationRank = computed(() => store.state.classificationRank)
    const urgentCase = computed(() => store.state.urgentCase)
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curTheme === 'manage')
    const summary = computed(() => {
      const {
        streetDispatchNum = 0,
        streetNum = 0,
        comprehensiveDispatchNum = 0,
        comprehensiveNum = 0,
        communityDispatchNum = 0,
        communityNum = 0,
      } = rank.value
      return [
        {
          name: '综合管理',
          value: comprehensiveDispatchNum,
          percent: comprehensiveNum
            ? Math.floor((comprehensiveDispatchNum / comprehensiveNum) * 100)
            : 0,
        },
        {
          name: '街面管理',
          value: streetDispatchNum,
          percent: streetNum
            ? Math.floor((streetDispatchNum / streetNum) * 100)
            : 0,
        },
        {
          name: '小区管理',
          value: communityDispatchNum,
          percent: communityNum
            ? Math.floor((communityDispatchNum / communityNum) * 100)
            : 0,
        },
      ]
    })

    const classChartData = computed(() => {
      let data = classificationRank.value
      if (!data || data.length === 0) return { dimensions: null, source: null }
      data = [
        data.find((e) => e.managementType === '综合') || {
          num: 0,
          managementType: '综合',
        },
        data.find((e) => e.managementType === '街面') || {
          num: 0,
          managementType: '街面',
        },
        data.find((e) => e.managementType === '小区') || {
          num: 0,
          managementType: '小区',
        },
      ]
      const source: any = [
        {
          seriesName: '分类排行',
          class1: 0,
          class2: 0,
          class3: 0,
        },
      ]
      const dimensions = data.map((item, index) => {
        const name = `class${index + 1}`
        source[0][name] = item?.num || 0
        return {
          name,
          displayName: item?.managementType,
          max: Math.max(...data.map((e) => +e?.num || 0)),
        }
      })
      return {
        dimensions,
        source,
      }
    })

    // 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 responseChartData = computed(() => {
      const data = store.state.responsivity
      const dimensions = [
        { name: 'name', displayName: '坐标名' },
        { name: 'data1', displayName: '总数' },
        { name: 'data2', displayName: '派遣数' },
      ]
      if (!data || data.length === 0) return { dimensions, source: [] }
      const source = data.reverse().map((item: any) => {
        const date = item.date && item.date.split('-')
        const { totalNum = 0, reachNum = 0 } = item.statistical || {}
        return {
          name: `${date[1]}-${date[2]}`,
          data1: totalNum,
          data2: reachNum,
        }
      })
      return { dimensions, source }
    })
    const chartOption = ref<ChartTypes.ECOption>({
      color: ['#6BE1B2', '#FFCE34'],
      legend: {
        right: '1%',
        itemWidth: fontSize.value,
        itemHeight: fontSize.value * 0.8,
      },
      xAxis: {
        axisLabel: {
          interval: 0,
        },
      },
    })

    const chartOption2 = ref({
      color: [['#FBFF00', '#FFB100']],
      legend: { show: false },
      radar: {
        radius: '80%',
      },
    })
    return {
      summary,
      showChart,
      responseChartData,
      chartOption,
      classChartData,
      chartOption2,
      rank,
      urgentCase,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.box
  flex-direction column
  display flex
  height 100%
  overflow hidden
  justify-content space-around
  .summary
    height 8%
    display flex
    justify-content space-between
    align-items center
    margin-top 0.1rem
    margin-bottom 0.1rem
    >div
      display flex
      align-items center
      >div
        margin-left 0.05rem
        .count
          font-family $font-barlow
          font-size 0.14rem
        p
          color #ccc
  .manage
    display flex
    height 60%
    .content
      flex 1
      padding-left 0.1rem
      .chart
        width 100%
        height 44%
        &.wrapper
          display flex
          >div
            width 60%
            height 100%
            &:first-child
              flex 1
              $center()
              flex-direction column
              font-size .12rem
              p
                width 50%
                margin 0 auto
                .count
                  font-family $font-barlow
                  font-size .16rem
                  margin-left .1rem
  .emergency
    height 1.22rem
    overflow hidden
    .detail
      display flex
      flex-direction column
      padding 0.1rem
      margin-top .05rem
      height 0.95rem
      box-sizing border-box
      $card-bg2()
      .title
        color $orange
      >div
        flex 1
        &:first-child
          border-bottom 0.01rem solid rgba(105,110,114,.5)
          padding-bottom 0.05rem
          margin-bottom @padding-bottom
        span
          color #ccc
        p
          font-size 0.12rem
          font-weight bold
</style>
