<template>
  <m-card title="加装电梯">
    <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: 'A020',
  title: '加装电梯',
  row: 1,
  apis: {
    chart: '/service-special-ja-ddd/public/elevator/statistical',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ajax } from '@/ajax'
import { ref, computed } from 'vue'

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',
    },
  ],
}
ajax.get({ url: _config.apis.chart }).then((res) => {
  const { streetData = [] } = res?.data?.content || {}
  charData.value.source = streetData
})
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.chart
  width 100%
  height 1.5rem
</style>
