<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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 list"  :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" v-show="!item.checkSubmitFlag"  @click.stop="update(index,item)">修改</van-button>
                    <van-button round type="warning " v-show="!item.checkSubmitFlag" @click.stop="Delete(item)">删除</van-button>
                </van-overlay>
                <van-checkbox :name="item.id" :disabled="finish?finish:item.checkSubmitId?true:false">问题{{index+1}}</van-checkbox>
                <div @click="cardClick(item)">
                    <!-- <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">全选</van-checkbox>
            <van-button round type="info" @click="commit" :disabled="finish">提交</van-button>
        </div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { ContactList } from 'vant';
import { getFun,postFun } from '@/service/table'
export default {
    name: 'note',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            text:'问题记录',//顶部文本
            checkedAll:false,//全选状态
            result: [],//问题记录复选数组
            list:[],//列表数组
            id:'',//检查执行id
            finish:'',//提交状态
        }
    },
    mounted() {
        if(sessionStorage.getItem('noteId')){
            this.id=sessionStorage.getItem('noteId')
        }
        if(sessionStorage.getItem('checkedFinish')){
            this.finish=sessionStorage.getItem('checkedFinish')=='false'?false:true
        }
        this.init()
    },
    methods: {
        /* 查询问题记录列表 */
        init(){
            this.$toast.loading({
                message:'查询中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('check/carry/trouble/list',{planId:this.id}).then((Response)=>{
                this.$toast.clear()
                this.list=Response.data
                this.list.forEach((item)=>{
                    item.show=false
                    if(item.checkSubmitId){
                        this.result.push(parseInt(item.checkSubmitId))
                    }
                })
            }).catch(()=>{
                this.$toast.clear()
                this.$toast.fail('查询失败,请稍后再试')
            })
        },
        /* 全选点击事件---只让全选框的触发全不选事件 */
        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.list.length){
                this.checkedAll=true
            }else if(this.result.length<this.list.length){
                this.checkedAll=false
            }
        },
        /* 全选框改变事件 */
        checkedAllEvent(){
            if(this.checkedAll){
                this.$refs.checkboxGroup.toggleAll(true);
            }
        },
        //提交问题
        commit(){
            var checkedList=[]
            /* 禁用状态下的（已选过）问题不进行提交，进行清空处理 */
            this.result.forEach((it)=>{
                this.list.forEach((item)=>{
                    if(it==item.id&&!item.checkSubmitId){
                        checkedList.push(it)
                    }
                })
            })
            var obj={
                planId:this.id,
                troubleIds:checkedList
            }
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                if(checkedList.length==0){this.$toast.fail('提交失败,请至少选择一个问题');return}
                this.$toast.loading({
                    message:'提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    duration: 0
                })
                postFun('check/carry/trouble/submit',obj).then((Response)=>{
                    this.$router.push({
                        name:'problem',
                        query:{
                            pageName:'problemNote'
                        }
                    })
                    this.$toast.clear()
                    this.$toast.success('提交成功')
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('提交失败,请稍后再试')
                })
            }).catch(()=>{
                this.$toast.success('取消')
            })
        },
        //卡片单击事件
        cardClick(item){
            item.show=true
            this.$forceUpdate()//强制刷新
        },
        //关闭遮罩层事件
        close(item){
            item.show=false
            this.$forceUpdate()//强制刷新
        },
        //修改卡片值
        update(index,item){
            console.log(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//视频
            }
            console.log(obj,'检查')
            this.$forceUpdate()//强制刷新
            this.$router.push({name:'edit',query:{name:'note',obj:JSON.stringify(obj)}})
        },
        //列表详情
        detail(index,item){
            item.show=false
            this.$forceUpdate()//强制刷新
            this.$router.push({name:'detail',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/carry/trouble/delete/'+item.id).then((Response)=>{
                    this.$toast.clear()
                    this.$toast.success('删除成功')
                    this.init()
                    sessionStorage.setItem('noteDelete',true)
                }).catch(()=>{
                    this.$toast.clear()
                    this.$toast.fail('删除失败,请稍后再试')
                })
               this.$toast.clear()
            }).catch(()=>{
                this.$toast.success('取消删除')
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        position: relative;
        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{
        font-size: 0.4rem;
        line-height: 0.8rem;
    }
    .van-checkbox{
        margin-bottom: 0.1rem;
        width: 30%;
    }
    .page-footer{
        text-align: right;
        padding: 0.25rem;
        width: 90%;
        height: 3rem;
    }
    .page-footer>.van-checkbox{
        position: relative;
        top: 30%;
    }
    .van-button{
        width: 30%;
    }
</style>
