<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 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>
      </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',
    list: '/service-special-ja-ddd/public/getBuildingCoordinates',
    // list: '/service-special-ja-ddd/public/wholeBuildingRiskss',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
import p1 from '@/assets/images/p1.png'
import p3 from '@/assets/images/p3.png'
import p4 from '@/assets/images/p4.png'

ajax.get({ url: _config.apis.main }).then((res) => {
  const { checkRate, riskTypeStatistical = [] } = res?.data?.content || {}
  list.value = [
    {
      name: '需专业排查',
      value: +checkRate.judgeType * 100 || 0,
      query: { judgeType: '需专业排查评估' },
      icon: p1,
    },
    {
      name: '需应急排险',
      value: +checkRate.isEmergencyRisk * 100 || 0,
      query: { isEmergencyRisk: true },
      icon: p3,
    },
    {
      name: '小梁薄板',
      value: +checkRate.isThinPlate * 100 || 0,
      query: { isThinPlate: true },
      icon: p4,
    },
  ]
  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<any[]>([
  { name: '需专业排查', value: 0 },
  { name: '需应急排险', value: 0 },
  { name: '小梁薄板', value: 0 },
])

function onClick({ query, icon }) {
  ajax
    .get({
      url: _config.apis.list,
      params: { pageSize: 9000, createTime_desc: 'desc', ...query },
    })
    .then((res) => {
      const data = res?.data?.content || []
      bus.emit('addPoints', { data, icon, size: 12, _key: 'safety' })
    })
}
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.chart-wrapper
  display flex
  flex 1
  .chart
    width 25%
    height 1rem
  .legend
    flex 1
    display flex
    flex-wrap wrap
    >div
      display flex
      align-items center
      width 48%
      font-size .09rem
      &: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 .05rem 0
  >div
    text-align center
    cursor pointer
    &:hover
      color $yellow
</style>
