
<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
            <van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
                <div class="card" v-for="(item,index) in noticeQuestionList"  :key="index">
                    <van-overlay @click.stop="close(item)" :show="item.show"  >
                        <van-button round type="primary" @click.stop="detail(index,item)">详情</van-button>
                    </van-overlay>
                    <van-checkbox :name="item.id" :disabled="finish=='true'?true:item.checkSubmitId?true:false">问题{{index+1}}</van-checkbox>
                    <div @click="cardClick(item)">
                        <div>负责人姓名：{{item.realName}}</div>
                        <!-- <div>问题名称：{{item.title}}</div> -->
                        <div>问题位置：{{item.address}}</div>
                        <div>问题内容：{{item.context}}</div>
                        <div>发现时间：{{item.checkTime}}</div>
                    </div>
                </div>
            </van-checkbox-group>
            <!-- <div class="page-footer">
                <van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick" :disabled="finish=='true'?true:false">全选</van-checkbox>
            </div> -->
            <van-field
                readonly
                clickable
                name="calendar"
                :value="value"
                label="整改完成时间"
                placeholder="请选择时间"
                @click="calendarOpen"
                :disabled="true"
                />
            <van-popup v-model="showCalendar" position="bottom">
                <van-datetime-picker v-model="currentDate" type="datehour" @confirm="onConfirm" @cancel="showCalendar=false" title="选择年月日小时"/>
            </van-popup> 
            <div class="sign"><span>检查负责人签字确认：</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false"><p v-show="istext" @click="sign" >电子签字</p><img  class="sign-img" v-show="isImg" :src="resultImg" alt=""></van-tag></div>
            <div class="sign"><span>现场负责人签字确认：</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false"><p v-show="istextl" @click="signl" >电子签字</p><img  class="sign-img" v-show="isImgl" :src="resultImgl" alt=""></van-tag></div>
            <div class="page-footer-button">
                <van-button round type="info" size="large" @click="commit" :disabled="finish=='true'?true:isFinish==true?true:false">确认</van-button>
            </div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'confirmNote',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            currentDate: new Date(),//当前默认时间
            istextl:true,//检查组签字是否显示文字
            dialogShow:false,//弹框是否显示
            istext:true,//是否显示文字
            isImg:false,//是否显示图片
            resultImg:'',//电子签名图片
            resultImgl:'',//检查组电子签名图片
            isImgl:false,//是否显示检查组图片
            noticeQuestionList:[],//整改通知问题记录列表
            active: 0,//tab选中状态
            checkedAll:false,//全选状态
            result: [],//勾选数组
            noticeTableList:[],//上报状态列表
            text:'整改确认问题记录',
            value: '',//日期值
            id:'',//整改通知id
            showCalendar: false,//日期弹出层状态
            showCalendar2: false,//人员匹配弹出层状态
            finish:false,//检查状态
            isFinish:false,//提交状态
            projectId:'',//判断请求树形菜单还是下拉框
        }
    },
    watch:{
        
    },
    activated(){
        //判断是否由确认列表跳转进来，清空表单获取新数据
        if(this.$route.params.name=='checkedConfirm'){
            this.istext=true//是否显示文字
            this.isImg=false//是否显示图片
            this.istextl=true//检查组是否显示文字
            this.isImgl=false//检查组是否显示图片
            this.value=''//日期值
            this.resultImg=''//电子签名图片
            this.resultImgl=''//检查组电子签名图片
            this.id=this.$route.params.id//请求问题记录列表的唯一id
            this.noticeTableList=[];//问题记录列表数组
            if(sessionStorage.getItem('ConfirmFinish')){
                this.finish=sessionStorage.getItem('ConfirmFinish')
            }
            this.problem()
        }
        //判断是否从电子签名跳转过来-获取图片是否显示的布尔值
        if(this.$route.query.name=='callbackSign'){
            if(this.$route.query.confirmImg==true||this.$route.query.confirmImg=='true'){
                this.istext=false
                this.isImg=true
                //从session中获取签名生成的图片1
                if(sessionStorage.getItem('confirmImg')){
                    this.resultImg=sessionStorage.getItem('confirmImg')
                }
            }
        }
        //判断是否从检查组的电子签名跳转过来-获取图片是否显示的布尔值
        if(this.$route.query.name=='callbackSignl'){
            if(this.$route.query.confirmImgl==true||this.$route.query.confirmImgl=='true'){
                this.istextl=false
                this.isImgl=true
                //从session中获取签名生成的图片1
                if(sessionStorage.getItem('confirmImgl')){
                    this.resultImgl=sessionStorage.getItem('confirmImgl')
                }
            }
        }
    },
    mounted() {
        //刷新页面时候，从session中获取确认id
        if(sessionStorage.getItem('ConfirmFinish')){
            this.finish=sessionStorage.getItem('ConfirmFinish')
        }
        if(sessionStorage.getItem('id')){
            this.id=sessionStorage.getItem('id')
        }
        this.problem()
    },
    methods: {
        /* 问题记录列表 */
        problem(){
            this.noticeQuestionList=[]
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('check/confirm/trouble/list',{planId:this.id}).then((Response)=>{
                /* ---新增---- */
                this.isFinish=Response.data.isFinish
                this.noticeQuestionList=Response.data.list
                //初始化每个div的弹框，遮罩层显示状态
                this.noticeQuestionList.forEach((item)=>{
                    item.show=false
                })
                this.$toast.clear()
                 //日期数据回显
                if(Response.data.finishTime){
                    this.value=Response.data.finishTime
                }
                //电子签名数据回显
                if(Response.data.leaderSign){
                    this.resultImg=Response.data.leaderSign
                }
                //获取选中状态数组
                this.noticeQuestionList.forEach((item)=>{
                    if(item.checkSubmitId){
                        this.result.push(parseInt(item.checkSubmitId))
                    }
                })
                //判断是否有签名
                if(this.resultImg){
                    this.istext=false
                    this.isImg=true
                }
                /* ----详情---- */
                if(this.isFinish){
                    //检查组电子签名数据回显
                    if(Response.data.managerSign){
                        this.resultImgl=Response.data.managerSign
                    }
                    //判断是否有签名
                    if(this.resultImgl){
                        this.istextl=false
                        this.isImgl=true
                    }
                }
            })
        },
        /* 全选点击事件---只让全选框的触发全不选事件 */
        // checkedAllClick(){
        //     if(this.checkedAll){
        //         this.$refs.checkboxGroup.toggleAll(true);
        //     }else{
        //         /* 全不选只可以控制未禁用状态下的复选框 */
        //         for(var key of this.$refs.checkboxGroup.$children){
        //             if(!key.$el._prevClass.includes('disabled')){
        //                 key.toggle(false)
        //             }
        //         }
        //     }
        // },
        /* 复选框改变事件 */
        checkedEvent(){
            if(this.result.length==this.noticeQuestionList.length){
                this.checkedAll=true
            }else if(this.result.length<this.noticeQuestionList.length){
                this.checkedAll=false
            }
        },
        
        /* 全选框改变事件 */
        // checkedAllEvent(){
        //     if(this.checkedAll){
        //         this.$refs.checkboxGroup.toggleAll(true);
        //     }
        // },
        /* 时间戳转换 */
        onConfirm(date) {
            this.value = this.util.timestampToTime(date,'DT1',true)
            this.showCalendar = false;
        },
        //日期输入框点击事件
        calendarOpen(){
            // if(this.finish=='false'){
            //     this.showCalendar = true
            // } 
        },
        //标签点击事件防止标签切换首次进入不执行复选框监听事件
        tabClick(idx){
            if(idx==1){
                if(this.result.length==this.noticeQuestionList.length){
                    this.checkedAll=true
                }else if(this.result.length<this.noticeQuestionList.length){
                    this.checkedAll=false
                }
            }
        },
        //电子签名1
        sign(){
            //点击电子签名，保存用户选择的日期和复选框回显值
            if(this.finish=='false'){
                //每次签名检测需要签名的模块是哪个
                if(sessionStorage.getItem('IsconfirmImg')){
                    sessionStorage.removeItem('IsconfirmImg')
                }else{
                    sessionStorage.setItem('IsconfirmImg',true)
                }
                this.$router.push({name:'sign',query:{name:'confirmNote',confirmImg:true}})
            }
        },
        //电子签名2
        signl(){
            //点击电子签名，保存用户选择的日期和复选框回显值
            if(this.finish=='false'){
                //每次签名检测需要签名的模块是哪个
                if(sessionStorage.getItem('IsconfirmImgl')){
                    sessionStorage.removeItem('IsconfirmImgl')
                }else{
                    sessionStorage.setItem('IsconfirmImgl',true)
                }
                this.$router.push({name:'sign',query:{name:'confirmNotel',confirmImgl:true}})
            }
        },
        //提交问题记录
        commit(){
            if(!this.resultImgl){this.$toast.fail("提交失败,请检查组签字！");return;}
            var checkedList=[]
            /* 禁用状态下的（已选过）问题不进行提交，进行清空处理 */
            this.result.forEach((it)=>{
                this.noticeQuestionList.forEach((item)=>{
                    if(it==item.id&&!item.checkSubmitId){
                        checkedList.push(it)
                    }
                })
            })
            var obj={
                planId:this.id,
                leaderSign:this.resultImg,
                managerSign:this.resultImgl
            }
            this.$dialog.confirm({
                title: '提示',
                message: '确认签收整改通知单？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/confirm/trouble',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success('确认成功')
                    this.problem()
                    this.$router.push('/checked-confirm')
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('提交失败,请稍后再试')
                })
            })
        },
        //卡片单击事件
        cardClick(item){
            item.show=true
            this.$forceUpdate()//强制刷新
        },
        //关闭遮罩层事件
        close(item){
            item.show=false
            this.$forceUpdate()//强制刷新
        },
        //列表详情
        detail(index,item){
            item.show=false
            this.$forceUpdate()//强制刷新
            this.$router.push({name:'confirmDetail',query:{id:item.id}})
        },
    }
}
</script>
<style lang="less" scoped>
    /* 问题记录卡片样式 */
    .card{
        position: relative;
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
        .van-overlay {
            display:flex;
            justify-content: space-evenly;
            align-items: center;
            .van-button{
                width: 20%;
                margin-top: 0;
            }
            text-align: center;
            position: absolute;
        }
    }
    .card div,.card-status{
        font-size: 0.4rem;
        line-height: 0.8rem;
    }
    /* 状态列表卡片样式 */
    .card-status{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .card-left{
        vertical-align: middle;
    }
    .card-middle div:nth-child(1){
        font-size: 0.5rem;
        font-weight: bolder;
        width: 5rem;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .card-middle div:nth-child(2){
        font-size: 0.3rem;
        font-weight: bolder;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .card-right{
        font-size: 0.3rem;
        text-align: right;
        font-weight: bolder;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .card-right div:nth-child(1){
        font-size: 0.9rem;
        color:#2980F7;
        text-align: right;
        margin-right: 0.3rem;
        font-weight: bolder;
    }
    // table{
    //     width: 100%;
    // }
    .page-footer{
        text-align: right;
        padding: 0.25rem;
        width: 90%;
    }
    .van-button{
        width: 90%;
        margin-top: 0.6rem;
    }
    .page-footer-button{
        text-align: center;
    }
    .sign{
        width: 90%;
        height: 2rem;
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
        margin-left:0.4rem ;
        font-size: 0.37333rem;
    }
    .van-tag{
        color: #323233
    }
    .sign-img{
        width: 2rem;
        height: 1rem;
    }
</style>
