<template>
  <m-card title="勤务" mode="4">
    <Brief class="brief" :list="summary" color="#F7933E" />
    <m-sub2>综合管理</m-sub2>
    <div class="details">
      <m-scroll
        v-if="caseList.length > 0"
        :limit="3"
        :length="caseList.length"
        :step="0.88"
        mode="2"
      >
        <div v-for="item in caseList" :key="item.id" class="detail">
          <div class="title">
            <p>{{ item.communityName }}</p>
            <span />
            <p>
              {{
                item.businsessTypeLv1.split('-')[2] || item.troublePhenomenon
              }}
            </p>
          </div>
          <div class="msg">
            <p>{{ item.address }}</p>
            <p>{{ item.acceptTime }}</p>
          </div>
          <m-step :steps="steps" :current="steps.indexOf(item.phase)" />
        </div>
      </m-scroll>
      <m-empty v-else />
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import Brief from '../components/brief.vue'
import store from '@/store'

export default defineComponent({
  name: 'Duty',
  components: { Brief },
  setup() {
    const summary = computed(() => {
      const {
        comprehensiveNum = 0,
        comprehensiveEndNum = 0,
        streetNum = 0,
        streetEndNum = 0,
        communityNum = 0,
        communityEndNum = 0,
      } = store.state.dutySum
      return [
        {
          name: '综合管理',
          value: [comprehensiveEndNum, comprehensiveNum],
        },
        {
          name: '街面管理',
          value: [streetEndNum, streetNum],
        },
        {
          name: '小区管理',
          value: [communityEndNum, communityNum],
        },
      ]
    })
    const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
    const caseList = computed(() => store.state.dutyList)
    watch(
      () => store.state.curView.id,
      (id) => {
        if (!id) return
        store.dispatch('getDutyList', {
          gridId: id,
          pageSize: 100,
        })
      },
      { immediate: true }
    )
    return {
      summary,
      caseList,
      steps,
    }
  },
})
</script>

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

.details
  height 2.64rem
  overflow hidden
  .detail
    display flex
    flex-direction column
    justify-content space-between
    padding .05rem
    height .84rem
    margin-top .04rem
    box-sizing border-box
    background rgba(70,83,97,.4)
    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
    border-radius .03rem
    .title
      display flex
      align-items center
      p
        font-size .12rem
        &:last-child
          font-size .1rem
      span
        flex 1
        display block
        border-bottom .01rem dashed $blue
        margin 0 .1rem
    .msg
      $center()
      justify-content space-between
      font-size .08rem
</style>
