
<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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"
                />
            <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>
            <van-field
                readonly
                clickable
                name="person"
                :value="person"
                label="人员选择"
                placeholder="请选择人员"
                @click="personChecked"
                />
            <van-popup v-model="showCalendar2" position="bottom">
                <van-picker  ref="apicker" title="人员匹配" show-toolbar :columns="columns" @confirm="personOnConfirm" @cancel="showCalendar2=false"/>
            </van-popup> 
            <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(),//当前默认时间
            dialogShow:false,//弹框是否显示
            istext:true,//是否显示文字
            isImg:false,//是否显示图片
            resultImg:'',//电子签名图片
            noticeQuestionList:[],//整改通知问题记录列表
            active: 0,//tab选中状态
            checkedAll:false,//全选状态
            result: [],//勾选数组
            noticeTableList:[],//上报状态列表
            text:'整改确认问题记录',
            value: '',//日期值
            id:'',//整改通知id
            showCalendar: false,//日期弹出层状态
            showCalendar2: false,//人员匹配弹出层状态
            finish:true,//检查状态
            isFinish:false,//提交状态
            person:'',//人员匹配
            columns:'',//下拉数组
            projectId:'',//判断请求树形菜单还是下拉框
        }
    },
    watch:{
        
    },
    mounted() {
        //获取确认id
        if(this.$route.query.id){
            this.id=this.$route.query.id
            this.projectId=this.$route.query.projectId
        }
        this.problem()
        this.init()
    },
    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(this.isFinish){
                    //获取选中状态数组
                    this.noticeQuestionList.forEach((item)=>{
                        if(item.checkSubmitId){
                            this.result.push(parseInt(item.checkSubmitId))
                        }
                    })
                    //日期数据回显
                    if(Response.data.finishTime){
                        this.value=Response.data.finishTime
                    }
                    //电子签名数据回显
                    if(Response.data.leaderSign){
                        this.resultImg=Response.data.leaderSign
                    }
                    //电子签名数据2回显
                    if(Response.data.managerSign){
                        this.resultImg2=Response.data.managerSign
                    }
                    //判断是否有签名
                    if(this.resultImg){
                        this.istext=false
                        this.isImg=true
                    }
                    //判断是否有签名
                    if(this.resultImg2){
                        this.istext2=false
                        this.isImg2=true
                    }
                }
            })
        },
        //请求人员匹配下拉菜单
        init(){
            this.columns=[];
            if(this.projectId){
                //请求下拉菜单
                getFun('check/project/user/list',{projectId:this.projectId}).then((Response)=>{
                    this.columns=Response.data
                })
            }else{
                //请求下拉树形菜单
                getFun('/check/dept/user/tree',{projectId:this.projectId}).then((Response)=>{
                    this.columns=Response.data
                })
            }
        },
        /* 全选点击事件---只让全选框的触发全不选事件 */
        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
            }
        },
        //人员选择事件
        personChecked(){
            this.showCalendar2=true//显示遮罩层
        },
        /* 全选框改变事件 */
        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'){
                this.$router.push({name:'sign',query:{name:'sign',img:true}})
            }
        },
        //提交问题记录
        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,
                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.init()
                    this.$router.push('/notice')
                }).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}})
        },
        //人员匹配确认按钮
        personOnConfirm(){
            //获取回显的部门值和部门id数组
            this.person=""
            this.ids=[]
            var valueList=this.$refs.apicker.getValues()
            valueList.forEach((item)=>{
                this.ids.push(item.id)
                this.person+=item.text+' / '
            })
            console.log(this.person)
            this.showCalendar2 = false;
        }
    }
}
</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>
