<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>
  </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',
  },
}
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:
          curTab.value === '7'
            ? item.finishInstallationTime?.split(' ')?.[0] || '暂无'
            : item.startInstallationTime?.split(' ')?.[0] || '暂无',
      }))
    })
}
fetchList()

function onClick(data) {
  bus.emit('elevatorInfo', data)
}
</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
  flex 1
  margin-top .1rem
  overflow-y auto
  max-height 60vh
  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
</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>
