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

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-tabs v-model="active" @click="tabClick">
            <van-tab title="上报状态">
                <div class="card-status"  v-for="(item,index) in noticeTableList" :key="index">
                    <van-row>
                        <van-col span="5" class="card-left">
                            <van-image round width="1.5rem" height="1.5rem" src="http://192.168.4.157:8096/hse/profile/upload/2021/10/27/8d91706250358ddad8499e3fec21578f.jpg"/>
                        </van-col>
                        <van-col span="7" class="card-middle">
                            <div>{{item.realName}}</div>
                            <div v-if="item.submit"><span>提交时间   </span>{{item.submitTime}}</div>
                            <div v-else>未提交</div>
                        </van-col>
                        <van-col span="10" class="card-right">
                            <div>{{item.troubleNumber}}</div>
                            <div>问题数量</div>
                        </van-col>
                    </van-row>
                </div>
                <!-- <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-overlay @click.stop="close(item)" :show="item.show"  >
                            <van-button round type="primary" @click.stop="detail(index,item)">详情</van-button>
                            <van-button round type="info"  @click.stop="update(index,item)">修改</van-button>
                            <van-button round type="warning " @click.stop="Delete(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> 
                <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> 
                <!-- <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="sign2"><span>项目经理签字确认：</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false"><p v-show="istext2" @click="sign2" >电子签字</p><img  class="sign-img2" v-show="isImg2" :src="resultImg2" 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>
            </van-tab>
        </van-tabs>
        <!-- <div></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: 'noticeList',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            currentDate: new Date(),//当前默认时间
            dialogShow:false,//弹框是否显示
            istext:true,//是否显示文字
            isImg:false,//是否显示图片
            // istext2:true,//是否显示文字2
            // isImg2:false,//是否显示图片2
            resultImg:'',//电子签名图片
            // resultImg2:'',//电子签名图片2
            noticeQuestionList:[],//整改通知问题记录列表
            active: 0,//tab选中状态
            checkedAll:false,//全选状态
            result: [],//勾选数组
            noticeTableList:[],//上报状态列表
            text:'整改通知管理列表',
            value: '',//日期值
            id:'',//整改通知id
            checkUserId:'',//人员单下拉框匹配id
            showCalendar: false,//弹出层状态
            showCalendar2:false,//人员匹配弹出层状态
            finish:'',//检查状态
            isFinish:false,//提交状态
            dialogTitle:'标题',//弹框标题
            //修改问题对象
            updateObj:{
                id:'',//问题ID
                title:'',//问题名称
                address:'',//问题位置
                context:''//问题内容
            },
            ids:[],//人员匹配数组
            columns:[],//人员匹配下拉数据数组默认值
            person:'',//人员匹配默认值
            projectId:'',
        }
    },
    watch:{
        
    },
    activated(){
        //判断是否由整改通知管理跳转进来--执行问题记录的缓存方法
        if(this.$route.params.name=='notice'){
            //清空表单
            this.value=""
            this.person=""
            this.active=0
            this.checkedAll=false
            this.result=[];
            this.resultImg=""
            // this.resultImg2=""
            this.isImg=false;
            this.istext=true
            // this.isImg2=false;
            // this.istext2=true
            //获取检查id
            if(sessionStorage.getItem('id')){
                this.id=sessionStorage.getItem('id')
            }
            //获取人员匹配projectId
            if(sessionStorage.getItem('projectId')){
                this.projectId=sessionStorage.getItem('projectId')
            }
            //获取检查状态
            if(sessionStorage.getItem('finish')){
                this.finish=sessionStorage.getItem('finish')
            }
            this.init()
        }
        //判断是否从电子签名跳转过来-获取图片是否显示的布尔值
        if(this.$route.query.name=='sign'){
            if(this.$route.query.img==true||this.$route.query.img=='true'){
                this.istext=false
                this.isImg=true
                //从session中获取签名生成的图片1
                if(sessionStorage.getItem('resultImg')){
                    this.resultImg=sessionStorage.getItem('resultImg')
                }
            }
            // else if(this.$route.query.img2==true){
            //     //从session中获取签名生成的图片2
            //     if(sessionStorage.getItem('resultImg2')){
            //         this.resultImg2=sessionStorage.getItem('resultImg2')
            //     }
            //     this.istext2=false
            //     this.isImg2=true
            // }
            this.active=1
        }
        //判断是否编辑页面跳转进来
        if(this.$route.query.pageName=='noticeListEdit'){
            //获取检查id
            if(sessionStorage.getItem('id')){
                this.id=sessionStorage.getItem('id')
            }
            //获取检查状态
            if(sessionStorage.getItem('finish')){
                this.finish=sessionStorage.getItem('finish')
            }
            //获取人员匹配projectId
            if(sessionStorage.getItem('projectId')){
                this.projectId=sessionStorage.getItem('projectId')
            }
            this.active=1
            this.init()
        }
    },
    mounted() {
        //获取检查id
        if(sessionStorage.getItem('id')){
            this.id=sessionStorage.getItem('id')
        }
        //获取检查状态
        if(sessionStorage.getItem('finish')){
            this.finish=sessionStorage.getItem('finish')
        }
        //获取人员匹配projectId
        if(sessionStorage.getItem('projectId')){
            this.projectId=sessionStorage.getItem('projectId')
        }
        this.init()
    },
    methods: {
        /* 同步请求上报状态列表问题记录列表 */
        async init(){
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            await this.statusList()
            await this.problem()
            await this.Selection()
            this.$toast.clear()
        },
        //请求人员匹配下拉菜单
        Selection(){
            this.columns=[];
            if(this.projectId!='null'){
                //请求下拉菜单
                getFun('check/project/user/list/'+this.projectId).then((Response)=>{
                    if(Response.data.length){
                        Response.data.forEach((item)=>{
                            this.columns.push({
                                text:item.username,
                                id:item.id
                            })
                        })
                    }
                    
                })
            }else{
                //请求下拉树形菜单
                getFun('/check/dept/user/tree').then((Response)=>{
                    this.columns=Response.data
                })
            }
        },
        /* 上报状态列表 */
        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.isFinish=Response.data.isFinish
                this.noticeQuestionList=Response.data.list
                //初始化每个div的弹框，遮罩层显示状态
                this.noticeQuestionList.forEach((item)=>{
                    item.show=false
                })
                /* ----详情---- */
                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
                    // }
                }
            })
        },
        /* 全选点击事件---只让全选框的触发全不选事件 */
        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'){
                this.$router.push({name:'sign',query:{name:'sign',img:true}})
            }
        },
        // //电子签名2
        // sign2(){
        //     //点击电子签名，保存用户选择的日期和复选框回显值
        //     if(this.finish=='false'){
        //         this.$router.push({name:'sign',query:{name:'sign',img2:true}})
        //     }
        // },
        //提交问题记录
        commit(){
            var checkedList=[]
            /* 禁用状态下的（已选过）问题不进行提交，进行清空处理 */
            this.result.forEach((it)=>{
                this.noticeQuestionList.forEach((item)=>{
                    if(it==item.id&&!item.checkSubmitId){
                        checkedList.push(it)
                    }
                })
            })
            this.checkUserId=""
            var obj={
                planId:this.id,
                troubleIds:checkedList,
                finishTime:this.value,
                leaderSign:this.resultImg,
            }
            //判断projectId是否为null决定id传值类别
            if(this.projectId!='null'){
                obj.checkUserId=this.ids[0]
            }else{
                obj.ids=this.ids
            }
            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()//强制刷新
        },
        //修改卡片值
        update(index,item){
            item.show=false
            //向编辑页面传值做数据回显
            var obj={
                id:item.id,//问题ID
                address:item.address,//问题位置
                deptId:item.deptIds,//责任单位ID
                deptNames:item.deptNames,//责任单位名称数组
                context:item.context,//问题描述
                checkBasis:item.checkBasis,//法律依据
                pictures:item.pictures,//图片
                videos:item.videos//视频
            }
            this.$forceUpdate()//强制刷新
            this.$router.push({name:'noticeListEdit',query:{name:'noticeList',obj:JSON.stringify(obj)}})
        },
        //列表详情
        detail(index,item){
            item.show=false
            this.$forceUpdate()//强制刷新
            this.$router.push({name:'noticeListDetail',query:{id:item.id}})
        },
        //卡片删除
        Delete(item){
            item.show=false
            this.$forceUpdate()//强制刷新
            this.$dialog.confirm({
                title: '提示',
                message: '确定删除该记录？',
            }).then(()=>{
                this.$toast.loading({
                    message:'删除中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/notify/trouble/delete/'+item.id).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success('删除成功')
                    this.init()
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('删除失败,请稍后再试')
                })
               this.$toast.clear()
            }).catch(()=>{
                this.$toast.success('取消删除')
            })
        },
        //人员选择事件
        personChecked(){
            this.showCalendar2=true//显示遮罩层
        },
        //人员匹配确认按钮
        personOnConfirm(value){
            //获取回显的部门值和部门id数组
            this.person=""
            this.ids=[]
            var valueList=this.$refs.apicker.getValues()
            valueList.forEach((item)=>{
                this.ids.push(item.id)
                this.person+=item.text+' / '
            })
            //去尾'/'
            this.person=this.person.substr(0,this.person.length-2)
            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;
        width: 5rem;
    }
    .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;
    }
    // .sign2{
    //     width: 90%;
    //     height: 2rem;
    //     display: flex;
    //     align-items: center;
    //     margin-top: 0.1rem;
    //     margin-left:0.4rem ;
    //     font-size: 0.37333rem;
    // }
    .van-tag{
        color: #323233
    }
    .sign-img,.sign-img2{
        width: 2rem;
        height: 1rem;
    }
</style>
