<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">
export default {
  name: 'A018',
  title: '电梯加装',
  row: 1,
}
</script>
<script lang="ts" setup>
import { computed } from 'vue'

const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const charData = {
  dimensions: [
    { name: 'name', displayName: '街道' },
    { name: 'data1', displayName: '已完成加梯征询' },
    { name: 'data2', displayName: '应完成加梯征询' },
    { name: 'data3', displayName: '加梯已完工' },
    { name: 'data4', displayName: '加梯应完工' },
  ],
  source: [
    { name: '江宁路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
    { name: '静安寺街道', data1: 110, data2: 110, data3: 20, data4: 20 },
    { name: '南京西路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
    { name: '曹家渡街道', data1: 130, data2: 140, data3: 60, data4: 60 },
    { name: '石门二路街道', data1: 140, data2: 150, data3: 80, data4: 80 },
    { name: '天目西路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
    { name: '北站街道', data1: 150, data2: 160, data3: 90, data4: 90 },
    { name: '宝山路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
    { name: '芷江西路街道', data1: 110, data2: 110, data3: 20, data4: 20 },
    { name: '共和新路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
    { name: '大宁路街道', data1: 130, data2: 140, data3: 60, data4: 60 },
    { name: '彭浦新村街道', data1: 140, data2: 150, data3: 80, data4: 80 },
    { name: '临汾路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
    { name: '彭浦镇', data1: 150, data2: 160, data3: 90, data4: 90 },
  ],
}
const option = {
  grid: {
    left: '2%',
    right: '1%',
    bottom: '1%',
    top: '20%',
    containLabel: true,
  },
  legend: {
    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 = [
  { name: '多层住宅房屋', value: 2456, unit: '幢' },
  { name: '可加梯门牌数', value: 953, unit: '幢' },
  { name: '完成加梯征询', value: 20, unit: '幢' },
  { name: '加梯完工', value: 16, unit: '幢' },
]
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.sum
  display flex
  justify-content space-between
  >div
    display flex
    align-items center
    font-size .09rem
    color #ccc
    .orange-count
      margin 0 .04rem
    span
      &:first-child
        display inline-block
        min-width .22rem
        max-width .33rem
.chart
  width 100%
  height 1.5rem
</style>
