<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 :dataset="responseChartData" :option="chartOption" />
          </div>
          <m-sub2>分类排行</m-sub2>
          <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">
                <i />
                <span>{{ item.displayName }}：</span>
                <span> {{ classChartData.source[0][item.name] }}</span>
                <!-- <span /> {{ item.displayName }}：
                {{ classChartData.source[0][item.name] }} -->
              </p>
            </div>
          </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 moment from 'moment'
import { ChartTypes } from '@/components/MyComponent'
import store from '@/store'

export default defineComponent({
  name: 'Complain',
  setup() {
    store.dispatch('GET_YOUSUBIDA_RANK')
    store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', '综合')
    store.dispatch('GET_URGENTCASE', {
      bxmaintainType: '1',
      status_in: '待派遣,已派单',
      acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
      pageSize: 1000,
    })

    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([
      {
        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: ['#6BE1B2', '#FFCE34'],
      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%
  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-size 0.12rem
          font-weight bold
        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 50%
            height 100%
            &:last-child
              $center()
              flex-direction column
              p
                display flex
                align-items center
                width 100%
                i
                  display inline-block
                  width 0.06rem
                  height @width
                  border-radius 50%
                  margin-right 0.1rem
                  background #826AFA
                &:nth-of-type(2) > i
                  background #E02020
                &:nth-of-type(3) > i
                  background #F7B500
                &:nth-of-type(4) > i
                  background #6DD400
                &:nth-of-type(5) > i
                  background #32C5FF
                span
                  flex 4
                  &:last-child
                    flex 1
  .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>
