<template>
  <m-card class="card" title="预警数量统计">
    <div class="sum">
      <div class="left">
        <div v-for="item in sum" :key="item.name">
          <m-count class="orange-count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="right">
        <div v-for="item in sub" :key="item.name">
          <i class="dot" />
          <p>{{ item.name }}</p>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="item in list" :key="item.name">
        <p>
          <i class="dot" />
          {{ item.name }}
        </p>
        <m-count :value="item.value" />
      </div>
    </div>
    <div class="wrapper">
      <m-sub2>快处闭环</m-sub2>
      <div class="events">
        <m-scroll :length="events.length" :limit="5" mode="2" :step="0.8">
          <div v-for="(item, i) in events" :key="i" class="event-item">
            <div class="left">
              <p>{{ item.name }}</p>
              <p>发现时间：{{ item.time }}</p>
              <p>
                处置部门：<span class="department">{{ item.department }}</span>
              </p>
            </div>
            <div class="middle">
              <div :style="`background-image: url(${item.discover})`">
                <span>发现</span>
              </div>
              <div :style="`background-image: url(${item.process})`">
                <span>处置</span>
              </div>
            </div>
            <div class="right">
              <div
                v-for="(step, index) in steps"
                :key="step"
                :class="{ on: index == item.cur, unreach: +item.cur < index }"
              >
                <span class="step" />
                <p>{{ step }}</p>
              </div>
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ajax, api } from '@/ajax'
import c1 from '@/assets/images/c1.png'
import c2 from '@/assets/images/c2.png'
const sum = ref([
  {
    name: '今日预警数量',
    value: 0,
  },
  {
    name: '历史预警数量',
    value: 0,
  },
  {
    name: '预警类型',
    value: 0,
  },
])
ajax
  .get({
    url: api.GET_DISCOVER_COUNT,
  })
  .then((res) => {
    const { year = 0, today = 0 } = res?.data?.content || {}
    sum.value = [
      {
        name: '今日预警数量',
        value: today,
      },
      {
        name: '历史预警数量',
        value: year,
      },
      {
        name: '预警类型',
        value: 0,
      },
    ]
  })
const sub = ref([
  { name: '视频识别', value: 0 },
  { name: '物联感知', value: 0 },
  { name: '数据关联分析', value: 0 },
  { name: '人为发现', value: 0 },
])
ajax
  .get({
    url: api.GET_DISCOVER_SUM,
  })
  .then((res) => {
    const {
      person = 0, //人为发现
      iot = 0, //物联感知
      video = 0, //视频识别
      analyze = 0, //数据分析
    } = res?.data?.content || {}
    sub.value = [
      { name: '视频识别', value: video },
      { name: '物联感知', value: iot },
      { name: '数据关联分析', value: analyze },
      { name: '人为发现', value: person },
    ]
  })
const list = ref([
  { name: '电瓶车入梯', value: 0 },
  { name: '垃圾暴露', value: 0 },
  { name: '占用消防通道', value: 0 },
  { name: '垃圾满溢', value: 0 },
  { name: '高叠隐患', value: 0 },
  // { name: '易积水预警', value: 0 },
  { name: '群租', value: 0 },
])
ajax
  .get({
    url: api.GET_DISCOVER_STATISTICS,
  })
  .then((res) => {
    const {
      fire = 0, //消防通道
      batteryCar = 0, //电瓶车入梯
      overflowingGarbage = 0, //垃圾满溢
      groupRent = 0, //群租
    } = res?.data?.content || {}
    list.value = [
      { name: '电瓶车入梯', value: batteryCar },
      { name: '垃圾暴露', value: 0 },
      { name: '占用消防通道', value: fire },
      { name: '垃圾满溢', value: overflowingGarbage },
      { name: '高叠隐患', value: 0 },
      { name: '群租', value: groupRent },
    ]
  })
const events = [
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
]
const steps = ['发现', '接收', '处置', '完成']
</script>

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

.card
  :deep(.card-content)
    display flex
    flex-direction column
    justify-content space-between
    overflow hidden
i.dot
  display inline-block
  width .04rem
  height @width
  border-radius 50%
  background #77BFF9
  margin-right .06rem
.sum
  display flex
  align-items center
  padding-right .06rem
  .left
    color #ccc
    flex 2.6
    display flex
    justify-content space-around
  .right
    flex 1
    >div
      display flex
      align-items center
      p
        flex 1
.list
  display flex
  flex-wrap wrap
  margin-bottom .04rem
  >div
    display flex
    align-items center
    justify-content space-between
    padding .04rem .08rem
    width 48%
    $box()
    margin .04rem 0 0 .04rem
.wrapper
  flex 1
  display flex
  flex-direction column
  overflow hidden
.events
  height 3.7rem
  overflow hidden
  .event-item
    height .74rem
    margin-bottom .06rem
    $box()
    padding .04rem .08rem
    display flex
    justify-content space-between
    align-items center
    .left
      p
        font-size .08rem
        white-space nowrap
        &:first-child
          font-size .12rem
          color $orange
        .department
          display inline-block
          background linear-gradient(to right, #61E4FF, #3289FF)
          border-radius .04rem
          padding .01rem .05rem
          text-align center
          color #000
          font-size .08rem
    .middle
      display flex
      >div
        width .5rem
        height @width
        background-size cover
        background-position center center
        background-repeat no-repeat
        border .02rem solid
        position relative
        &+div
          margin-left .05rem
        &:first-child
          border-color $orange
          span
            background $orange
        &:last-child
          border-color $blue
          span
            background $blue
        span
          display inline-block
          position absolute
          left 0
          top 0
          padding 0 .02rem
    .right
      position relative
      &:before
        content ''
        width .02rem
        height 80%
        position absolute
        background #32C5FF
        z-index 1
        top 0
        bottom 0
        margin auto 0
        transform translateX(150%)
      >div
        display flex
        align-items center
        .step
          display inline-block
          width .04rem
          height @width
          border-radius 50%
          background #32C5FF
          border .02rem solid #fff
          box-sizing content-box
          margin-right .05rem
          z-index 2
        p
          color #ccc
          font-size .08rem
        &.on
          .step
            background #fff
            border-color $blue
          p
            color $primary-color
        &.unreach
          .step
            background #fff
            border-color #fff
          p
            color #999
</style>
