<template>
  <m-card title="美丽家园" mode="4">
    <div class="container">
      <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 class="detail">
        <Brief :list="situation" align="vertical" color="#fff" />
        <div v-if="curViewType !== 'street'" class="chart">
          <m-bar :dataset="barData" :option="chartOption" />
        </div>
      </div>
      <m-sub2 :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub2>
      <!-- <div v-if="curViewType === 'street'" class="sum-card">
        <div v-for="item in elevList" :key="item.name">
          <m-count class="count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div> -->
      <m-sub2>马桶改造</m-sub2>
      <Brief :list="toiletSituation" color="#fff" />
      <m-progress
        :value="80"
        :color="['rgba(253,211,116,.15)', '#F7933E']"
        :msg="{ value: 80, unit: '%', name: '改造进度', color: '#fff' }"
      />
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
import icon31 from '@/assets/images/icon31.png'
import icon32 from '@/assets/images/icon32.png'
import icon33 from '@/assets/images/icon33.png'
import icon34 from '@/assets/images/icon34.png'
import icon35 from '@/assets/images/icon35.png'
import icon36 from '@/assets/images/icon36.png'

export default defineComponent({
  name: 'BeautyHomeInStation',
  components: { Brief },
  setup() {
    const curViewType = computed(() => store.state.curView.type)
    const summary = ref([
      { name: '2020年', value: 26 },
      { name: '2019年', value: 24 },
      { name: '2018年', value: 18 },
    ])
    const situation = ref<BriefProp[]>([
      { name: '小区微更新', value: 26, icon: icon31 },
      { name: '门岗规范化', value: 12, icon: icon32 },
      { name: '充电桩', value: 64, icon: icon33 },
      { name: '雨污混接', value: 18, icon: icon34 },
    ])
    const elevList = ref([
      { name: '振兴', value: 9 },
      { name: '福海', value: 5 },
      { name: '江阴', value: 7 },
      { name: '定兴', value: 1 },
      { name: '新昌', value: 5 },
      { name: '小花园', value: 5 },
      { name: '顺天村', value: 1 },
    ])
    const toiletSituation = ref<BriefProp[]>([
      { name: '已完成改造', value: 26, icon: icon35 },
      { name: '应改造', value: 64, icon: icon36 },
    ])
    const workStationProjects = ref([
      { name: '架空线梳理', value: 16 },
      { name: '店招店牌美化', value: 26 },
      { name: '绿化整治', value: 15 },
      { name: '外立面整治', value: 8 },
      { name: '公共设置', value: 8 },
    ])
    const barData = {
      dimensions: [
        { name: 'name', displayName: '类型' },
        { name: 'value', displayName: '' },
      ],
      source: [
        { name: '架空线梳理', value: 16 },
        { name: '店招店牌美化', value: 26 },
        { name: '绿化整治', value: 15 },
        { name: '外立面整治', value: 8 },
        { name: '公共设置', value: 8 },
      ],
    }
    const chartOption = {
      color: [['#F7943C', '#FF6C2E']],
      legend: { show: false },
      series: [
        {
          type: 'bar',
          barWidth: '20%',
        },
      ],
      xAxis: {
        axisLabel: {
          formatter: (value: string) => {
            const i = Math.ceil(value.length / 2) || 0
            return value.slice(0, i) + '\n' + value.slice(i)
          },
        },
      },
    }
    return {
      curViewType,
      summary,
      situation,
      elevList,
      toiletSituation,
      workStationProjects,
      barData,
      chartOption,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.container
  height 100%
  display flex
  flex-direction column
  justify-content space-around
.summary
  width 100%
  display flex
  justify-content space-around
  >div
    display flex
    justify-content space-around
    align-items flex-end
    width 20%
    .count
      font-size .14rem
      font-weight bold
      color #FF6C2E
    p
      font-size .09rem
.sum-card
  display flex
  flex-wrap wrap
  &.work-station
    margin .05rem 0
    >div
      width 20%
  >div
    width 25%
    text-align center
    position relative
    .count
      font-size .12rem
      font-family $font-barlow
    p
      color #ccc
      font-size .09rem
    &:after
      content '|'
      color $secondary-color
      position absolute
      top 50%
      right 0
      transform translateY(-50%)
.detail
  display flex
  .chart
    flex 1
</style>
