<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" />
          <div>
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="manage">
        <Tabs :list="tabList" @select="getCurTabKey" />
        <div class="content">
          <SubTitle>响应度</SubTitle>
          <div v-if="showChart" class="chart">
            <m-line :dataset="responseChartData" :option="chartOption" />
          </div>
          <SubTitle>分类排行</SubTitle>
          <div class="chart wrapper">
            <div v-if="showChart">
              <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>
        <m-scroll :limit="1" :length="1" :step="1" mode="2">
          <div
            v-for="(item, i) in urgentCase.slice(0, 1)"
            :key="item + i"
            class="detail"
          >
            <div>
              <p>
                {{ item.managementType }}管理 · {{ item.businsessTypeLv1 }} ·
                {{ item.source }}
              </p>
              <span>{{ item.address }}</span>
            </div>
            <div>
              {{ item.reportContent }}
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import { ChartTypes } from '@/components/MyComponent'
import store from '@/store'

export default defineComponent({
  name: 'Complain',
  components: { Tabs, SubTitle },
  setup() {
    store.dispatch('GET_YOUSUBIDA_RANK')
    store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', '综合')
    store.dispatch('GET_URGENTCASE', {
      bxmaintainType: '1',
      status_in: '待派遣,已派单',
      acceptTime_gte: '2021-04-16',
      pageSize: 110,
    })

    const rank = computed(() => store.state.yousubidaRank)
    const classificationRank = computed(() => store.state.classificationRank)
    const urgentCase = computed(() => store.state.urgentCase)

    console.log(urgentCase)

    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curTheme === 'manage')

    const summary = computed(() => {
      // console.log(rank.value.streetDispatchNum)
      // console.log(rank.value.streetNum)
      // console.log(rank.value.streetDispatchNum / rank.value.streetNum)
      return [
        {
          name: '街面管理',
          value: rank.value.streetDispatchNum,
          percent: parseInt(
            (rank.value.streetDispatchNum / rank.value.streetNum) * 100
          ),
        },
        {
          name: '综合管理',
          value: rank.value.communityNum,
          percent:
            (rank.value.comprehensiveDispatchNum /
              rank.value.comprehensiveNum) *
            100,
        },
        {
          name: '小区管理',
          value: rank.value.communityDispatchNum,
          percent: parseInt(
            (rank.value.communityDispatchNum / rank.value.communityNum) * 100
          ),
        },
      ]
    })

    const tabList = ref<TabsProp[]>([
      {
        key: '综合',
        name: '综合管理',
      },
      {
        key: '街面',
        name: '街面管理',
      },
      {
        key: '小区',
        name: '小区管理',
      },
    ])
    const tabKey = ref('综合')

    const getCurTabKey = (item: string) => {
      tabKey.value = item
      store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', item)
    }
    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: 250,
          class2: 200,
          class3: 200,
          class4: 300,
          class5: 230,
        },
      ],
    })

    // 监听年份切花更改检查楼数  隐患点数 危险点数
    watch(
      [() => classificationRank.value, () => tabKey.value],
      ([data, key]) => {
        // console.log(data, key)
        if (data.length === 0) return

        const dimensions = [
          { name: 'class1', displayName: '分类1', max: 100 },
          { name: 'class2', displayName: '其他', max: 100 },
          { name: 'class3', displayName: '其他', max: 100 },
          { name: 'class4', displayName: '其他', max: 100 },
          { name: 'class5', displayName: '其他', max: 100 },
        ]

        const source = [
          {
            seriesName: '分类排行',
            class1: 0,
            class2: 0,
            class3: 0,
            class4: 0,
            class5: 0,
          },
        ]

        let max = data[0].num
        for (let i = 0; i < data.length - 1; i++) {
          max = max < data[i + 1].num ? data[i + 1].num : max
        }

        data.forEach((item, index) => {
          dimensions[index].displayName = item.businsessType
          dimensions[index].max = max
          source[0]['class' + ++index] = item.num
        })

        classChartData.value = {
          dimensions,
          source,
        }
      },
      { immediate: true }
    )

    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<ChartTypes.ECOption>({
      color: ['#9B88F9', 'gold'],
      legend: {
        right: '1%',
        itemWidth: fontSize.value,
        itemHeight: fontSize.value * 0.8,
      },
    })

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

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.box
  flex-direction column
  display flex
  height 100%
.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-size 0.12rem
        font-weight bold
      p
        color #ccc
.manage
  display flex
  height 60%
  // margin-bottom .05rem
  .content
    flex 1
    padding-left 0.1rem
    .chart
      width 100%
      height 40%
      &.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 0.06rem
                height @width
                border-radius 50%
                margin-right 0.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
  height 25%
  // overflow hidden
  .detail
    display flex
    flex-direction column
    padding 0.1rem
    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
    margin-bottom 0.05rem
    >div
      flex 1
      &:first-child
        border-bottom 0.01rem solid $primary-border
        padding-bottom 0.05rem
        margin-bottom @padding-bottom
      span
        color #ccc
      p
        font-size 0.12rem
        font-weight bold
</style>
