<template>
  <div class="wrap">
    <div class="tab_wrap">
      <div class="item_wrap" v-for="(item, index) in tabArr" :key="index" @click="changeTab(index)">
        <span class="alpha" :class="{'active' : activeIndex == index }"> {{ item.name }}</span>
        <span class="numTip" style="opacity: 1 !important;" v-if="item.num > 0">{{item.num}}</span>
      </div>
    </div>
    <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="content_wrap">
          <div class="alarm_wrap" v-for="(item, index) in pageList" :key="index" @click="goDetail(item)">
            <div class="alarm_title">
              <div class="title_left">
                <span>{{item.alarmTypeString}}</span>
                <img class="alarm_level" v-if="item.level == 1" src="@/assets/alarm_one.png" alt="">
                <img class="alarm_level" v-if="item.level == 2" src="@/assets/alarm_two.png" alt="">
                <img class="alarm_level" v-if="item.level == 3" src="@/assets/alarm_three.png" alt="">
              </div>
              <div class="label">{{item.startTime}}</div>
            </div>
            <div class="alarm_content">
              <div class="label flexLabel">车辆名称:</div>
              <div class="content flexContent">{{item.vehicleName}}</div>
            </div>
            <div class="alarm_content">
              <div class="label flexLabel">报警详情:</div>
              <div class="content flexContent">{{item.alarmRemark}}</div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div class="bgEmptyImg" v-show="show" >
      <img src="@/assets/emptyData.png" />
    </div>
  </div>
</template>

<script>
  import {myMixins} from "@/utils/myMixins"
  import { getAlarmList, getAlarmCount } from "@/api/order"
  export default {
    name: "vehicleAlarmList",
    data() {
      return {
        tabArr: [{ name: '未处理',  num: 0 }, { name: '技术处理中', num: 0 }, {name: '处理中', num: 1 }],
        activeIndex: 0,
        pageNum:1,
        pageSize:10,
        total:'',
        pageList: [],
        isLoading: '',
        loading: false,
        finished: false,
      }
    },
    mixins: [ myMixins ],
    computed:{
      show() {
        return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
      },
    },
    async mounted() {
      await this.getList()
    },
    methods: {
      goDetail(item) {
        this.goPage('vehicleAlarmDetail', { code: item.code })
      },
      async getCount() {
        let res = await getAlarmCount();
        this.tabArr[0].num = res?.data?.alarmCount || 0
        this.tabArr[1].num = res?.data?.jxCount || 0
        this.tabArr[2].num = res?.data?.yyCount || 0
      },
      async changeTab(index) {
        this.activeIndex = index
        this.pageNum = 1
        this.pageList = [];
        this.total= 0
        await this.getList()
      },
      async getList() {
        let handleStatus;
        if( this.activeIndex == 2 ) {
          handleStatus = 3
        } else {
          handleStatus = this.activeIndex
        }
        let res = await getAlarmList({
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          handStatus: handleStatus
        })
        this.total = res.total
        if(this.pageNum == 1){// 第一页直接赋值
          this.pageList=res.data
        }else{// 第二页数据拼接
          let preList = this.pageList;
          let arr = res.data;
          this.pageList = preList.concat(arr)
        }
        await this.getCount();
      },
      async onLoad(){
        this.pageNum++;
        await this.getList()
        this.loading = false;
        if (this.pageList.length >= this.total) {
          this.finished = true;
        }
      },
      async onRefresh() {
        this.pageNum=1
        await this.getList()
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
        }, 1000);
      },
    }
  }
</script>
<style scoped lang="scss">
  .wrap{
    width: 100%;
    height: 100%;
    background-color: #F4F5F7 !important;
    box-sizing: border-box;
    overflow-y: auto;
  }
.tab_wrap {
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
  padding-bottom: 10px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #F4F5F7;
  z-index: 100;
  .item_wrap {
    display: flex;
    align-items: center;
  }
  .alpha {
    color: rgba(115, 115, 115, 0.7);
    font-size: 13px;
    line-height: 13px;
  }
  .active {
    font-size: 14px;
    color: #3678FF;
    position: relative;
  }
  .active:after {
    content: '';
    display: block;
    width: 18px;
    height: 3px;
    background: linear-gradient( 270deg, #33A3FF 0%, #176AFE 100%);
    border-radius: 2px;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
  .numTip {
    border-radius: 4px;
    background: #F95B45;
    display: inline-block;
    padding: 2px 4px;
    font-weight: 600;
    font-size: 11px;
    color: #FFFFFF;
    margin-left: 5px;
  }
}
  .content_wrap {
    padding: 50px 12px 0;
    .alarm_wrap {
      margin-top: 10px;
      background: #FFFFFF;
      box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
      border-radius: 6px;
      padding: 13px 13px 17px 18px;
      box-sizing: border-box;
      .alarm_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .label {
        color: rgba(0, 0, 0, 0.5);
      }
      .flexLabel {
        min-width: 50px;
        flex-shrink: 0;
      }
      .flexContent {
        flex: 1;
        word-break: break-all;
      }
      .title_left {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.85);
        }
        .alarm_level {
          width: 32px;
          height: 14px;
          margin-left: 7px;
        }
      }
      .alarm_content {
        display: flex;
        margin-top: 10px;
        .content {
          margin-left: 10px;
          font-size: 13px;
          color: rgba(0, 0, 0, 0.75);
        }
      }
    }
  }

  .bgEmptyImg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90% ;
    background-color: #F4F5F7;
    img{
      width: 100%;
    }
  }
</style>
