<template>
  <m-card title="实有单位" :addition="{ value: 10203, unit: '家' }">
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <m-count class="count" :value="item.value" />
        <p>
          {{ item.name }}
          <img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
        </p>
      </div>
    </div>
    <div class="content">
      <div class="chart">
        <m-pie :dataset="pieData" :option="pieOption" />
      </div>
      <div class="legend">
        <div v-for="(item, i) in pieData.source" :key="item.name">
          <p>
            <span :style="{ background: pieOption.color[i][0] }" />
            {{ item.name }}
          </p>
          <p>
            <m-count class="count" :value="item.value" />
            <span class="unit">家</span>
          </p>
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Company',
  setup() {
    const sum = ref([
      { name: '本街道注册', value: 6741 },
      { name: '境外注册', value: 1658, icon: 'icon1.png' },
      { name: '境内注册', value: 1804, icon: 'icon1.png' },
    ])
    const pieData = ref({
      dimensions: [
        { name: 'name', displayName: '类型' },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        { name: '事业单位', value: 4591 },
        { name: '企业单位', value: 4591 },
        { name: '机关团体', value: 1020 },
        { name: '其他', value: 899 },
      ],
    })
    const pieOption = ref({
      color: [
        ['#F76B1C', '#FAD961'],
        ['#429321', '#B4EC51'],
        ['#3023AE', '#C86DD7'],
        ['#51B7EC', '#212F93'],
      ],
      legend: { show: false },
      series: [
        {
          type: 'pie',
          radius: [0, '90%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
        },
      ],
    })
    return {
      sum,
      pieData,
      pieOption,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  display flex
  align-items center
  margin .05rem 0
  >div
    flex 1
    text-align center
    position relative
    &+div
      &:before
        content '|'
        position absolute
        left 0
        top 50%
        color $blue
        transform translateY(-50%)
    .count
      font-size .12rem
    p
      color #ccc
      font-size .09rem
      text-indent .1rem
    img
      width .1rem
      height @width
      margin-left .02rem
.content
  flex 1
  display flex
  >div
    height 100%
  .chart
    width 40%
  .legend
    width 60%
    display flex
    flex-direction column
    justify-content space-around
    padding 0 .1rem
    >div
      display flex
      justify-content space-between
      align-items center
      >p
        &:first-child
          span
            width .06rem
            height @width
            display inline-block
            margin-right @width
            border-radius 50%
        &:last-child
          .count
            font-size .12rem
          .unit
            font-size .08rem
            color #aaa
            margin-left .03rem
</style>
