<template>
  <m-card mode="3" title="管理要素">
    <div class="sum">
      <m-wave
        class="ball"
        size=".76rem"
        :value="92"
        color="rgba(91,213,255,.6)"
      >
        <span class="sum-txt">
          评分 <m-count class="count" :value="totalValue"></m-count>
        </span>
      </m-wave>
    </div>
    <div class="counts">
      <div v-for="item in counts" :key="item.name">
        <Circle
          :value="item.value"
          type="dashboard"
          :show-info="false"
          :color="[getColor(item.value), '#F76B1C']"
          :rate="1.2"
          :stroke-width="8"
          :gap-degree="100"
        >
          <div class="count-txt">
            <m-count
              class="count"
              :value="item.value"
              :style="`color:${getColor(item.value)};
              text-shadow:0 0 .05rem ${getColor(item.value)}`"
            />
            <p>{{ item.name }}</p>
          </div>
        </Circle>
      </div>
    </div>
    <div class="chart">
      <m-line :dataset="data" :option="option" />
    </div>
    <div class="issue">
      <div class="title">
        <img src="@/assets/images/p9.png" />
        评分要素
      </div>
      <div class="content">
        <div v-for="item in issues" :key="item.name">
          <p>{{ item.name }}</p>
          <m-count class="count" :value="item.value" />
        </div>
      </div>
    </div>
  </m-card>
</template>

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

export default defineComponent({
  name: 'ManageIssue',
  components: { Circle },
  setup() {
    const counts = ref<{ name: string; value: number }[]>([])
    const totalValue = ref(0)
    const data = ref()
    watch(
      () => store.state.issueData,
      (issueData) => {
        if (!issueData || issueData.length === 0) return
        const {
          securityScore = 0,
          cleanScore = 0,
          orderlyScore = 0,
          totalScore = 0,
        } = issueData && issueData[0]
        counts.value = [
          { name: '安全', value: securityScore },
          { name: '干净', value: cleanScore },
          { name: '有序', value: orderlyScore },
        ]
        totalValue.value = totalScore
        data.value = {
          dimensions: [
            { name: 'date', displayName: '日期' },
            { name: 'securityScore', displayName: '安全' },
            { name: 'cleanScore', displayName: '干净' },
            { name: 'orderlyScore', displayName: '有序' },
          ],
          source: issueData.map((item: any) =>
            Object.assign({}, item, {
              date: item.date && dayjs(item.date).format('MMDD'),
            })
          ),
        }
      },
      { deep: true, immediate: true }
    )
    const getColor = (count: number) => {
      if (count <= 60) return '#FF9C15'
      if (count < 90) return '#FFE211'
      else return '#19FF2B'
    }
    const option = ref<ChartTypes.LineOption>({
      color: [
        '#0094FF',
        '#7F72F5',
        '#F76B1C',
        // ['#1EFBFF', '#0094FF'],
        // ['#7F72F5', '#C86DD7'],
        // ['#FAD961', '#F76B1C'],
      ],
      legend: { right: '5%' },
      xAxis: { axisLabel: { interval: 0 } },
      yAxis: {
        min: (value: any) => value.min - 2,
        max: 100,
      },
    })
    const issues = ref([
      { name: '充电桩', value: 3 },
      { name: '监控点位', value: 30 },
      { name: '垃圾箱房', value: 5 },
      { name: '停车棚', value: 3 },
      { name: '物业公司', value: 4 },
    ])
    return {
      counts,
      totalValue,
      getColor,
      data,
      option,
      issues,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  position relative
  height 1.2rem
  background url('@/assets/images/issue-bg2.png') 100% / 100% 100% no-repeat
  .ball
    margin-top 8%
    margin-left 15%
  .sum-txt
    z-index 99
    font-size .09rem
    color #ccc
    .count
      color #fff
      font-size .16rem
      font-family $font-pang
.counts
  display flex
  margin-top .1rem
  >div
    flex 1
  .count-txt
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    text-align center
    font-size .09rem
    color #ccc
    .count
      font-size .18rem
      font-family $font-pang
      font-weight 500
.chart
  height 1.5rem
.issue
  .title
    display flex
    align-items center
    font-family $font-zcool
    font-size .14rem
    color $edge
    img
      width .18rem
      height @width
      margin-right .05rem
  .content
    display flex
    flex-wrap wrap
    justify-content space-around
    >div
      width 32%
      min-height .6rem
      background url('@/assets/images/count-bg.png') 100% / 100% 100% no-repeat
      text-align center
      font-size .08rem
      color $blue
      .count
        font-family $font-pang
        font-size .16rem
        color #fff
</style>
