<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"
        @click="onSelectBuilding(item)"
      >
        {{ 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="[
          'stNameFrst:小区名称|addrFrst:小区地址',
          'cspName:物业管理单位|stKindName:小区性质',
          'hoName:房办|streetName:街道',
          'stCnstArea:建筑面积|landArea:占地面积',
        ]"
        :data="info"
      />
      <div class="subtitle">
        门牌详细信息
        <span @click="checkRoom">查看分户</span>
      </div>
      <m-form
        label-width="1.3rem"
        :template="[
          'unitNo:单元号|unitAddr:门牌地址',
          'unitKindName:门牌属性|useType:使用类型',
          'unitTotFloor:总层数|finishDate:竣工日期',
        ]"
        :data="info"
      />
      <div class="subtitle">电梯信息</div>
      <m-form
        label-width="1.3rem"
        :template="['unitTotElevator:电梯数量|status:运行状态']"
        :data="{
          unitTotElevator: info.id == '121105095138846' ? 1 : 2,
          status: '正常运行',
        }"
      />
      <!-- 'q:使用证号|r:注册登记机构',
          's:注册登记人员|t:安装单位名称',
          'u:安装单位代码|v:安装地址',
          'w:安装竣工日期|x:安装负责人',
          'y:安装负责人联系电话|z:电梯编号',
          'a2:设备种类|b2:设计使用年限',
          'c2:设备型号|d2:管理单元(小区楼宇)', -->
    </template>
    <template v-else>
      <div class="subtitle">
        分户信息
        <span @click="showRooms = false">&lt;&lt; 返回</span>
      </div>
      <m-table
        :template="[
          '序号|分户地址*3|分户面积(㎡)*2|房屋类型*2',
          'index|addr|houseArea|houseType',
        ]"
        :data="roomList"
      />
    </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, defineEmit, defineProps, ref, watch } from 'vue'
import type { PropType } from 'vue'
import store from '@/store'
import Brief from '../components/brief.vue'
import { ajax, api } from '@/ajax'
import dayjs from 'dayjs'

const emit = defineEmit(['select'])
const props = defineProps({
  info: {
    type: Object as PropType<{ [key: string]: any }>,
    default: () => ({}),
  },
})

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 = [] } = 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.length > 0 ? data : [{ name: '暂无数据', value: 0 }],
  }
})
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: dayjs().subtract(7, 'days').format('MM-DD'), value: 90 },
    { name: dayjs().subtract(6, 'days').format('MM-DD'), value: 70 },
    { name: dayjs().subtract(5, 'days').format('MM-DD'), value: 80 },
    { name: dayjs().subtract(4, 'days').format('MM-DD'), value: 90 },
    { name: dayjs().subtract(3, 'days').format('MM-DD'), value: 85 },
    { name: dayjs().subtract(2, 'days').format('MM-DD'), value: 80 },
    { name: dayjs().subtract(1, 'days').format('MM-DD'), value: 90 },
  ],
})
const option3 = {
  color: ['#FFCE34'],
  legend: { show: false },
  yAxis: {
    min: 50,
    max: 100,
  },
}
const archiveModal = ref(false)
watch(
  () => props.info,
  (cur) => {
    if (cur && Object.keys(cur).length > 0) {
      archiveModal.value = true
    }
  }
)
const showRooms = ref(false)

function onSelectBuilding(data: any) {
  emit('select', data)
}
const roomList = ref<any>([])
function checkRoom() {
  ajax
    .get({
      url: api.GET_ROOM,
      params: { sectId: props.info?.sectId, pageSize: 9000 },
    })
    .then((res) => {
      roomList.value = (res?.data?.content || []).map(
        (item: any, i: number) => ({
          index: i + 1,
          ...item,
        })
      )
      showRooms.value = true
    })
}
</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
  z-index 999
  >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>
