<template>
  <m-card
    title="实有单位"
    :addition="{ value: trueCompany.companyNum, 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="item.icon" /> -->
        </p>
      </div>
    </div>
    <div class="content">
      <div v-if="showChart" class="chart">
        <m-pie
          v-if="showChart && pieData.source[0].value > 0"
          :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, computed } from 'vue'
import icon1 from '@/assets/images/icon1.png'
import store from '@/store'
export default defineComponent({
  name: 'Company',
  setup() {
    store.dispatch('GET_PUBLICSAFE_TRUE_COMPANY')
    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(() => {
      return {
        dimensions: [
          { name: 'name', displayName: '类型' },
          { name: 'value', displayName: '数量' },
        ],
        source: [
          { name: '事业单位', value: trueCompany.value.institution },
          { name: '企业单位', value: trueCompany.value.enterprise },
          { name: '机关团体', value: trueCompany.value.organization },
          { name: '其他', value: trueCompany.value.other },
        ],
      }
    })
    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 {
      showChart,
      sum,
      pieData,
      pieOption,
      trueCompany,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  display flex
  align-items center
  margin 0.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 0.12rem
    p
      color #ccc
      font-size 0.09rem
      text-indent 0.1rem
    img
      width 0.1rem
      height @width
      margin-left 0.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 0.1rem
    >div
      display flex
      justify-content space-between
      align-items center
      >p
        &:first-child
          span
            width 0.06rem
            height @width
            display inline-block
            margin-right @width
            border-radius 50%
        &:last-child
          .count
            font-size 0.12rem
          .unit
            font-size 0.08rem
            color #aaa
            margin-left 0.03rem
</style>
