<template>
  <m-card title="美丽街区" class="beauty-street">
    <m-sub>项目实施情况</m-sub>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
        <m-count class="count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div v-if="showChart" class="chart">
      <a-select v-model:value="year">
        <a-select-option
          v-for="item in summary"
          :key="item.name"
          class="my-select"
          :value="item.name"
          size="small"
          dropdown-class-name="my-drop-down"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <m-bar :dataset="barData" :option="barOption" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import store from '@/store'
export default defineComponent({
  name: 'BeautyStreet',
  setup() {
    const summary = ref([
      { name: '2020年', value: 26 },
      { name: '2019年', value: 24 },
      { name: '2018年', value: 18 },
    ])
    const barData = ref({
      dimensions: [
        { name: 'name', displayName: '项目' },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        { name: '架空线梳理', value: 15 },
        { name: '店招店牌美化', value: 9 },
        { name: '绿化整治', value: 4 },
        { name: '外立面整治', value: 5 },
        { name: '公共设施', value: 3 },
      ],
    })
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const barOption = ref({
      color: [['#2DFDC7', 'rgba(42,253,195,.1)']],
      legend: { show: false },
      yAxis: { show: false },
      grid: {
        width: '105%',
        left: '-5%',
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {
            interval: 0,
            fontSize: fontSize.value * 0.8,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(47,134,238,0.5)',
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: '30%',
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
          },
        },
      ],
    })
    const year = ref('2020年')
    const showChart = computed(() => store.state.curTheme === 'service')
    return {
      summary,
      barData,
      barOption,
      year,
      showChart,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary
  width 100%
  display flex
  justify-content space-between
  >div
    width 30%
    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
    text-align center
    padding .05rem
    .count
      font-size .12rem
    p
      font-size .09rem
      color $font-color
.chart
  width 100%
  height 1rem
  margin-bottom .1rem
  position relative
</style>
<style lang="stylus">
.beauty-street
  .ant-select
    position absolute
    right 0
    top 0
</style>
