
<template>
    <div>
        <van-search
            v-model="value"
            placeholder="搜索"
            @search="onSearch" 
            >
            <template #right-icon>
                <van-icon name="bars" @click="show=true"/>
            </template>
        </van-search>
        <van-popup v-model="show" position="bottom">
            <van-picker show-toolbar title="等级-类型" :columns="columns" @confirm="commit" @cancel="close"/>
        </van-popup>
        <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(index,item)">
            <div class="row"><span class="row-title">预警编号</span>：<span>{{ item.orderNo }}</span></div>
            <div class="row"><span class="row-title">预警类型</span>：<span>{{ item.orderType+'预警' }}</span></div>
            <div class="row"><span class="row-title">预警等级</span>：
                <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-tag size="medium" color="green" v-else>{{item.gradeType}}</van-tag>
            </div>
            <div class="row"><span class="row-title">关联人员</span>：{{item.userName}}</div>
            <div class="row"><span class="row-title">预警时间</span>：<span>{{util.timestampToTime(item.alarmTime,'DT1',true)}}</span></div>
            <!-- <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-tag size="medium" color="green" v-else>{{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> -->
            <van-overlay :show="showIndex == index">
            <div class="wrapper" @click.stop="closeOverlay">
              <van-button round color="#4ABD85" @click="onClick(item)">
                处理
              </van-button>
              <van-button round color="#EB5D49" @click="onClickTwo(item)">
                误报退回
              </van-button>
              <van-button round type="info" @click="onClickThree(item)">
                一键处置
              </van-button>
            </div>
          </van-overlay>
        </div>
        </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { getFun,postFun ,postFunTwo,getFunTwo,putFunTwo} from '@/service/table'
import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
export default {
    name: 'warning',
    components: {
        
    },
    data() {
        return {
            total:0,//总条数
            page:1,//页码
            psize:5,//页数量
            loading: false,
            showIndex: null, // 是否显示遮罩层
            finished: false,
            refreshing:false,
            level:'',
            grade:'',
            show:false,//是否显示筛选下拉框
            columns: [
                // 第一列
                {
                values: ['全部','一级', '二级', '三级'],
                defaultIndex: 2,
                },
                // 第二列
                {
                values: ['全部','反光衣报警', '安全帽报警','三角架报警','反光服报警','吸烟报警','呼吸器报警','护目镜报警','明火报警','有毒有害气体检v测',
                '灭火器报警','烟雾报警','焊接气瓶报警','监护人脱岗报警','监火人脱岗报警','锥桶报警','防护手套报警','防护面罩报警','风机报警',],
                defaultIndex: 1,
                },
            ],
            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
        // this.init()
    },
    methods: {
        //预警列表
        commitfunction(obj){
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                putFunTwo('app/push',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success({
                        message:'提交成功',
                        duration: 2000
                    })
                    this.$router.push('/message-center')
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('提交失败,请稍后再试')
                })
            }).catch(()=>{

            })
        },
        init(){
            // this.list=[];
            var obj={
                page:this.page,
                psize:this.psize,
                desc:this.value,
                level:this.level,
                grade:this.grade
            }
            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.list=[]
            this.onRefresh()
        },
        //点击卡片跳转
        warningClick(index,item){
            if (this.showIndex != null) {
                this.showIndex = null;
                return;
            }
            this.showIndex = index;
            // sessionStorage.setItem('warningId',item.id)
            // this.$router.push('/warningForm')
        },
        closeOverlay() {
            this.showIndex = null;
        },
        onClick(item) {
            this.showIndex = null;
            sessionStorage.setItem('warningId',item.id)
            this.$router.push('/warningForm')
        },
        onClickTwo(item){
            var obj={
                id:item.id,
                finishUserId:this.userId,
                finishContent:'已处置',
                finishPictures:[],
                status:'error'
            }
            this.commitfunction(obj)
        },
        onClickThree(item){
            var obj={
                id:item.id,
                finishUserId:this.userId,
                finishContent:'已处置',
                finishPictures:[],
                status:'finish'
            }
            this.commitfunction(obj)
        },
        //下拉页面刷新
        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);
        },
        //筛选提交
        commit(value){
            this.level=""
            this.grade=""
            if(value[0]!='全部'){
                this.level=value[0]
            }
            if(value[1]!='全部'){
                this.grade=value[1]
            }
            this.show=false
            this.onSearch()
        },
        //关闭筛选
        close(){
            this.show=false
        }
    }
}
</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%;
        position: relative;
        .van-overlay {
        position: absolute;
        .wrapper {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 100%;
          .van-button__text {
            width: initial;
          }
        }
      }
    }
    .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>