<template>
  <m-card title="勤务">
    <Brief class="brief" :list="summary" />
    <Tabs class="tabs" :list="tabs" horizontal />
    <div v-if="showTable" class="details">
      <m-scroll :limit="4" :length="caseList.length" :step="1.1" mode="2">
        <div v-for="(item, i) in caseList" :key="i" class="detail">
          <div class="title">
            <p>{{ item.name }}</p>
            <span />
            <p>{{ item.type }}</p>
          </div>
          <div class="msg">
            <p>{{ item.address }}</p>
            <p>{{ item.date }}</p>
          </div>
          <m-step :steps="steps" :current="item.cur" />
        </div>
      </m-scroll>
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import store from '@/store'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'

export default defineComponent({
  name: 'Duty',
  components: { Brief, Tabs },
  setup() {
    const showTable = computed(() => store.state.curView.type !== 'street')
    const summary = ref<BriefProp[]>([
      {
        name: '综合管理',
        value: [36, 468],
        icon: icon6,
      },
      {
        name: '街面管理',
        value: [64, 261],
        icon: icon7,
      },
      {
        name: '小区管理',
        value: [57, 154],
        icon: icon8,
      },
    ])
    const tabs = ref<TabsProp[]>([
      { name: '综合管理', key: 'all' },
      { name: '街面管理', key: 'street' },
      { name: '小区管理', key: 'community' },
    ])
    const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
    const caseList = ref([
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 5,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 4,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 3,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 2,
      },
    ])
    return {
      showTable,
      summary,
      tabs,
      caseList,
      steps,
    }
  },
})
</script>

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

.details
  height 3.6rem
  overflow hidden
  .detail
    display flex
    flex-direction column
    justify-content space-between
    padding .1rem
    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
    height 1rem
    margin-bottom .1rem
    box-sizing border-box
    .title
      display flex
      align-items center
      p
        font-size .12rem
        &:last-child
          color $edge
          font-size .1rem
      span
        display block
        height .01rem
        background $blue
        flex 1
        margin 0 .1rem
    .msg
      $center()
      justify-content space-between
      color $blue
      font-size .08rem
</style>
