<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.unit" /> 幢</span>
                <span><m-count :value="item.value" /> ㎡</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 v-for="item in buildingList" :key="item.sectId">
        {{ item.sectName.replace('黄浦区', '').replace('南京街道', '') }}
      </span>
    </div>
  </div>
  <m-modal
    v-model="archiveModal"
    width="33%"
    offset="-50%"
    title="小区档案"
    :mask-closable="false"
  >
    <template v-if="!showRooms">
      <div class="subtitle">小区信息</div>
      <m-form
        label-width="1.3rem"
        :template="[
          'name:小区名称|address:小区地址',
          'c:物业管理单位|d:区',
          'e:房办|f:街道',
          'g:建筑面积|h:占地面积',
          'i:小区性质',
        ]"
        :data="{}"
      />
      <div class="subtitle">
        门牌详细信息
        <span @click="showRooms = true">查看分户</span>
      </div>
      <m-form
        label-width="1.3rem"
        :template="[
          'i:单元号|j:门牌地址',
          'k:门牌属性|l:使用类型',
          'm:总层数|n:竣工日期',
        ]"
        :data="{}"
      />
      <div class="subtitle">电梯信息</div>
      <m-form
        label-width="1.3rem"
        :template="[
          'o:电梯数量|p:电梯注册代码',
          'q:使用证号|r:注册登记机构',
          's:注册登记人员|t:安装单位名称',
          'u:安装单位代码|v:安装地址',
          'w:安装竣工日期|x:安装负责人',
          'y:安装负责人联系电话|z:电梯编号',
          'a2:设备种类|b2:设计使用年限',
          'c2:设备型号|d2:管理单元(小区楼宇)',
        ]"
        :data="{}"
      />
    </template>
    <template v-else>
      <div class="subtitle">
        分户信息
        <span @click="showRooms = false">&lt;&lt; 返回</span>
      </div>
      <m-table
        :template="[
          '序号|分户地址*3|分户面积(㎡)*2|房屋性质*2|房屋类型*2|电梯标志*2',
          'a|b|c|d|e|f',
        ]"
        :data="[]"
      />
    </template>
  </m-modal>
</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 { computed, ref } from 'vue'
import store from '@/store'
import Brief from '../components/brief.vue'

const buildingList = computed(() => store.state.communityInfo.communityList)
const communityInfo = computed(() => store.state.communityInfo)
const situation = computed(() => {
  const { totCmp = 0, totArea = 0, totUnits = 0 } = communityInfo.value
  return [
    {
      name: '门牌数',
      value: totUnits,
      icon: icon1,
    },
    {
      name: '管理面积(㎡)',
      value: totArea,
      icon: icon2,
    },
    {
      name: '物业企业',
      value: totCmp,
      icon: icon3,
    },
  ]
})
const pieData1 = computed(() => {
  const { stKindList = [] } = communityInfo.value
  const data1 = stKindList.find((e: any) => e.stKindName?.includes('商品房'))
  const data2 = stKindList.find((e: any) => e.stKindName?.includes('售后房'))
  const data3 = stKindList.find((e: any) => e.stKindName?.includes('直管公房'))
  return {
    dimensions: [
      { name: 'name', displayName: '类型' },
      { name: 'value', displayName: '面积' },
    ],
    source: [
      {
        name: '商品房',
        unit: data1?.totUnits || 0,
        value: +data1?.stCnstArea.toFixed(2) || 0,
      },
      {
        name: '售后房',
        unit: data2?.totUnits || 0,
        value: +data2?.stCnstArea.toFixed(2) || 0,
      },
      {
        name: '直管公房',
        unit: data3?.totUnits || 0,
        value: +data3?.stCnstArea.toFixed(2) || 0,
      },
    ],
  }
})
const option1 = {
  color: [
    ['#F6C84E', '#EE7837'],
    ['#815FFC', '#7320A0'],
    ['#32C5FF', '#328EFF'],
  ],
  legend: {
    show: false,
  },
  tooltip: {
    formatter: (params: any) => {
      return `${params.marker}${params.name}：${params.value?.value || 0}㎡`
    },
  },
  series: [
    {
      type: 'pie',
      radius: ['46%', '76%'],
      center: ['40%', '45%'],
      label: {
        show: false,
      },
    },
  ],
}
const pieData2 = computed(() => {
  const { cspList = [{ cspName: '-', stCnstArea: 0 }] } = communityInfo.value
  const data = cspList.map((e: any) => ({
    name: e?.cspName || '无',
    value: +(e?.stCnstArea?.toFixed(2) || 0),
  }))
  return {
    dimensions: [
      { name: 'name', displayName: '名称' },
      { name: 'value', displayName: '面积' },
    ],
    source: data,
  }
})
const option2 = {
  color: [
    ['#29EFD1', '#0986B2'],
    ['#F6C84E', '#EE7837'],
    ['#32C5FF', '#328EFF'],
  ],
  legend: {
    show: false,
  },
  tooltip: {
    formatter: (params: any) => {
      return `${params.marker}${params.name}<br/><span style="float:right;">${
        params.value?.value || 0
      }㎡</span>`
    },
  },
  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,
  },
}
const archiveModal = ref(false)
const showRooms = ref(false)
</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
.subtitle
  font-weight bold
  font-size .12rem
  line-height .12rem
  margin .06rem 0
  >span
    color $primary-color
    cursor pointer
    font-size .09rem
    font-weight normal
    float right
    margin-right .05rem
    &:hover
      color #fff
      text-decoration underline
  &:before
    content ''
    display inline-block
    width .04rem
    height .1rem
    background gold
    margin-right .06rem
</style>
