<template>
  <m-card title="安全排查">
    <div class="chart-wrapper">
      <div class="chart">
        <m-pie
          v-if="pieData.source.length > 0"
          :dataset="pieData"
          :option="pieOption"
        />
        <m-empty v-else />
      </div>
      <div class="legend">
        <div v-for="(item, i) in pieData.source" :key="item.type">
          <i class="dot" :style="`background:${pieOption.color[i]}`" />
          <p>{{ item.type }}</p>
          <span><m-count :value="item.value" />%</span>
        </div>
      </div>
    </div>
    <m-progress
      v-for="item in list"
      :key="item.name"
      :value="item.value"
      :msg="{
        name: item.name,
        value: item.value,
        unit: '%',
        color: '#fff',
      }"
      :color="['rgb(36,59,86)', '#F4923E']"
      @click="test(item)"
    />
    <p />
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A017',
  title: '安全排查',
  row: 1,
}
</script>
<script lang="ts" setup>
const pieData = {
  dimensions: [
    { name: 'type', displayName: '类型' },
    { name: 'value', displayName: '占比' },
  ],
  source: [
    { type: '墙体裂开', value: 35 },
    { type: '阳台开裂', value: 21 },
    { type: '钢构件锈蚀', value: 19 },
    { type: '房屋整体沉降倾斜', value: 14 },
    { type: '场地地质', value: 9 },
    { type: '周边环境风险', value: 11 },
    { type: '其他', value: 5 },
  ],
}
const pieOption = {
  color: [
    '#0076FF',
    '#00BFFF',
    '#9FC444',
    '#FFCE34',
    '#FF9D27',
    '#FF6161',
    '#BABABA',
  ],
  legend: false,
  series: [
    {
      type: 'pie',
      radius: ['60%', '90%'],
      label: {
        show: false,
        position: 'center',
      },
    },
  ],
}
const list = [
  { name: '需专业排查', value: 31 },
  { name: '需应急排险', value: 29 },
  { name: '小梁薄板', value: 49 },
]
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.chart-wrapper
  display flex
  .chart
    width 30%
    height .8rem
  .legend
    flex 1
    display flex
    flex-wrap wrap
    >div
      display flex
      align-items center
      width 50%
      font-size .08rem
      .dot
        display inline-block
        width .06rem
        height @width
        border-radius 50%
      p
        margin 0 .04rem
        color #ccc
</style>
