<template>
  <m-card title="加装电梯">
    <div class="chart">
      <m-bar :dataset="data" :option="option" />
    </div>
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A012',
  title: '加装电梯',
  row: 1,
  apis: {
    list: '/service-special-ja-ddd/public/elevatorInstallationInfos',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ajax } from '@/ajax'
import { ref } from 'vue'
const data = ref({
  dimensions: [
    { name: 'year', displayName: '年' },
    { name: 'value', displayName: '竣工项目' },
  ],
  source: [
    { year: '2017', value: 0 },
    { year: '2018', value: 0 },
    { year: '2019', value: 0 },
    { year: '2020', value: 0 },
    { year: '2021', value: 0 },
  ],
})
ajax
  .get({
    url: _config.apis.list,
    params: {
      state: '7',
      createTime_desc: 'desc',
      pageSize: 9000,
    },
  })
  .then((res) => {
    const result: any = {}
    const { content = [] } = res?.data || {}
    content.forEach((item) => {
      const year = item?.finishInstallationTime?.split('-')?.[0]
      if (!result[year]) {
        result[year] = 1
      } else {
        result[year] += 1
      }
    })
    data.value.source =
      Object.keys(result)
        .map((key) => ({
          year: key,
          value: result[key],
        }))
        ?.filter((item) => item.value > 1) || []
  })

const option = {
  color: [['#8CD5FF', '#1990BE']],
  legend: {
    right: '2%',
  },
  series: [
    {
      type: 'bar',
      barWidth: '30%',
    },
  ],
}
</script>

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