
<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-search
            v-model="value"
            placeholder="搜索"
            @search="onSearch" 
            >
        </van-search>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
             <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
        <div class="card" v-for="(item,index) in list"  :key="index" v-show="item.status=='wait'"  @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" color="#FAED55" 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>
         <tab-bar :index="1"></tab-bar>
    </div>
</template>
<script>
import LHeader from "@/components/header";
import tabBar from "@/components/TabBar";
import { getFun,postFun ,postFunTwo,getFunTwo} from '@/service/table'
import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
export default {
    name: 'warning',
    components: {
        tabBar,
        LHeader
    },
    data() {
        return {
             text:'预警提醒',//顶部文本
            total:0,//总条数
            page:1,//页码
            psize:5,//页数量
            loading: false,
            finished: false,
            refreshing:false,
            value:'',//搜索内容
            userId:'',//登录用户ID
            list:[
                // {
                //     warningName:'有限空间作业预警',
                //     warningLevel:1,
                //     ishandle:false,
                //     content:'2021年8月23日 12:34:32&nbsp; 有限空间作业 0294758585发生 安全帽佩戴 一级预警 请及时处理。'
                // },
                // {
                //     warningName:'动力作业预警',
                //     warningLevel:2,
                //     ishandle:false,
                //     content:'2021年8月23日 12:34:32&nbsp; 动火作业 0294758585发生 防护面罩佩戴 二级预警 请及时处理。'
                // },
                // {
                //     warningName:'有限空间作业预警',
                //     warningLevel:3,
                //     ishandle:false,
                //     content:'2021年8月23日 12:34:32&nbsp; 有限空间作业 0294758585发生 安全帽佩戴 一级预警 请及时处理。'
                // }
            ]
           
        }
    },
    mounted() {
        if(getUserInfo())
        this.userId=getUserInfo().userId
        console.log(getUserInfo())
        // this.init()
    },
    methods: {
        //预警列表
        init(){
            // this.list=[];
            var obj={
                page:this.page,
                psize:this.psize,
                desc:this.value
            }
            getFunTwo('app/push/list/'+this.userId,obj).then((Response2)=>{
                if(Response2.code==200){
                    Response2.data.list.forEach((item)=>{
                        this.list.push(item)
                    })
                    this.page=Response2.data.pageNum
                    this.total=Response2.data.totalCount
                    //防止分页超出操作
                    if(!(this.page*5-this.total>=0)){
                         this.page++;
                    }
                    if (this.list.length>=this.total) {
                        this.finished = true;
                    }
                    this.loading = false
                }
            })
        },
        //搜索查询
        onSearch(){
            this.init()
        },
        //点击卡片跳转
        warningClick(item){
            sessionStorage.setItem('warningId',item.id)
            this.$router.push('/warningForm')
        },
        //下拉页面刷新
        onRefresh() {
            // 清空列表数据
            this.page=1
            this.finished = false;
            this.loading=true
            this.onLoad();
        },
        //上拉页面加载数据
        onLoad() {
            if (this.refreshing) {
                this.list=[]
                this.refreshing = false;
            }
            setTimeout(() => {
                this.init()
            }, 1000);
        },
    }
}
</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;
    }
    /* 卡片系列 */
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.26667rem 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>