<template>
  <m-card title="安全排查">
    <div class="summary">
      <div v-for="item in list" :key="item.name" @click="onClick(item)">
        <m-count class="orange-count" :value="item.value" :decimal="2" /> %
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="chart-wrapper">
      <template v-if="pieData.source.length > 0">
        <div class="chart">
          <m-pie
            v-if="pieData.source.length > 0"
            :dataset="pieData"
            :option="pieOption"
          />
        </div>
        <div class="legend">
          <div class="inner">
            <div v-for="(item, i) in pieData.source" :key="item.type">
              <i class="dot" :style="`background:${pieOption.color[i]}`" />
              <p :title="item.type">{{ item.type }}</p>
              <span><m-count :value="item.rate" />%</span>
            </div>
          </div>
        </div>
      </template>
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A017',
  title: '安全排查',
  row: 1,
  baseUrl: window._base_url,
  apis: {
    main: '/service-special-ja-ddd/public/risk/type/statistical',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'

ajax.get({ url: _config.apis.main }).then((res) => {
  const { checkRate, riskTypeStatistical = [] } = res?.data?.content || {}
  list.value = [
    { name: '需专业排查', value: +checkRate.judgeType * 100 || 0 },
    { name: '需应急排险', value: +checkRate.isEmergencyRisk * 100 || 0 },
    { name: '小梁薄板', value: +checkRate.isThinPlate * 100 || 0 },
  ]
  const total = riskTypeStatistical.reduce((acc, cur) => acc + +cur.num, 0)
  pieData.source = riskTypeStatistical.map((item) => ({
    type: item.riskType,
    value: +item.num || 0,
    rate: +((+item.num / total) * 100).toFixed(0),
  }))
})
const pieData = {
  dimensions: [
    { name: 'type', displayName: '安全排查类型' },
    { name: 'value', displayName: '占比' },
  ],
  source: [],
}
const pieOption = {
  color: [
    '#0076FF',
    '#00BFFF',
    '#9FC444',
    '#FFCE34',
    '#FF9D27',
    '#FF6161',
    '#BABABA',
    '#ff0000',
    '#00ff00',
    '#0000ff',
    '#9FE6B8',
    '#FFDB5C',
    '#ff9f7f',
    '#fb7293',
    '#E062AE',
    '#E690D1',
    '#e7bcf3',
    '#9d96f5',
    '#8378EA',
    '#96BFFF',
  ],
  legend: false,
  series: [
    {
      type: 'pie',
      radius: ['60%', '90%'],
      label: {
        show: false,
        position: 'center',
      },
    },
  ],
}
const list = ref([
  { name: '需专业排查', value: 0 },
  { name: '需应急排险', value: 0 },
  { name: '小梁薄板', value: 0 },
])

function onClick({ name }) {
  bus.emit('addPoints', name)
}
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.chart-wrapper
  display flex
  .chart
    width 25%
    height 1rem
  .legend
    flex 1
    .inner
      display flex
      flex-wrap wrap
      >div
        display flex
        align-items center
        width 48%
        font-size .08rem
        &:nth-of-type(2n)
          margin-left .05rem
        .dot
          display inline-block
          width .06rem
          height @width
          border-radius 50%
        p
          margin 0 .04rem
          flex 1
          color #ccc
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
.summary
  display flex
  justify-content space-between
  margin-bottom .04rem
  >div
    text-align center
    cursor pointer
    &:hover
      color $yellow
</style>
