<template>
  <m-card title="美丽街区" class="beauty-street">
    <m-sub2>项目实施情况</m-sub2>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div v-if="showChart" class="chart">
      <a-select :value="curYear" @change="handleSelect">
        <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
        v-if="barData.source.length > 0"
        :dataset="barData"
        :option="barOption"
      />
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import store from '@/store'
import { ajax, api } from '@/ajax'
export default defineComponent({
  name: 'BeautyStreet',
  setup() {
    const list = ref<any>({})
    const summary = ref<{ name: string; value: any }[]>([])
    const curYear = ref('')
    const handleSelect = (val: string) => {
      curYear.value = val
      setBarData()
    }
    const barData = ref({
      dimensions: [
        { name: 'name', displayName: '项目' },
        { name: 'value', displayName: '数量' },
      ],
      source: [],
    })
    ajax.get({ url: api.GET_BEAUTY_STREET_EXECUTE }).then((res) => {
      const data = res?.data?.content || []
      const result: any = {}
      summary.value = data.map((item: any) => {
        result[item.implementYear + '年'] = item.statistics || []
        return {
          name: item.implementYear + '年',
          value: item.num || 0,
        }
      })
      curYear.value = summary.value?.[0]?.name || ''
      list.value = result
      setBarData()
    })
    function setBarData() {
      barData.value.source = list.value[curYear.value]?.map((item: any) => ({
        name: item.projectType,
        value: item.typeNum || 0,
      }))
    }

    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const barOption = ref({
      color: [['#F7973D', 'rgba(234,173,0,.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: 'pictorialBar',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
          },
        },
      ],
    })
    const showChart = computed(() => store.state.curTheme === 'service')
    return {
      summary,
      barData,
      barOption,
      curYear,
      showChart,
      handleSelect,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary
  width 100%
  display flex
  justify-content space-between
  >div
    display flex
    align-items center
    justify-content space-around
    width 24%
    padding .05rem
    .count
      font-size .14rem
      font-family $font-barlow
      margin-right .03rem
    p
      font-size .09rem
.chart
  width 100%
  height 1.2rem
  position relative
</style>
<style lang="stylus">
.beauty-street
  .ant-select
    position absolute
    right 0
    top 0
</style>
