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

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-tabs v-model="active" @click="tabClick">
            <van-tab title="上报状态">
                <table border="1" cellspacing="0">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>状态</th>
                            <th>问题数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(user,index) in noticeTableList" :key="index">
                            <td align="center" v-text="index+1"></td>
                            <td align="center" v-text="user.realName"></td>
                            <td align="center" >{{user.submit?'已提交':'未提交'}}</td>
                            <td align="center" v-text="user.troubleNumber"></td>
                        </tr>
                    </tbody>
                </table>
            </van-tab>
            <van-tab title="问题记录">
                <van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
                    <div class="card" v-for="(item,index) in noticeQuestionList"  :key="index" >
                        <van-checkbox :name="item.id" :disabled="finish=='true'?true:item.checkSubmitId?true:false">问题{{item.id}}</van-checkbox>
                        <div>负责人姓名：{{item.realName}}</div>
                        <div>问题名称：{{item.title}}</div>
                        <div>问题位置：{{item.address}}</div>
                        <div>问题内容：{{item.context}}</div>
                        <div>发现时间：{{item.checkTime}}</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"
                    />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />
                <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="page-footer-button">
                    <van-button round type="info" size="large" @click="commit" :disabled="finish=='true'?true:false">生成整改通知单</van-button>
                    <van-button round type="defult" size="large" @click="cancel" :disabled="finish=='true'?true:false">取消</van-button>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'notice',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            istext:true,//是否显示文字
            isImg:false,//是否显示图片
            resultImg:'',//电子签名图片
            noticeQuestionList:[],//整改通知问题记录列表
            active: 0,//tab选中状态
            checkedAll:false,//全选状态
            result: [],//勾选数组
            noticeTableList:[],//上报状态列表
            text:'整改通知管理列表',
            value: '',//日期值
            id:'',//整改通知id
            showCalendar: false,//弹出层状态
            finish:'',//检查状态
        }
    },
    watch:{
        
    },
    mounted() {
        //获取检查id
        if(sessionStorage.getItem('id')){
            this.id=sessionStorage.getItem('id')
        }
        //获取检查状态
        if(sessionStorage.getItem('finish')){
            this.finish=sessionStorage.getItem('finish')
        }
        this.init()
        //从session中获取签名生成的图片
        if(sessionStorage.getItem('resultImg')){
            this.resultImg=sessionStorage.getItem('resultImg')
        }
        //获取图片是否显示的布尔值
        if(this.$route.query.isImg){
            console.log(this.$route.query)
            this.istext=false
            this.isImg=true
            this.active=1
            this.value=this.$route.query.value
            this.checkedAll=this.$route.query.checkedAll
            this.result=this.$route.query.result
        }
    },
    methods: {
        /* 同步请求上报状态列表问题记录列表 */
        async init(){
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            await this.statusList()
            await this.problem()
            this.$toast.clear()
        },
        /* 上报状态列表 */
        statusList(){
            this.noticeTableList=[]
            getFun('check/notify/user/list',{planId:this.id}).then((Response)=>{
                this.noticeTableList=Response.data
            })
        },
        /* 问题记录列表 */
        problem(){
            this.noticeQuestionList=[]
            getFun('check/notify/trouble/list',{planId:this.id}).then((Response)=>{
                this.noticeQuestionList=Response.data
                this.noticeQuestionList.forEach((item)=>{
                    if(item.checkSubmitId){
                        this.result.push(parseInt(item.checkSubmitId))
                    }
                })
            })
        },
        /* 全选点击事件---只让全选框的触发全不选事件 */
        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 = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            this.showCalendar = false;
        },
        cancel(){
            this.$toast('取消')
        },
        //日期输入框点击事件
        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
                }
            }
        },
        //电子签名
        sign(){
            //点击电子签名，保存用户选择的日期和复选框回显值
            if(this.finish=='false'){
                this.$router.push({name:'sign',query:{value:this.value,result:this.result,checkedAll:this.checkedAll}})
            }
        },
        //提交问题记录
        commit(){
            var checkedList=[]
            /* 禁用状态下的（已选过）问题不进行提交，进行清空处理 */
            this.result.forEach((it)=>{
                this.noticeQuestionList.forEach((item)=>{
                    if(it==item.id&&!item.checkSubmitId){
                        checkedList.push(it)
                    }
                })
            })
            var obj={
                planId:this.id,
                troubleIds:checkedList,
                finishTime:this.value,
                leaderSign:this.resultImg
            }
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/notify/trouble',obj).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success('提交成功')
                    this.$router.push('/notice')
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('提交失败,请稍后再试')
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
    }
    .card div{
        font-size: 0.4rem;
    }
    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>
