<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"
        @click="onSelect(item.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"
            :class="{ red: item?.groupRentRed == '1' }"
          >
            <div class="left">
              <p>
                {{ transName(item.category) }}
                <span v-if="item?.groupRentRed == '1'" class="warn-tip">
                  涉嫌违规租赁
                </span>
              </p>
              <p>发现时间：{{ item.acceptTime }}</p>
              <p>
                处置部门：<span class="department">
                  {{ item.disposalOrg || '暂无' }}
                </span>
              </p>
            </div>
            <div class="middle">
              <div
                :style="`background-image: url(${
                  item.alarmPic
                    ? 'data:image/png;base64,' + item.alarmPic
                    : noneImg
                })`"
                @click="viewImage(item.alarmPic)"
              >
                <span>发现</span>
              </div>
              <div
                :style="`background-image: url(${
                  item.donePic
                    ? 'data:image/png;base64,' + item.donePic
                    : noneImg
                })`"
                @click="viewImage(item.donePic)"
              >
                <span>处置</span>
              </div>
            </div>
            <div class="right">
              <div
                v-for="(step, index) in steps"
                :key="step.key"
                :class="{
                  on: step.key == item.disposalStatus,
                  unreach:
                    steps.findIndex((e) => e.key == item.disposalStatus) <
                    index,
                }"
              >
                <span class="step" />
                <p>{{ step.name }}</p>
              </div>
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
  </m-card>
  <m-modal
    v-model="showImgageModal"
    title="图片预览"
    width="auto"
    offset="-50%"
  >
    <img
      style="max-height: 70vh; width: auto"
      :src="`data:image/png;base64,${curImgSrc}`"
    />
  </m-modal>
  <m-modal
    v-model="discoverModal"
    width="40%"
    offset="60%"
    :title="modalTitle"
    :mask-closable="false"
  >
    <div>
      <m-table
        :template="[
          '序号|预警地址*3|发现时间*4|处置状态*2|处置部门*2|处置时间*4',
          'index|buildingAddr|acceptTime|disposalStatus>transType|disposalOrg|disposalTime',
        ]"
        :data="discoverList"
        :formatter="{ transType }"
      />
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { ajax, api } from '@/ajax'
import c1 from '@/assets/images/c1.png'
import c2 from '@/assets/images/c2.png'
import noneImg from '@/assets/images/none.png'
import store from '@/store'
const sum = ref([
  {
    name: '今日预警数量',
    value: 0,
  },
  {
    name: '历史预警数量',
    value: 0,
  },
  {
    name: '预警类型',
    value: 0,
  },
])
const curView = computed(() => store.state.curView)
const sub = ref([
  { name: '视频识别', value: 0 },
  { name: '物联感知', value: 0 },
  { name: '数据关联分析', value: 0 },
  { name: '人为发现', value: 0 },
])
const list = ref([
  { name: '电瓶车入梯', value: 0, key: '1' },
  { name: '垃圾暴露', value: 0, key: '// Todo' },
  { name: '占用消防通道', value: 0, key: '0' },
  { name: '垃圾满溢', value: 0, key: '2' },
  { name: '高抛隐患', value: 0, key: '4' },
  { name: '群租', value: 0, key: '3' },
])
onMounted(() => {
  ajax
    .get({
      url: api.GET_DISCOVER_COUNT,
      params: {
        bigscreenCommunityName: curView.value.name,
      },
    })
    .then((res) => {
      const { year = 0, today = 0 } = res?.data?.content || {}
      sum.value = [
        {
          name: '今日预警数量',
          value: today,
        },
        {
          name: '历史预警数量',
          value: year,
        },
        {
          name: '预警类型',
          value: 0,
        },
      ]
    })
  ajax
    .get({
      url: api.GET_DISCOVER_SUM,
      params: {
        bigscreenCommunityName: curView.value.name,
      },
    })
    .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 },
      ]
    })
  ajax
    .get({
      url: api.GET_DISCOVER_STATISTICS,
      params: {
        bigscreenCommunityName: curView.value.name,
      },
    })
    .then((res) => {
      const {
        fire = 0, //消防通道
        batteryCar = 0, //电瓶车入梯
        overflowingGarbage = 0, //垃圾满溢
        groupRent = 0, //群租
        highFall = 0, //高抛
      } = res?.data?.content || {}
      list.value = [
        { name: '电瓶车入梯', value: batteryCar, key: '1' },
        { name: '垃圾暴露', value: 0, key: '// Todo' },
        { name: '占用消防通道', value: fire, key: '0' },
        {
          name: '垃圾满溢',
          value: overflowingGarbage,
          key: '2',
        },
        { name: '高抛隐患', value: highFall, key: '4' },
        { name: '群租', value: groupRent, key: '3' },
      ]
    })
})
const events = ref<any>([
  {
    name: '占用消防通道',
    time: '2020-03-13 13:23:08',
    department: '小区物业',
    discover: c1,
    process: c2,
    cur: 2,
  },
])
ajax
  .get({
    url: api.GET_DISCOVER_LIST,
    params: { pageSize: 1000, bigscreenCommunityName: curView.value.name },
  })
  .then((res) => {
    events.value = res?.data?.content || []
  })
const steps = [
  { key: 'pending', name: '待处置' },
  { key: 'over', name: '已完结' },
]
const transName = (type: string) => {
  switch (type) {
    case 'fire':
      return '消防通道占用'
    case 'batteryCar':
      return '电瓶车入梯'
    case 'overflowingGarbage':
      return '垃圾满溢'
    case 'groupRent':
      return '违规租赁'
    case 'highFall':
      return '高抛隐患'
    default:
      return '无'
  }
}

const curImgSrc = ref('')
const showImgageModal = ref(false)
const viewImage = (src: string) => {
  if (!src) return
  curImgSrc.value = src
  showImgageModal.value = true
}

const discoverList = ref<any[]>([])
const modalTitle = ref('')
const discoverModal = ref(false)
function onSelect(key: string, name: string) {
  modalTitle.value = name
  ajax
    .get({
      url: api.GET_DISCOVER_LIST,
      params: {
        category: key,
        pageSize: 9000,
      },
    })
    .then((res) => {
      discoverList.value = (res?.data?.content || [])?.map(
        (item: any, i: number) => {
          item.index = i + 1
          return item
        }
      )
      discoverModal.value = true
    })
}
function transType(type: string) {
  switch (type) {
    case 'pending':
      return '待处置'
    case 'over':
      return '已完结'
    default:
      return '无'
  }
}
</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
    cursor pointer
    &:hover
      box-shadow none
      .dot
        background $orange
.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
    &.red
      border .01rem solid red
      box-shadow 0 0 .04rem 0 $red
    .left
      p
        font-size .08rem
        white-space nowrap
        &:first-child
          font-size .12rem
          color $orange
          display flex
          align-items center
          >.warn-tip
            font-size .09rem
            font-weight bold
            color red
            border .01rem solid red
            border-radius .02rem
            padding 0 .02rem
            margin-left .04rem
        .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
        cursor pointer
        &+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 #999
          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>
