<template>
  <div class="part-left">
    <m-card mode="border2" style="flex: 1">
      <m-card class="card" title="基本情况">
        <Brief :list="situation" color="#F7933E" />
        <div class="wrapper">
          <div class="chart">
            <p>房屋类型分布</p>
            <m-pie :dataset="pieData1" :option="option1" />
          </div>
          <div class="legend">
            <div v-for="(item, i) in pieData1.source" :key="item.name">
              <p>
                <i class="dot" :style="`background:${option1.color[i][0]}`" />
                {{ item.name }}
              </p>
              <p>
                <span><m-count :value="item.value" /> 幢</span>
                <span><m-count :value="item.area" /> ㎡</span>
              </p>
            </div>
          </div>
        </div>
        <div class="wrapper">
          <div class="chart">
            <p>物业管理面积占比</p>
            <m-pie :dataset="pieData2" :option="option2" />
          </div>
          <div class="legend">
            <div v-for="(item, i) in pieData2.source" :key="item.name">
              <p>
                <i class="dot" :style="`background:${option2.color[i][0]}`" />
                {{ item.name }}
                <span><m-count :value="item.value" /> ㎡</span>
              </p>
            </div>
          </div>
        </div>
      </m-card>
      <m-card class="card" title="小区健康度">
        <div class="sum">
          <div v-for="item in scoreSum" :key="item.name">
            <m-count class="orange-count" :value="item.value" :decimal="1" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div>
          <m-sub2 :addition="{ value: 90 }">评分走势</m-sub2>
          <div class="score-chart">
            <m-line :dataset="scoreData" :option="option3" />
          </div>
        </div>
      </m-card>
    </m-card>
    <div class="btns">
      <span>紫华大厦</span>
      <span>文海大楼</span>
      <span>振兴片区</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import icon1 from '@/assets/images/icon31.png'
import icon2 from '@/assets/images/icon37.png'
import icon3 from '@/assets/images/icon38.png'
import { ref } from 'vue'
import Brief from '../components/brief.vue'

const situation = [
  {
    name: '门牌数',
    value: 39,
    icon: icon1,
  },
  {
    name: '管理面积(㎡)',
    value: 1579.15,
    icon: icon2,
  },
  {
    name: '物业企业',
    value: 3,
    icon: icon3,
  },
]
const pieData1 = ref({
  dimensions: [
    { name: 'name', displayName: '类型' },
    { name: 'value', displayName: '幢' },
  ],
  source: [
    { name: '商品房', value: 261, area: 1876 },
    { name: '售后房', value: 237, area: 1532 },
    { name: '公房', value: 218, area: 957 },
  ],
})
const option1 = {
  color: [
    ['#F6C84E', '#EE7837'],
    ['#815FFC', '#7320A0'],
    ['#32C5FF', '#328EFF'],
  ],
  legend: {
    show: false,
  },
  series: [
    {
      type: 'pie',
      radius: ['46%', '76%'],
      center: ['40%', '45%'],
      label: {
        show: false,
      },
    },
  ],
}
const pieData2 = ref({
  dimensions: [
    { name: 'name', displayName: '名称' },
    { name: 'value', displayName: '面积' },
  ],
  source: [
    { name: '物业1', value: 1876 },
    { name: '物业2', value: 1532 },
    { name: '物业3', value: 957 },
  ],
})
const option2 = {
  color: [
    ['#29EFD1', '#0986B2'],
    ['#F6C84E', '#EE7837'],
    ['#32C5FF', '#328EFF'],
  ],
  legend: {
    show: false,
  },
  series: [
    {
      type: 'pie',
      radius: ['0%', '76%'],
      center: ['40%', '45%'],
      label: {
        show: false,
      },
    },
  ],
}

const scoreSum = [
  {
    name: '本市平均分',
    value: 89.5,
  },
  {
    name: '本区平均分',
    value: 88.3,
  },
  {
    name: '本街镇平均分',
    value: 89.6,
  },
]

const scoreData = ref({
  dimensions: [
    { name: 'name', displayName: 'date' },
    { name: 'value', displayName: '分数' },
  ],
  source: [
    { name: '11-01', value: 70 },
    { name: '11-02', value: 60 },
    { name: '11-03', value: 90 },
    { name: '11-04', value: 85 },
    { name: '11-05', value: 80 },
    { name: '11-06', value: 70 },
    { name: '11-07', value: 90 },
  ],
})
const option3 = {
  color: ['#FFCE34'],
  legend: { show: false },
  yAxis: {
    min: 50,
    max: 100,
  },
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.part-left
  width 100%
  height 100%
  display flex
  flex-direction column
.card
  flex 1
  :deep(.card-content)
    display flex
    flex-direction column
    justify-content space-between
    overflow hidden
  &:first-child
    flex 1.4
.btns
  height .4rem
  margin-top .05rem
  display flex
  justify-content space-between
  >span
    $center()
    width 30%
    background url('@/assets/images/btn-bg2.png') 50% 50% / 100% 100% no-repeat
    opacity .8
    color #fff
    font-weight bold
    cursor pointer
    transition opacity .3s ease-in-out
    &:hover
      opacity 1
.wrapper
  $box()
  padding .05rem .1rem
  display flex
  width 100%
  margin .04rem 0
  .chart
    width 50%
    height 1rem
  .legend
    flex 1
    display flex
    flex-direction column
    justify-content space-around
    .dot
      display inline-block
      width .06rem
      height @width
      border-radius 50%
      margin-right .05rem
    p
      span
        margin-left .1rem
      &:nth-of-type(2)
        padding-left .03rem
.sum
  display flex
  justify-content space-around
  >div
    text-align center
    color #ccc
.score-chart
  width 100%
  height 1.2rem
</style>
