<template>
  <m-card title="智慧养老">
    <div>
      <m-sub2 :addition="{ value: 14696 }">老人数量</m-sub2>
      <div class="sum">
        <div v-for="item in oldSum" :key="item.name">
          <p class="count"><m-count :value="item.value" />%</p>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div>
      <m-sub2>年龄分布</m-sub2>
      <div class="distribute">
        <div v-if="showChart" 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-sub2>老人分类</m-sub2>
      <div v-if="showChart" class="old-type">
        <div v-for="item in oldType" :key="item.name">
          <div class="circle">
            <Circle
              class="circle-item"
              :value="item.percent"
              :stroke-width="8"
              :color="['#F7933E', 'rgba(253,211,116,.9)']"
              :rate="2.4"
            />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <!-- <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-sub2>养老方式</m-sub2>
      <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-sub2>长护险</m-sub2>
      <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 Circle from '../components/circle.vue'
import store from '@/store'

export default defineComponent({
  name: 'Old',
  components: { Circle },
  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: ['#FE9B5F', '#51EBA4', '#77BFF9', '#8E6FFC', '#E06377', '#B9C3D1'],
      legend: { show: false },
      series: [
        {
          type: 'pie',
          roseType: 'radius',
          radius: ['10%', '90%'],
          center: ['50%', '50%'],
          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
  >div
    display flex
    align-items center
    justify-content space-around
    width 30%
    padding .05rem
    .count
      font-size .14rem
      color $orange
      font-family $font-pang
      margin-right .03rem
.distribute
  width 100%
  height 1rem
  display flex
  .chart
    width 40%
    height 100%
  .legend
    display flex
    flex-wrap wrap
    align-items center
    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
.old-type
  width 100%
  height 1.2rem
  display flex
  flex-wrap wrap
  margin-bottom .3rem
  >div
    width 33.3%
    text-align center
    .circle
      width 100%
      height 80%
      background-image url('@/assets/images/circle-bg.png')
      background-repeat no-repeat
      background-size 50%
      background-position 49% 0%
      .circle-item
        padding-top 0.04rem
.bar
  display flex
  width 100%
  height .06rem
  margin .2rem 0 .14rem
  >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
  align-items center
  .count
    font-size .14rem
    color $orange
    font-family $font-pang
    margin-right .1rem
.insurance-chart
  width 100%
  height 0.9rem
</style>
