<template>
  <m-card title="实有单位">
    <m-sub2 :addition="{ value: trueCompany.companyNum, unit: '家' }">
      单位数量
    </m-sub2>
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <m-count class="count orange-count" :value="item.value" />
        <p>
          {{ item.name }}
          <!-- <img v-if="item.icon" :src="item.icon" /> -->
        </p>
      </div>
    </div>
    <div class="content">
      <div v-for="item in pieData" :key="item.name">
        <span>{{ item.name }}</span>
        <div v-if="showChart" class="progress">
          <m-progress color="#EDB872" :value="item.rate" />
        </div>
        <m-count class="count" :value="item.value" />
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import icon1 from '@/assets/images/icon1.png'
import store from '@/store'
export default defineComponent({
  name: 'Company',
  setup() {
    const trueCompany = computed(() => store.state.pubulicSafeTrueCompany)

    const showChart = computed(() => store.state.curTheme === 'safety')

    const sum = computed(() => {
      return [
        { name: '本街道注册', value: trueCompany.value.thisCity },
        { name: '境外注册', value: trueCompany.value.outCountry, icon: icon1 },
        { name: '境内注册', value: trueCompany.value.inCountry, icon: icon1 },
      ]
    })
    const pieData = computed(() => {
      const {
        institution = 0,
        enterprise = 0,
        organization = 0,
        other = 0,
      } = trueCompany.value
      const total = institution + enterprise + organization + other
      return [
        {
          name: '事业单位',
          value: institution,
          rate: (institution / total) * 100,
        },
        {
          name: '企业单位',
          value: enterprise,
          rate: (enterprise / total) * 100,
        },
        {
          name: '机关团体',
          value: organization,
          rate: (organization / total) * 100,
        },
        { name: '其他', value: other, rate: (other / total) * 100 },
      ]
    })
    return {
      showChart,
      sum,
      pieData,
      trueCompany,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  display flex
  align-items center
  justify-content space-around
  margin 0.05rem 0
  >div
    display flex
    align-items center
    .count
      font-size 0.14rem
      font-family $font-barlow
      margin-right .05rem
    p
      color #ccc
    img
      width 0.1rem
      height @width
      margin-left 0.02rem
.content
  flex 1
  >div
    display flex
    align-items center
    justify-content space-between
    .progress
      flex 1
      margin 0 .05rem
    span
      min-width .5rem
    .count
      min-width .5rem
      font-family $font-barlow
      font-size .12rem
</style>
