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

<script>
import LHeader from '@/components/header.vue'
import { ContactList } from 'vant';
import { getFun,postFun } from '@/service/table'
export default {
    name: 'note',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            timer:'',
            text:'问题记录',
            checkedAll:false,
            result: [],
            list:[],
            id:'',
        }
    },
    mounted() {
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
        this.init()
    },
    methods: {
        init(){
            getFun('check/carry/trouble/list',).then((Response)=>{
                this.list=Response.data
                this.list.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.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);
            }
        },
        cancel(){
            this.$toast.success('取消')
        },
        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(()=>{
                postFun('check/carry/trouble/submit',obj).then((Response)=>{
                    this.$router.push('/correct')
                })
            }).catch(()=>{
                // this.$toast.loading({
                //     message:'加载中...',
                //     forbidClick: true,
                //     loadingType: 'spinner',
                //     duration: 0
                // })
                this.$toast.success('取消')
            })
            
            
        }
    }
}
</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;
    }
    .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>
