<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="92"></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), '#FF0C0C']"
          :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 } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
import Circle from '../components/circle.vue'

export default defineComponent({
  name: 'ManageIssue',
  components: { Circle },
  setup() {
    const counts = ref([
      { name: '安全', value: 59 },
      { name: '干净', value: 85 },
      { name: '有序', value: 99 },
    ])
    const getColor = (count: number) => {
      if (count <= 60) return '#FF9C15'
      if (count < 90) return '#FFE211'
      else return '#19FF2B'
    }
    const data = ref<ChartTypes.DatasetComponentOption>({
      dimensions: [
        { name: 'date', displayName: '日期' },
        { name: 'safe', displayName: '安全' },
        { name: 'clean', displayName: '干净' },
        { name: 'order', displayName: '有序' },
      ],
      source: [
        { date: '0325', safe: 60, clean: 80, order: 70 },
        { date: '0326', safe: 70, clean: 70, order: 60 },
        { date: '0327', safe: 80, clean: 80, order: 80 },
        { date: '0328', safe: 90, clean: 50, order: 70 },
        { date: '0329', safe: 80, clean: 90, order: 80 },
        { date: '0330', safe: 70, clean: 80, order: 80 },
        { date: '0331', safe: 60, clean: 50, order: 90 },
        { date: '0401', safe: 60, clean: 80, order: 70 },
        { date: '0402', safe: 70, clean: 60, order: 80 },
        { date: '0403', safe: 90, clean: 80, order: 70 },
      ],
    })
    const option = ref<ChartTypes.LineOption>({
      color: [
        ['#1EFBFF', '#0094FF'],
        ['#7F72F5', '#C86DD7'],
        ['#FAD961', '#F76B1C'],
      ],
      legend: { right: '5%' },
      xAxis: { axisLabel: { interval: 0 } },
    })
    const issues = ref([
      { name: '绿化面积㎡', value: 658 },
      { name: '监控点位', value: 28 },
      { name: '垃圾箱房', value: 15 },
      { name: '非机动车位', value: 150 },
      { name: '物业服务人员', value: 168 },
    ])
    return {
      counts,
      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>
