
<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-search
            v-model="value"
            placeholder="搜索"
            @search="onSearch" 
            >
        </van-search>
        <van-tabs v-model="active" type="card" title-inactive-color="#2980F7" color="#2980F7"  @change="tabChange">
            <van-tab  v-for="(item1,index1) in tabList"  :key="index1" :title="item1.title">
                <van-pull-refresh v-model="item1.refreshing" @refresh="onRefresh">
             <van-list
                v-model="item1.loading"
                :finished="item1.finished"
                finished-text="没有更多了"
                @load="onLoad()"
            >
                <div class="card"  v-for="(item,index) in item1.list"  :key="index"  @click="warningClick(item)">
                    <div class="card-header">
                        <van-row>
                            <van-col span="10">
                                <span class="card-header-left">{{item.orderType+'预警'}}</span>
                            </van-col>
                            <van-col span="6" class="card-header-medium">
                                <van-tag size="medium" type="danger" v-if="item.gradeType=='一级预警'">一级预警</van-tag>
                                <van-tag size="medium" type="warning" v-else-if="item.gradeType=='二级预警'">二级预警</van-tag>
                                <van-tag size="medium" type="success" v-else-if="item.gradeType=='三级预警'">三级预警</van-tag>
                            </van-col>
                            <van-col span="8" class="card-header-right">
                                <van-tag size="medium" type="success" plain v-if="item.status=='error'">已处置</van-tag>
                                <van-tag size="medium" type="success" plain v-if="item.status=='finish'">已处置</van-tag>
                                <van-tag size="medium" type="danger" plain v-else-if="item.status=='wait'">未处置</van-tag>
                            </van-col>
                        </van-row>
                    </div>
                    <div class="card-body">
                        {{util.timestampToTime(item.alarmTime,'DT1',true)}}&nbsp;&nbsp;
                        {{ item.gradeName}}&nbsp;&nbsp; 
                        {{item.orderNo}}&nbsp;&nbsp; 
                        {{item.gradeType+'请及时处理'}}
                    </div>
                </div>
                </van-list>
        </van-pull-refresh>
            </van-tab>
        </van-tabs>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>
<script>
import tabBar from "@/components/TabBar";
import LHeader from "@/components/header";
import { getFun,postFun,postFunTwo,getFunTwo } from '@/service/table'
import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
export default {
    name: 'warning',
    components: {
        tabBar,
        LHeader
    },
    data() {
        return {
            total:0,//总条数
            page:1,//页码
            psize:5,//页数量
            loading: false,
            finished: false,
            refreshing:false,
            type:'',//处置类型
            userId:'',//用户登录ID
            tabList:[
                {
                    title:'全部',
                    type:"",
                    loading: false,
                    finished: false,
                    refreshing:false,
                    list:[]
                    // ishandle:'all',
                },
                {
                    title:'已处置',
                    type:"finish",
                    loading: false,
                    finished: false,
                    refreshing:false,
                    list:[]
                    // ishandle:true,
                },
                {
                    title:'未处置',
                    type:"wait",
                    loading: false,
                    finished: false,
                    refreshing:false,
                    list:[]
                    // ishandle:false,
                }
            ],//切换标题数组
            active:0,//默认切换状态
            value:'',//搜索框值
            text:'预警记录',//顶部文本
        }
    },
    mounted() {
        if(getUserInfo())
        this.userId=getUserInfo().userId
        // this.init()
    },
    methods: {
        init(){
            var obj={
                page:this.page,
                psize:this.psize,
                type:this.type,
                desc:this.value
            }
            getFunTwo('app/push/list/'+this.userId,obj).then((Response2)=>{
                if(Response2.code==200){
                    Response2.data.list.forEach((item)=>{
                        this.tabList.forEach((i)=>{
                            if(i.type==this.type){
                                i.list.push(item)
                            }
                        })
                    })
                    this.page=Response2.data.pageNum
                    this.total=Response2.data.totalCount
                    //防止分页超出操作
                    if(!(this.page*5-this.total>=0)){
                         this.page++;
                    }
                    //遍历哪个类型的分页加载函数
                    this.tabList.forEach((i)=>{
                        if(i.type==this.type){
                            if (i.list.length>=this.total) {
                                i.finished = true;
                                console.log(this.tabList)
                            }
                            i.loading = false;
                        }
                    })
                }
            })
        },
        //切换改变请求查询
        tabChange(title,name){
            this.page=1
            this.tabList.forEach((i)=>{
                i.list=[]
            })
            this.type=""
            if(name=='全部'){
                this.type=""
            }else if(name=='已处置'){
                this.type="finish"
            }else if(name=='未处置'){
                this.type="wait"
            }
            this.tabList.forEach((i)=>{
                if(i.type==this.type){
                    i.loading=true
                    i.finished=false
                }
            })
            this.onLoad();
        },
        //搜索查询
        onSearch(){
            this.tabList.forEach((i)=>{
                i.list=[]
            })
            this.page=1
            this.init()
        },
        //点击卡片跳转
        warningClick(item){
            sessionStorage.setItem('warningNoteId',item.id)
            if(item.status=='wait'){
                this.$router.push('/warningNoteEdit')
            }else if(item.status=='error'||item.status=='finish'){
                this.$router.push('/warningNoteDetail')
            }
            
        },
        //下拉页面刷新
        onRefresh() {
            // 清空列表数据
            this.page=1
            this.tabList.forEach((i)=>{
                if(i.type==this.type){
                    i.loading=true
                    i.finished=false
                }
            })
            this.onLoad();
        },
        //上拉页面加载数据
        onLoad() {
            this.tabList.forEach((i)=>{
                if(i.type==this.type){
                    if (i.refreshing) {
                        i.list=[]
                        i.refreshing = false;
                    }
                }
            })
            this.init()
        },
    }
}
</script>
<style lang="less" scoped>
    /* 搜索框 */
   .van-search{
        margin:0.26667rem auto 0;
        width: 95%;
        border-radius: 4%;
        border-radius: 5px;
        padding: 5px 12px;
    }
    .van-search__content {
      background-color: #ffffff;
    }
    /* tab栏 */
    .van-tabs{
        margin-top: 0.4rem;
    }
    /deep/ .van-tab--active{
        border-radius: 5px !important;
    }
    /deep/ .van-tabs__nav--card{
        border: none !important;
        border-radius: 5px !important
    }
    /* 卡片系列 */
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
        line-height: 0.7rem;
    }
    .card-header-left{
        font-weight: bolder;
        font-size: 0.45rem;
    }
    .card-header-right{
        text-align: right;
    }
    .card-header-medium{
        text-align: left;
    }
</style>