<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="curTab = 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">
      <div v-for="(item, i) in list" :key="i">
        <span>{{ i + 1 }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.address }}</span>
        <span class="status">{{ item.status }}</span>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A013',
  title: '加装电梯',
  row: 2,
}
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import { NSpace, NSelect } from 'naive-ui'
const tabs = [
  { name: '开工项目', key: 'start' },
  { name: '竣工项目', key: 'done' },
]
const curTab = ref('start')
const yearOptions = [
  { label: '2021', value: '2021' },
  { label: '2020', value: '2020' },
  { label: '2019', value: '2019' },
]
const areaOptions = [
  { label: '全区', value: '全区' },
  { label: '1区', value: '1区' },
  { label: '2区', value: '2区' },
]
const year = ref('2021')
const area = ref('全区')
const list = [
  { name: '长安小区', address: '长安路288号', status: '不可加装' },
  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
  { name: '象山小区', address: '临山路186号', status: '可加装' },
  { name: '499弄小区', address: '宝山路519号', status: '不可加装' },
  { name: '长安小区', address: '长安路288号', status: '不可加装' },
  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
  { name: '象山小区', address: '临山路186号', status: '可加装' },
  { name: '499弄小区', address: '宝山路519号', status: '不可加装' },
  { name: '长安小区', address: '长安路288号', status: '不可加装' },
  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
]
</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
  flex 1
  overflow-y auto
  >div
    $box()
    display flex
    justify-content space-between
    align-items center
    padding .04rem .06rem
    &+div
      margin-top .05rem
    >span
      &+span
        margin-left .06rem
      &:nth-of-type(2)
      &:nth-of-type(3)
        flex 1
      &.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>
