<template>
  <m-card mode="3" title="管理要素">
    <div class="sum">
      <div class="total">
        评分
        <m-count class="count" :value="92" />
      </div>
      <div class="safety">
        安全
        <m-count class="count" :value="95" />
      </div>
      <div class="clean">
        干净
        <m-count class="count" :value="92" />
      </div>
      <div class="order">
        有序
        <m-count class="count" :value="89" />
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <img src="@/assets/images/p10.png" />
        安全
        <m-count class="count" :value="95" />
      </div>
      <div class="chart">
        <m-line :dataset="data" :option="option1" />
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <img src="@/assets/images/p10.png" />
        干净
        <m-count class="count" :value="92" />
      </div>
      <div class="chart">
        <m-line :dataset="data" :option="option2" />
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <img src="@/assets/images/p10.png" />
        有序
        <m-count class="count" :value="89" />
      </div>
      <div class="chart">
        <m-line :dataset="data" :option="option3" />
      </div>
    </div>
  </m-card>
</template>

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

export default defineComponent({
  name: 'ManageIssue',
  setup() {
    const data = ref<ChartTypes.DatasetComponentOption>({
      dimensions: [
        { name: 'date', displayName: '日期' },
        { name: 'value', displayName: '分数' },
      ],
      source: [
        { date: '0325', value: 60 },
        { date: '0326', value: 70 },
        { date: '0327', value: 80 },
        { date: '0328', value: 90 },
        { date: '0329', value: 80 },
        { date: '0330', value: 70 },
        { date: '0331', value: 60 },
        { date: '0401', value: 60 },
        { date: '0402', value: 70 },
        { date: '0403', value: 90 },
      ],
    })
    const option1 = ref<ChartTypes.LineOption>({
      color: [['#8ED617', '#429321']],
      grid: { top: '5%' },
      legend: { show: false },
      series: [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
          },
          emphasis: {
            focus: 'series',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(142,214,23,.7)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(142,214,23,.1)', // 100% 处的颜色
                },
              ],
            } as any,
          },
        },
      ],
      xAxis: { axisLabel: { interval: 0 } },
    })
    const option2 = ref<ChartTypes.LineOption>({
      color: [['#00f2ff', '#05A4FF']],
      grid: { top: '5%' },
      legend: { show: false },
      series: [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
          },
          emphasis: {
            focus: 'series',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,242,255,.7)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,242,255,.1)', // 100% 处的颜色
                },
              ],
            } as any,
          },
        },
      ],
      xAxis: { axisLabel: { interval: 0 } },
    })
    const option3 = ref<ChartTypes.LineOption>({
      color: [['#ffd400', '#F77120']],
      grid: { top: '5%' },
      legend: { show: false },
      series: [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
          },
          emphasis: {
            focus: 'series',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(255,212,0,.7)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255,212,0,.1)', // 100% 处的颜色
                },
              ],
            } as any,
          },
        },
      ],
      xAxis: { axisLabel: { interval: 0 } },
    })
    return {
      data,
      option1,
      option2,
      option3,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  position relative
  height 1.4rem
  background url('@/assets/images/issue-bg.png') 100% / 100% 100% no-repeat
  >div
    position absolute
    font-size .12rem
    font-weight bold
    .count
      font-size .15rem
      font-family $font-pang
    &.total
      top 6%
      left @top
      color #ccc
    &.safety
      top 40%
      left 22%
      color #8ED617
    &.clean
      top 48%
      left 58%
      color $edge
    &.order
      top 20%
      left 74%
      color $yellow
.title
  display flex
  align-items center
  font-family $font-zcool
  font-size .14rem
  color #ccc
  margin-bottom .05rem
  img
    width .18rem
    height @width
    margin-right .05rem
  .count
    margin-left .05rem
    font-family $font-pang
    margin-bottom .03rem
.detail
  margin-bottom .05rem
  .chart
    width 100%
    height .8rem
  &:nth-of-type(2)
    .count
      color #8ED617
  &:nth-of-type(3)
    .count
      color $edge
  &:nth-of-type(4)
    .count
      color $yellow
</style>
