<template>
  <m-card mode="3" title="联勤联动">
    <div class="tabs">
      <span
        v-for="tab in tabs"
        :key="tab"
        :class="{ on: curTab === tab }"
        @click="curTab = tab"
      >
        {{ tab }}
      </span>
    </div>
    <div class="card-container">
      <m-scroll :length="list.length" :mode="2" :limit="5" :step="1.25">
        <div v-for="(item, i) in list" :key="i" class="card">
          <div class="title">
            {{ item.name }}
            <span />
            <p>{{ item.type }}</p>
          </div>
          <div class="info">
            <p>{{ item.address }}</p>
            <p>{{ item.date }}</p>
          </div>
          <Step :current="item.cur" :steps="steps" />
        </div>
      </m-scroll>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Step from '../components/step.vue'

export default defineComponent({
  name: 'Combine',
  components: { Step },
  setup() {
    const curTab = ref('安全')
    const list = ref([
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 2,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 3,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 4,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 5,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 2,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 3,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 4,
      },
      {
        name: '振兴小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-03-13 13:23:08',
        cur: 5,
      },
    ])
    return {
      steps: ['发现', '立案', '派遣', '处置', '核查', '结案'],
      tabs: ['安全', '干净', '有序'],
      curTab,
      list,
    }
  },
})
</script>

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

.tabs
  border-bottom .01rem solid rgba(255,255,255,.2)
  padding-bottom .02rem
  span
    padding .025rem 0
    color #ccc
    margin 0 .15rem
    cursor pointer
    transition all .3s ease
    border-bottom .03rem solid transparent
    &:hover
      color #fff
    &.on
      color #fff
      font-weight bold
      border-color $secondary-color
.card-container
  overflow hidden
  max-height 5rem
  .card
    background url('@/assets/images/card-bg.png') 100% / 100% 100% no-repeat
    box-sizing border-box
    padding .15rem .1rem 0
    height 1.25rem
    overflow hidden
    display flex
    flex-direction column
    justify-content space-between
    .title
      font-size .12rem
      display flex
      align-items center
      span
        margin 0 .1rem
        flex 1
        display block
        height .01rem
        background $blue
      p
        font-size .1rem
        color $secondary-color
    .info
      display flex
      justify-content space-between
      color $blue
</style>
