<template>
  <m-card title="美丽家园" mode="4">
    <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>
      <div class="detail">
        <Brief :list="situation" align="vertical" color="#fff" />
        <div v-if="curViewType !== 'street'" class="chart">
          <m-bar :dataset="barData" :option="chartOption" />
        </div>
      </div>
      <m-sub2
        click-able
        :addition="{ value: elevAmount || '0', unit: '幢' }"
        @select="handleClick"
      >
        电梯加装（排摸）
      </m-sub2>
      <m-sub2>马桶改造</m-sub2>
      <Brief :list="toiletSituation" color="#fff" />
      <m-progress
        :value="rate || 0"
        :color="['rgba(253,211,116,.15)', '#F7933E']"
        :msg="{
          value: rate || '0',
          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 elevList" :key="item.id">
        <p>{{ item.sectAddr || '无' }}</p>
        <p>{{ item.cmtName }} | {{ item.sectName || '无' }}</p>
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } 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: 'BeautyHomeInStation',
  components: { Brief },
  setup() {
    const curViewType = computed(() => store.state.curView.type)
    const workstationId = computed(() => store.state.curView.id)
    const beautyHome = ref<any[]>([])
    const summary = ref<{ name: string; value: any }[]>([])
    watch(
      () => workstationId.value,
      (id) => {
        if (!id) return
        getData()
      },
      { immediate: true }
    )
    async function getData() {
      ajax
        .get({
          url: api.GET_BEAUTY_HOME_EXECUTE,
          params: { workstationId: workstationId.value },
        })
        .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 { content } = (
        await ajax.get({
          url: api.GET_TOILET,
          params: { workstationId: workstationId.value },
        })
      ).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)
      ajax
        .get({
          url: api.GET_ELEV_LIST,
          params: { workstationId: workstationId.value, 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 = data
          elevAmount.value = data.length || 0
        })
    }
    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 toiletSituation = ref<BriefProp[]>([
      { name: '已完成改造', value: 0, icon: icon35 },
      { name: '应改造', value: 0, icon: icon36 },
    ])
    const rate = ref(0)
    const barData = computed(() => ({
      dimensions: [
        { name: 'name', displayName: '类型' },
        { name: 'value', displayName: '' },
      ],
      source: [...situation.value],
    }))
    const chartOption = {
      color: [['#F7943C', '#FF6C2E']],
      legend: { show: false },
      series: [
        {
          type: 'bar',
          barWidth: '20%',
        },
      ],
      yAxis: {
        minInterval: 1,
      },
      xAxis: {
        axisLabel: {
          formatter: (value: string) => {
            const i = Math.ceil(value.length / 2) || 0
            return value.slice(0, i) + '\n' + value.slice(i)
          },
        },
      },
    }
    const elevList = ref<any[]>([])
    const elevAmount = ref(0)

    const showElevModal = ref(false)
    const dic: any = {
      '01001': ['振兴', '新昌', '江阴', '顺天村'],
      '01002': ['小花园'],
      '01003': ['福海', '定兴'],
    }
    const handleClick = async () => {
      showElevModal.value = true
    }

    return {
      curViewType,
      summary,
      situation,
      toiletSituation,
      rate,
      barData,
      chartOption,
      elevAmount,
      showElevModal,
      elevList,
      handleClick,
    }
  },
})
</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-around
  >div
    display flex
    justify-content space-around
    align-items flex-end
    width 20%
    .count
      font-size .14rem
      font-weight bold
      color #FF6C2E
    p
      font-size .09rem
.sum-card
  display flex
  flex-wrap wrap
  &.work-station
    margin .05rem 0
    >div
      width 20%
  >div
    width 25%
    text-align center
    position relative
    .count
      font-size .12rem
      font-family $font-barlow
    p
      color #ccc
      font-size .09rem
    &:after
      content '|'
      color $secondary-color
      position absolute
      top 50%
      right 0
      transform translateY(-50%)
.detail
  display flex
  .chart
    flex 1
.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>
