<template>
  <m-card title="智慧养老">
    <div>
      <m-sub2 :addition="{ value: oldData?.oldNum || 0 }">老人数量</m-sub2>
      <div class="sum">
        <div v-for="item in oldSum" :key="item.name">
          <p class="count orange-count">
            <m-count :value="item.value" :decimal="1" />%
          </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 || 0).toFixed(1) }}%
              <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 orange-count" :value="oldData?.applyNum || 0" />
          <span>申请人数</span>
        </div>
        <div>
          <m-count class="count orange-count" :value="oldData?.passNum || 0" />
          <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 { ajax, api } from '@/ajax'
import store from '@/store'

export default defineComponent({
  name: 'Old',
  components: { Circle },
  setup() {
    const oldData = ref<any>(null)
    const oldSum = ref([
      { name: '女性占比', value: 0 },
      { name: '男性占比', value: 0 },
      { name: '老龄化占比', value: 0 },
    ])
    const pieData = ref({
      dimensions: [
        { name: 'name', displayName: '年龄分布' },
        { name: 'value', displayName: '人数' },
      ],
      source: [
        { name: '90-99岁', value: 0 },
        { name: '100以上', value: 0 },
        { name: '80-89岁', value: 0 },
        { name: '70-79岁', value: 0 },
        { name: '65-69岁', value: 0 },
        { name: '60-64岁', value: 0 },
      ],
    })
    const total = computed(() => {
      return 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: 0, percent: 0 },
      { name: '独居', value: 0, percent: 0 },
      { name: '纯老', value: 0, percent: 0 },
      { name: '低保', value: 0, percent: 0 },
      { name: '残疾', value: 0, percent: 0 },
      { name: '优抚', value: 0, percent: 0 },
    ])
    const oldMethod = ref([
      { name: '社区养老', value: 0, color: '#72c011' },
      { name: '机构养老', value: 0, color: '#ff9d26' },
      { name: '居家养老', value: 0, color: '#01bffe' },
    ])
    const insuranceData = ref({
      dimensions: [
        { name: 'name', displayName: '等级' },
        { name: 'value', displayName: '人数' },
      ],
      source: [
        { name: '0级', value: 0 },
        { name: '1级', value: 0 },
        { name: '2级', value: 0 },
        { name: '3级', value: 0 },
        { name: '4级', value: 0 },
        { name: '5级', value: 0 },
        { name: '6级', value: 0 },
      ],
    })
    const insuranceOption = ref({
      color: ['#01bffe'],
      legend: { show: false },
      yAxis: {
        minInterval: 1,
      },
    })
    const showChart = computed(() => store.state.curTheme === 'service')
    ajax.get({ url: api.GET_WISDOM_OLD }).then((res) => {
      const data = res?.data?.content || {}
      oldData.value = data
      oldSum.value = [
        { name: '女性占比', value: data?.oldWomanNum || 0 },
        { name: '男性占比', value: data?.oldManNum || 0 },
        { name: '老龄化占比', value: data?.oldRate || 0 },
      ]
      pieData.value.source = [
        { name: '90-99岁', value: data?.num90_99 || 0 },
        { name: '100以上', value: data?.num100 || 0 },
        { name: '80-89岁', value: data?.num80_89 || 0 },
        { name: '70-79岁', value: data?.num70_79 || 0 },
        { name: '65-69岁', value: data?.num65_69 || 0 },
        { name: '60-64岁', value: data?.num60_64 || 0 },
      ]
      const keys = ['gulao', 'duju', 'chunlao', 'dibao', 'canji', 'youfu']
      const total =
        keys.map((key) => data[key] || 0).reduce((acc, cur) => acc + cur, 0) ||
        1
      oldType.value = [
        {
          name: '孤老',
          value: data?.gulao || 0,
          percent: +(((data?.gulao || 0) / total) * 100).toFixed(1),
        },
        {
          name: '独居',
          value: data?.duju || 0,
          percent: +(((data?.duju || 0) / total) * 100).toFixed(1),
        },
        {
          name: '纯老',
          value: data?.chunlao || 0,
          percent: +(((data?.chunlao || 0) / total) * 100).toFixed(1),
        },
        {
          name: '低保',
          value: data?.dibao || 0,
          percent: +(((data?.dibao || 0) / total) * 100).toFixed(1),
        },
        {
          name: '残疾',
          value: data?.canji || 0,
          percent: +(((data?.canji || 0) / total) * 100).toFixed(1),
        },
        {
          name: '优抚',
          value: data?.youfu || 0,
          percent: +(((data?.youfu || 0) / total) * 100).toFixed(1),
        },
      ]
      oldMethod.value = [
        {
          name: '社区养老',
          value: data?.communityEndowment || 0,
          color: '#72c011',
        },
        {
          name: '机构养老',
          value: data?.organizationEndowment || 0,
          color: '#ff9d26',
        },
        {
          name: '居家养老',
          value: data?.homeEndowment || 0,
          color: '#01bffe',
        },
      ]
      insuranceData.value.source = [
        { name: '0级', value: data?.level0 || 0 },
        { name: '1级', value: data?.level1 || 0 },
        { name: '2级', value: data?.level2 || 0 },
        { name: '3级', value: data?.level3 || 0 },
        { name: '4级', value: data?.level4 || 0 },
        { name: '5级', value: data?.level5 || 0 },
        { name: '6级', value: data?.level6 || 0 },
      ]
    })
    return {
      oldData,
      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
      font-family $font-barlow
      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
    font-family $font-barlow
    margin-right .1rem
.insurance-chart
  width 100%
  height 0.8rem
</style>
