<template>
  <m-card title="智慧养老">
    <div>
      <m-sub :addition="{ value: 14696 }">老人数量</m-sub>
      <div class="sum">
        <div v-for="item in oldSum" :key="item.name">
          <m-count class="count" :value="item.value" /><span>%</span>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div>
      <m-sub>年龄分布</m-sub>
      <div class="distribute">
        <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] }" />
              {{ item.name }}
            </p>
            <p>
              {{ ((item.value / total) * 100).toFixed(0) }}%
              <m-count :value="item.value" />人
            </p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <m-sub>老人分类</m-sub>
      <div class="table">
        <div v-for="item in oldType" :key="item.name">
          <p>{{ item.name }}</p>
          <p><m-count :value="item.value" /></p>
          <p><m-count :value="item.percent" :decimal="2" />%</p>
        </div>
      </div>
    </div>
    <div>
      <m-sub>养老方式</m-sub>
      <div class="bar">
        <div
          v-for="item in oldMethod"
          :key="item.name"
          :style="{ flex: item.value, background: item.color }"
        >
          <div :style="{ borderColor: item.color }">
            <p>
              {{ item.name }}
              <m-count
                class="count"
                :value="item.value"
                :style="{ color: item.color }"
              />
            </p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <m-sub>长护险</m-sub>
      <div class="insurance">
        <div>
          申请人数 <m-count class="count" :value="1113" /><span>人</span>
        </div>
        <div>
          申请通过人数 <m-count class="count" :value="812" /><span>人</span>
        </div>
      </div>
      <div v-if="showChart" class="insurance-chart">
        <m-line :dataset="insuranceData" :option="insuranceOption" />
      </div>
    </div>
  </m-card>
</template>

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

export default defineComponent({
  name: 'Old',
  setup() {
    const oldSum = ref([
      { name: '女性占比', value: 65 },
      { name: '男性占比', value: 35 },
      { name: '老龄化占比', value: 43 },
    ])
    const pieData = ref({
      dimensions: [
        { name: 'name', displayName: '年龄分布' },
        { name: 'value', displayName: '人数' },
      ],
      source: [
        { name: '90-99岁', value: 2204 },
        { name: '100以上', value: 284 },
        { name: '80-89岁', value: 1910 },
        { name: '70-79岁', value: 4261 },
        { name: '65-69岁', value: 3086 },
        { name: '60-64岁', value: 2939 },
      ],
    })
    const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
    const pieOption = ref({
      color: ['#8D51C7', '#BEBEBE', '#CA3A40', '#F9B84C', '#34ACFF', '#429321'],
      legend: { show: false },
      series: {
        type: 'pie',
        roseType: 'radius',
        radius: ['10%', '90%'],
        center: ['50%', '55%'],
        label: {
          show: false,
        },
      },
    })
    const oldType = ref([
      { name: '孤老', value: 103, percent: 0.9 },
      { name: '独居', value: 391, percent: 3.38 },
      { name: '纯老', value: 902, percent: 7.8 },
      { name: '低保', value: 63, percent: 0.55 },
      { name: '残疾', value: 877, percent: 7.59 },
      { name: '优抚', value: 28, percent: 0.25 },
    ])
    const oldMethod = ref([
      { name: '社区养老', value: 38464, color: '#72c011' },
      { name: '机构养老', value: 1146, color: '#ff9d26' },
      { name: '居家养老', value: 981, color: '#01bffe' },
    ])
    const insuranceData = ref({
      dimensions: [
        { name: 'name', displayName: '等级' },
        { name: 'value', displayName: '人数' },
      ],
      source: [
        { name: '0级', value: 15 },
        { name: '1级', value: 60 },
        { name: '2级', value: 75 },
        { name: '3级', value: 90 },
        { name: '4级', value: 66 },
        { name: '5级', value: 60 },
        { name: '6级', value: 75 },
      ],
    })
    const insuranceOption = ref({
      color: ['#E690D1'],
      legend: { show: false },
    })
    const showChart = computed(() => store.state.curTheme === 'service')
    return {
      oldSum,
      pieData,
      total,
      pieOption,
      oldType,
      oldMethod,
      insuranceData,
      insuranceOption,
      showChart,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
  width 100%
  display flex
  justify-content space-between
  padding 0 .1rem
  >div
    .count
      font-size .14rem
      font-weight bold
    span
      color #aaa
      font-size .08rem
    p
      color #ccc
.distribute
  width 100%
  height 1.2rem
  display flex
  .chart
    width 40%
    height 100%
  .legend
    display flex
    flex-wrap wrap
    flex 1
    >div
      width 50%
      p
        span
          width .06rem
          height @width
          display inline-block
          margin-right .04rem
          border-radius 50%
        &:last-child
          font-size .08rem
          margin-left .11rem
.table
  display flex
  border .01rem solid $blue
  >div
    flex 1
    text-align center
    &+div
      border-left inherit
    p
      font-size .11rem
      background rgba(0, 118, 255, .15)
      line-height 2
      &+p
        border-top .01rem solid $font-color
      &:nth-of-type(1)
        font-size .1rem
        background rgba(0, 118, 255, .3)
      &:nth-of-type(2)
        color $yellow
      &:nth-of-type(3)
        color $edge
.bar
  display flex
  width 100%
  height .1rem
  margin .2rem 0 .1rem
  >div
    position relative
    .count
      font-size .12rem
    p
      position absolute
      min-width 1rem
    >div
      height .15rem
    &:nth-of-type(1)
      >div
        transform translateY(-90%)
        border-left .01rem solid
      p
        top -0.07rem
        left .05rem
    &:nth-of-type(2)
      >div
        transform translateY(-90%)
        border-right .01rem solid
      p
        top -0.07rem
        right .05rem
        text-align right
    &:nth-of-type(3)
      >div
        transform translateY(50%)
        border-right .01rem solid
      p
        bottom -0.07rem
        right .05rem
        text-align right
.insurance
  display flex
  justify-content space-around
  .count
    font-size .14rem
    color $yellow
    font-weight bold
    margin-left .1rem
  span
    color #aaa
    font-size .08rem
.insurance-chart
  width 100%
  height 1rem
</style>
