<template>
  <div class="task">
    <nut-sticky top="46">
      <div class="daily_tab">
        <div :class="['tab_item', active === 1 ? 'active' : '']" @click="cut(1)">人员行为识别</div>
        <div :class="['tab_item', active === 2 ? 'active' : '']" @click="cut(2)">车辆识别</div>
        <div :class="['tab_item', active === 3 ? 'active' : '']" @click="cut(3)">外来生物识别</div>
        <div :class="['tab_item', active === 4 ? 'active' : '']" @click="cut(4)">设备镜头脏污</div>
      </div>
    </nut-sticky>
    <div class="content" v-infinite-scroll="init" :infinite-scroll-disabled="finished"
         infinite-scroll-watch-disabled="finished">
      <template v-if="list.length > 0">
        <template v-if="active === 1">
          <div class="content_flex" v-for="(item, i) in list" :key="i">
            <div class="content_img">
              <img v-if="item.carImgUrl" :src="item.carImgUrl" alt="">
            </div>
            <div class="content_or">
              <div class="flex">
                <div class="flex_30">姓名</div>
                <div class="flex_70 text-right-blue">{{item.name}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">人员行为</div>
                <div class="flex_70 text-right-blue">{{item.personType}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检位置</div>
                <div class="flex_70 text-right-blue">{{item.devName}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检时间</div>
                <div class="flex_70 text-right-blue">{{item.capTime}}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="active === 2">
          <div class="content_flex" v-for="(item, i) in list" :key="i">
            <div class="content_img">
              <img  v-if="item.carImgUrl" :src="item.carImgUrl" alt="">
            </div>
            <div class="content_or">
              <div class="flex">
                <div class="flex_30">车牌号</div>
                <div class="flex_70 text-right-blue">{{item.carNum}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">识别结果</div>
                <div class="flex_70 text-right-blue">{{item.capResult}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检位置</div>
                <div class="flex_70 text-right-blue">{{item.devName}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检时间</div>
                <div class="flex_70 text-right-blue">{{item.capTime}}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="active === 3">
          <div class="content_flex" v-for="(item, i) in list" :key="i">
            <div class="content_img">
              <img  v-if="item.imgUrl" :src="item.imgUrl" alt="">
            </div>
            <div class="content_or">
              <div class="flex">
                <div class="flex_30">巡检位置</div>
                <div class="flex_70 text-right-blue">{{item.devName}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检时间</div>
                <div class="flex_70 text-right-blue">{{item.capTime}}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="active === 4">
          <div class="content_flex" v-for="(item, i) in list" :key="i">
            <div class="content_img">
              <img v-if="item.imgUrl" :src="item.imgUrl" alt="">
            </div>
            <div class="content_or">
              <div class="flex">
                <div class="flex_30">摄像头名称</div>
                <div class="flex_70 text-right-blue">{{item.devName}}</div>
              </div>
              <div class="flex">
                <div class="flex_30">巡检时间</div>
                <div class="flex_70 text-right-blue">{{item.capTime}}</div>
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <nut-empty description="无数据"></nut-empty>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "Ai"
}
</script>
<script setup>
  import { ref } from 'vue';
  import { getAiPersonList, getAiSpeciesList, getAiCarList, getAiDirtyList } from "../../utils/api";

  const active = ref(1)
  const current = ref(1)
  const size = ref(10)
  const finished = ref(false)
  const list = ref([])

  const init = (bool) => {
    if(active.value === 1) {
      initPerson(bool)
    } else if(active.value === 2) {
      initCar(bool)
    } else if(active.value === 3) {
      initSpecies(bool)
    } else if(active.value === 4) {
      initDirty(bool)
    }
  }

  const initPerson = (bool) => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value
      }
      getAiPersonList(params).then(res => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records)
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }

  }

  const initCar = (bool) => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value
      }
      getAiCarList(params).then(res => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records)
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }
  }

  const initSpecies = (bool) => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value
      }
      getAiSpeciesList(params).then(res => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records)
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }
  }

  const initDirty = () => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value
      }
      getAiDirtyList(params).then(res => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records)
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }
  }


  const cut = (val) => {
    if(active.value === val) {
      return;
    } else {
      active.value = val;
      current.value = 1;
      finished.value = false
      init(true)
    }
  }
</script>

<style scoped>
  .task {
    width: 100%;
    height: 100%;
  }
  .daily_tab {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
  }
  .tab_item {
    flex: 1;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    box-sizing: border-box;
    border-right: 1px solid #E0E0E0;
    font-size: 12px;
  }
  .tab_item:last-child {
    border: 0;
  }
  .active {
    background-color: #0091FF;
    color: #fff;
  }
  .content {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
    box-sizing: border-box;
    padding: 16px;
  }
  .content_flex {
    width: 100%;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .content_img {
    width: 80px;
    height: 80px;
    background: #CCCCCC;
    border-radius: 10px;
    margin: 0 25px 0 10px;
    overflow: hidden;
  }
  .content_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content_or {
    flex: 1;
    font-size: 12px;
  }
  .flex {
    display: flex;
  }
  .flex_30 {
    width: 30%;
  }
  .flex_70 {
    width: 70%;
  }
  .text-right-blue {
    color: #497ff2;
    text-align: right;
    padding-right: 10px;
  }
</style>
