<template>
  <m-card title="电梯加装">
    <div class="sum">
      <div v-for="item in list" :key="item.name" @click="onClick(item.state)">
        <span>{{ item.name }}</span>
        <m-count class="orange-count" :value="item.value" />
        <span>{{ item.unit }}</span>
      </div>
    </div>
    <div class="chart">
      <m-bar
        v-if="charData.source.length > 0"
        :dataset="charData"
        :option="option"
      />
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A018',
  title: '电梯加装',
  row: 1,
  baseUrl: window._base_url,
  apis: {
    main: '/service-special-ja-ddd/public/elevator/statistical',
    elevator: '/service-special-ja-ddd/public/elevatorInstallationInfos',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
import ele1 from '@/assets/images/ele1.png'
import ele2 from '@/assets/images/ele2.png'

ajax.get({ url: _config.apis.main }).then((res) => {
  const { statistical, streetData = [] } = res?.data?.content || {}
  list.value = [
    // { name: '多层住宅房屋', value: +statistical.totalNum || 0, unit: '幢' },
    // { name: '可加梯门牌数', value: +statistical.caddNum || 0, unit: '幢' },
    {
      name: '完成加梯征询',
      value: +statistical.passNum || 0,
      unit: '幢',
      state: '2',
    },
    {
      name: '加梯完工',
      value: +statistical.finishNum || 0,
      unit: '幢',
      state: '7',
    },
  ]
  charData.value.source = streetData
})
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const charData = ref({
  dimensions: [
    { name: 'streetName', displayName: '街道' },
    { name: 'passNum', displayName: '已完成征询' },
    { name: 'shouldPassNum', displayName: '应完成征询' },
    { name: 'startNum', displayName: '已开工' },
    { name: 'shouldStartNum', displayName: '应开工' },
    { name: 'finishNum', displayName: '已完工' },
    { name: 'shouldFinishNum', displayName: '应完工' },
  ],
  source: [],
})
const option = {
  color: [
    '#0076FF',
    '#00BFFF',
    '#9FC444',
    '#FFCE34',
    '#FF9D27',
    '#FF6161',
    '#BABABA',
    '#ff0000',
    '#00ff00',
  ],
  grid: {
    left: '2%',
    right: '1%',
    bottom: '1%',
    top: '20%',
    containLabel: true,
  },
  legend: {
    left: 0,
    right: 0,
    itemWidth: fontSize.value * 0.6,
    itemHeight: fontSize.value * 0.8,
    textStyle: {
      fontSize: fontSize.value * 0.8,
    },
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontSize: fontSize.value * 0.8,
      },
    },
  ],
  series: [
    {
      type: 'bar',
      barWidth: '20%',
    },
    {
      type: 'line',
    },
    {
      type: 'bar',
      barWidth: '20%',
    },
    {
      type: 'line',
    },
    {
      type: 'bar',
      barWidth: '20%',
    },
    {
      type: 'line',
    },
  ],
}
const list = ref([
  // { name: '多层住宅房屋', value: 0, unit: '幢' },
  // { name: '可加梯门牌数', value: 0, unit: '幢' },
  { name: '完成加梯征询', value: 0, unit: '幢', state: '2' },
  { name: '加梯完工', value: 0, unit: '幢', state: '7' },
])

const onClick = (state) => {
  const icon = state === '2' ? ele1 : ele2
  ajax
    .get({
      url: _config.apis.elevator,
      params: { state, createTime_desc: 'desc', pageSize: 9000 },
    })
    .then((res) => {
      const data = res?.data?.content || []
      bus.emit('addPoints', { data, icon })
    })
}
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.sum
  display flex
  justify-content space-around
  >div
    display flex
    align-items center
    color #ccc
    cursor pointer
    .orange-count
      margin 0 .04rem .02rem
    &:hover
      color $yellow
.chart
  width 100%
  height 1.5rem
</style>
