<template>
  <m-card title="加装电梯">
    <div class="tabs">
      <n-space>
        <p
          v-for="tab in tabs"
          :key="tab.key"
          class="tab"
          :class="{ on: curTab === tab.key }"
          @click="selectTab(tab.key)"
        >
          {{ tab.name }}
        </p>
      </n-space>
      <n-space>
        <!-- <n-select
          v-model:value="year"
          class="my-select"
          size="small"
          :options="yearOptions"
        /> -->
        <n-select
          v-model:value="area"
          class="my-select"
          size="small"
          :options="areaOptions"
        />
      </n-space>
    </div>
    <div class="content">
      <template v-if="list.length > 0">
        <div v-for="(item, i) in list" :key="i" @click.stop="onClick(item)">
          <span>{{ i + 1 }}</span>
          <span :title="item.name">{{ item.name }}</span>
          <span :title="item.address">{{ item.address }}</span>
          <span class="status">{{ item.status }}</span>
        </div>
      </template>
      <m-empty v-else />
    </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">
const _config = {
  name: 'A013',
  title: '加装电梯',
  row: 2,
  apis: {
    streets: '/service-special-ja-ddd/public/getStreetData',
    list: '/service-special-ja-ddd/public/elevatorInstallationInfos',
    chart: '/service-special-ja-ddd/public/elevator/statistical',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { NSpace, NSelect } from 'naive-ui'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'

const tabs = [
  { name: '开工项目', key: '6' },
  { name: '竣工项目', key: '7' },
]
const curTab = ref('6')
function selectTab(key) {
  curTab.value = key
  fetchList()
}

// const yearOptions = [
//   { label: '2021', value: '2021' },
//   { label: '2020', value: '2020' },
//   { label: '2019', value: '2019' },
// ]
const areaOptions = ref([{ label: '全区', value: 'all' }])
// const year = ref('2021')
const area = ref('all')
watch(() => area.value, fetchList)
ajax
  .get({
    url: _config.apis.streets,
    params: {
      pageSize: 9000,
      hpbName: '静安区',
    },
  })
  .then((res) => {
    const { content = [] } = res?.data || {}
    areaOptions.value = [
      { label: '全区', value: 'all' },
      ...content.map((item) => ({
        label: item.streetName,
        value: item.streetName,
      })),
    ]
  })

const list = ref<any[]>([])

function fetchList() {
  const params: any = {
    state: curTab.value,
    createTime_desc: 'desc',
    pageSize: 9000,
  }
  if (area.value !== 'all') {
    params.streetName = area.value
  }
  ajax
    .get({
      url: _config.apis.list,
      params,
    })
    .then((res) => {
      // 0-可加装 1-较难加装 2-不可加装
      const switchType = (type) => {
        switch (type) {
          case '0':
            return '可加装'
          case '1':
            return '较难加装'
          case '2':
            return '不可加装'
          default:
            return ''
        }
      }
      list.value = (res?.data?.content || []).map((item) => ({
        ...item,
        name: item.stNameFrst,
        address: item.unitAddr,
        status: switchType(item.evaluateType),
      }))
    })
}
fetchList()

function onClick(data) {
  bus.emit('elevatorInfo', data)
}

const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const charData = ref({
  dimensions: [
    { name: 'streetName', displayName: '街道' },
    { name: 'passNum', displayName: '已完成征询' },
    { name: 'shouldPassNum', displayName: '应完成征询' },
    { name: 'startNum', displayName: '已开工' },
    { name: 'shouldStartNum', displayName: '应开工' },
    { name: 'finishNum', displayName: '已完工' },
    { name: 'shouldFinishNum', displayName: '应完工' },
  ],
  source: [],
})
const option = {
  color: [
    '#0076FF',
    '#00BFFF',
    '#9FC444',
    '#FFCE34',
    '#FF9D27',
    '#FF6161',
    '#BABABA',
    '#ff0000',
    '#00ff00',
  ],
  grid: {
    left: '2%',
    right: '1%',
    bottom: '1%',
    top: '20%',
    containLabel: true,
  },
  legend: {
    left: 0,
    right: 0,
    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: '20%',
    },
    {
      type: 'line',
    },
    {
      type: 'bar',
      barWidth: '20%',
    },
    {
      type: 'line',
    },
    {
      type: 'bar',
      barWidth: '20%',
    },
    {
      type: 'line',
    },
  ],
}
ajax.get({ url: _config.apis.chart }).then((res) => {
  const { streetData = [] } = res?.data?.content || {}
  charData.value.source = streetData
})
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'

.tabs
  display flex
  justify-content space-between
  align-items center
  padding 0 .04rem
  box-sizing border-box
  .tab
    cursor pointer
    transition transform .2s ease-in-out
    &:hover
      color $yellow
    &.on
      font-weight bold
      color $yellow
      transform scale(1.1)
.content
  margin-top .1rem
  overflow-y auto
  height 30vh
  margin-bottom .05rem
  >div
    $box()
    display flex
    justify-content space-between
    align-items center
    padding .04rem .06rem
    cursor pointer
    &:hover
      box-shadow none
    &+div
      margin-top .05rem
    >span
      &+span
        margin-left .06rem
      &:nth-of-type(2)
      &:nth-of-type(3)
        flex 1
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
      &.status
        color $yellow
.chart
  width 100%
  height 1.5rem
</style>
<style lang="stylus">
@import  '../../components/MyComponent/main.styl'

.n-select.my-select
  height .2rem
  .n-base-selection
    height inherit
    .n-base-selection-label
      height inherit
      background rgba(70,83,97,.4) !important
      box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
      .n-base-selection-input
        color #fff
        font-size .09rem
      .n-base-icon.n-base-suffix__arrow
        color $yellow
        font-size .09rem
    .n-base-selection__border
    .n-base-selection__state-border
      display none
.n-base-select-menu.n-select-menu
  background rgba(70,83,97,.8) !important
  $blur()
  .n-base-select-option
    background transparent !important
    font-size .09rem
    color #fff
    &.n-base-select-option--selected
      color $yellow
      font-weight bold
    &.n-base-select-option--pending
      color $yellow
</style>
