<template>
  <div class="old-screen">
    <div>
      <m-sub title="老人数量" :value="14696" unit="人" />
      <div class="rate">
        <div v-for="item in rates" :key="item.name">
          <p>{{item.name}}</p>
          <p><m-count class="count" :value="item.value" />%</p>
        </div>
      </div>
    </div>
    <div>
      <m-sub title="年龄分布" />
      <div class="wrapper">
        <div class="chart" v-if="showChart">
          <m-chart :config="ageConfig" :data="ageData" />
        </div>
        <div class="tips">
          <div>
            <div v-for="(item, i) in ageData.slice(0,2)" :key="item.name">
              <p><span class="dot" :style="{background: ageConfig.colors[i]}"/> {{item.name}}</p>
              <p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
            </div>
          </div>
          <div>
            <div v-for="(item, i) in ageData.slice(2,4)" :key="item.name">
              <p><span class="dot" :style="{background: ageConfig.colors[i + 2]}"/> {{item.name}}</p>
              <p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
            </div>
          </div>
          <div>
            <div v-for="(item, i) in ageData.slice(4)" :key="item.name">
              <p><span class="dot" :style="{background: ageConfig.colors[i + 4]}"/> {{item.name}}</p>
              <p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <m-sub title="老人分类" />
      <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 title="养老方式" />
      <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 title="长护险" />
      <div class="rate" style="width: 52%;">
        <div v-for="item in insurance" :key="item.name">
          <p>{{item.name}}</p>
          <p><m-count class="count" :value="item.value" />人</p>
        </div>
      </div>
      <div class="insurance-chart" v-if="showChart">
        <m-chart :config="insuranceConfig" :data="insuranceData" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OldScreen',
  data() {
    return {
      showChart: false,
      rates: [
        {name: '女性占比', value: 65},
        {name: '男性占比', value: 35},
        {name: '老龄化占比', value: 43},
      ],
      ageConfig: {
        colors: ['#01bffe', '#589d20', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'],
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [0, 30 * Number((screen.height / 800).toFixed(1))], center: ['45%', '50%']},
        ]
      },
      insuranceConfig: {
        colors: ['#e690d1'],
        legend: {hide: true},
        shape: [
          {key: 'value', type: 'line'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      oldType: [
        {name: '孤老', value: 346, percent: 0.90},
        {name: '独居', value: 1304, percent: 3.38},
        {name: '纯老', value: 3007, percent: 7.80},
        {name: '低保', value: 211, percent: 0.55},
        {name: '残疾', value: 2926, percent: 7.59},
        {name: '优抚', value: 95, percent: 0.25},
      ],
      oldMethod: [
        {name: '社区养老', value: 38464, color: '#72c011'},
        {name: '机构养老', value: 1146, color: '#ff9d26'},
        {name: '居家养老', value: 981, color: '#01bffe'},
      ],
      insurance: [
        {name: '申请人数', value: 1113},
        {name: '申请通过人数', value: 812},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
  computed: {
    ageData() {
      return [
        {name: '60-64岁', value: 2939, percent: 20},
        {name: '65-69岁', value: 3086, percent: 21},
        {name: '70-79岁', value: 4261, percent: 29},
        {name: '80-89岁', value: 1910, percent: 13},
        {name: '90-99岁', value: 2204, percent: 15},
        {name: '100岁以上', value: 294, percent: 2},
      ]
    },
    insuranceData() {
      return [
        {name: '0级', value: 50},
        {name: '1级', value: 200},
        {name: '2级', value: 250},
        {name: '3级', value: 300},
        {name: '4级', value: 220},
        {name: '5级', value: 200},
        {name: '6级', value: 250},
      ]
    },
  },
}
</script>

<style lang="stylus" scoped>
.old-screen
  z-index 99
  width 100%
  height calc(100vh - 0.5rem)
  >div
    margin-bottom .05rem
  .rate
    width 80%
    display flex
    justify-content space-between
    >div
      p
        color $fontColor
        &:last-child
          color $color-yellow
          font-size .12rem
  .wrapper
    display flex
    .chart
      width 25%
      height .6rem
    .tips
      display flex
      flex-wrap wrap
      flex 1
      >p
        width 100%
        color $fontColor
        font-size .11rem
        .count
          color $color-yellow
          font-size .13rem
          margin-left .05rem
        .unit
          color #999
      >div
        flex 1
        >div
          margin-bottom .05rem
          >p
            &:last-child
              padding-left 0.16rem
        .dot
          display inline-block
          width .06rem
          height @width
          border-radius 50%
          margin-right .05rem
  .table
    display flex
    border .01rem solid $cardFontColor
    >div
      flex 1
      text-align center
      &+div
        border-left inherit
      p
        font-size .11rem
        background $color-map(.15)
        line-height 1.8
        &+p
          border-top .01rem solid $cardFontColor
        &:nth-of-type(1)
          font-size .1rem
          background $color-map()
        &:nth-of-type(2)
          color $color-yellow
        &:nth-of-type(3)
          color $edgeColor
  .bar
    display flex
    width 100%
    height .1rem
    margin .2rem 0
    >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-chart
    width 100%
    margin-top .05rem
    height 1rem
</style>
