<template>
  <m-card title="美丽家园">
    <div class="container">
      <m-sub2>项目实施情况</m-sub2>
      <div class="summary">
        <div v-for="item in summary" :key="item.name">
          <m-count class="count orange-count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <Brief :list="situation" color="#fff" />
      <m-sub2 :addition="{ value: elevAmount, unit: '幢' }">
        电梯加装（排摸）
      </m-sub2>
      <div class="sum-card">
        <div
          v-for="item in elevList"
          :key="item.cmtName"
          :class="{ on: curCmtName === item.cmtName }"
          @click="handleSelect(item.cmtName)"
        >
          <p>{{ item.cmtName }}</p>
          <m-count class="count" :value="item.num" />
        </div>
      </div>
      <m-sub2>马桶改造</m-sub2>
      <Brief :list="toiletSituation" color="#fff" />
      <m-progress
        v-if="show"
        :value="rate"
        :color="['rgba(253,211,116,.15)', '#F7933E']"
        :msg="{
          value: rate,
          unit: '%',
          name: '改造进度',
          color: '#fff',
        }"
      />
    </div>
  </m-card>
  <m-modal
    v-model="showElevModal"
    title="电梯加装"
    width="8vw"
    translate-y="4%"
    offset="-44%"
  >
    <div class="elev-modal">
      <div v-for="item in elevData" :key="item.id">
        <p>{{ item.sectAddr }}</p>
        <p>{{ item.cmtName }} | {{ item.sectName }}</p>
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
import icon31 from '@/assets/images/icon31.png'
import icon32 from '@/assets/images/icon32.png'
import icon33 from '@/assets/images/icon33.png'
import icon34 from '@/assets/images/icon34.png'
import icon35 from '@/assets/images/icon35.png'
import icon36 from '@/assets/images/icon36.png'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'BeautyHome',
  components: { Brief },
  setup() {
    const show = computed(() => store.state.curTheme === 'service')
    const beautyHome = ref<any[]>([])
    const summary = ref<{ name: string; value: any }[]>([])
    ajax.get({ url: api.GET_BEAUTY_HOME_EXECUTE }).then((res) => {
      const data = res?.data?.content || []
      const beautyHomeTypes: any[] = []
      summary.value = data.map((item: any) => {
        beautyHomeTypes.push(...item.statistics)
        return {
          name: item.implementYear + '年',
          value: item.num || 0,
        }
      })
      beautyHome.value = beautyHomeTypes
    })
    const situation = computed<BriefProp[]>(() => [
      {
        name: '小区微更新',
        value:
          beautyHome.value
            .filter((e) => e.projectType == '小区微更新')
            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
        icon: icon31,
      },
      {
        name: '门岗规范化',
        value:
          beautyHome.value
            .filter((e) => e.projectType == '门岗规范化')
            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
        icon: icon32,
      },
      {
        name: '充电桩',
        value:
          beautyHome.value
            .filter((e) => e.projectType == '充电桩')
            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
        icon: icon33,
      },
      {
        name: '雨污混接',
        value:
          beautyHome.value
            .filter((e) => e.projectType == '雨污混接')
            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
        icon: icon34,
      },
    ])
    const elevList = ref<any[]>([])
    const curCmtName = ref<string | null>(null)
    const elevData = ref<any>([])
    const showElevModal = ref(false)
    const elevAmount = ref(0)
    ajax
      .get({
        url: api.GET_ELEV_LIST,
        params: { pageSize: 1000 },
      })
      .then((res) => {
        const result: any = {}
        const data = res?.data?.content || []
        data.forEach((e: any) => {
          if (!result[e.cmtName]) {
            result[e.cmtName] = 0
          }
          result[e.cmtName] += 1
        })

        elevList.value = Object.keys(result).map((key: string) => ({
          cmtName: key,
          num: result[key],
        }))
        elevAmount.value = data.length || 0
      })
    const handleSelect = async (name: string) => {
      curCmtName.value === name
        ? (curCmtName.value = null)
        : (curCmtName.value = name)
      if (!curCmtName.value) return

      const { content } = (
        await ajax.get({
          url: api.GET_ELEV_LIST,
          params: { cmtName: name, pageSize: 1000 },
        })
      ).data

      // TODO 可能要出列表或者地图撒点之类的
      console.log(`美丽街区-加装电梯-${name}区域电梯列表`, content)
      elevData.value = content || []
      showElevModal.value = true
    }
    const toiletSituation = ref<BriefProp[]>([
      { name: '已完成改造', value: 0, icon: icon35 },
      { name: '应改造', value: 0, icon: icon36 },
    ])
    const rate = ref(0)
    onMounted(async () => {
      const { content } = (await ajax.get({ url: api.GET_TOILET })).data
      let totalNum = 0,
        completeNum = 0
      content.forEach((item: any) => {
        totalNum += item.totalNum || 0
        completeNum += item.completeNum || 0
      })
      toiletSituation.value[0].value = completeNum
      toiletSituation.value[1].value = totalNum
      rate.value = Math.round((completeNum / totalNum) * 100)
    })
    return {
      show,
      summary,
      situation,
      elevAmount,
      elevList,
      curCmtName,
      elevData,
      showElevModal,
      handleSelect,
      toiletSituation,
      rate,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.container
  height 100%
  display flex
  flex-direction column
  justify-content space-around
.summary
  width 100%
  display flex
  justify-content space-between
  >div
    display flex
    align-items center
    justify-content space-around
    width 24%
    padding .05rem
    .count
      font-size .14rem
      font-family $font-barlow
      margin-right .03rem
    p
      font-size .09rem
.sum-card
  display flex
  flex-wrap wrap
  justify-content space-between
  >div
    display flex
    justify-content space-between
    align-items center
    width 49%
    $card-bg2()
    padding 0 .1rem
    margin-bottom .05rem
    cursor pointer
    transition all .3s ease
    &:hover
    &.on
      $card-bg2(0.8, 0.4)
    .count
      font-size .12rem
      font-weight bold
.elev-modal
  height 82vh
  overflow-y auto
  >div
    border-bottom .01rem solid rgba(176,216,255,.1)
    padding .05rem 0
    p
      font-size .09rem
      &:first-child
        font-size .11rem
        font-weight bold
</style>
