<template>
  <m-card title="电梯加装">
    <div class="sum">
      <div v-for="item in list" :key="item.name">
        <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',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ajax } from '@/ajax'

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: '幢' },
    { name: '加梯完工', value: +statistical.finishNum || 0, unit: '幢' },
  ]
  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: 'finishNum', displayName: '加梯已完工' },
    { name: 'shouldFinishNum', displayName: '加梯应完工' },
  ],
  source: [],
})
const option = {
  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: '30%',
    },
    {
      type: 'line',
    },
    {
      type: 'bar',
      barWidth: '30%',
    },
    {
      type: 'line',
    },
  ],
}
const list = ref([
  { name: '多层住宅房屋', value: 0, unit: '幢' },
  { name: '可加梯门牌数', value: 0, unit: '幢' },
  { name: '完成加梯征询', value: 0, unit: '幢' },
  { name: '加梯完工', value: 0, unit: '幢' },
])
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.sum
  display flex
  justify-content space-between
  flex-wrap wrap
  >div
    width 50%
    display flex
    align-items center
    font-size .09rem
    color #ccc
    .orange-count
      margin 0 .04rem .02rem
.chart
  width 100%
  height 1.5rem
</style>
