<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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">
                <van-checkbox name="a">问题一</van-checkbox>
                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
                <div>具体位置：项目内页管理</div>
                <div>发现时间：2021-12-15</div>
            </div>
            <div class="card">
                <van-checkbox name="b">问题二</van-checkbox>
                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
                <div>具体位置：项目内页管理</div>
                <div>发现时间：2021-12-15</div>
            </div>
            <div class="card">
                <van-checkbox name="c">问题三</van-checkbox>
                <div>问题描述：未编制专项试工方案或未进行设计计算</div>
                <div>具体位置：项目内页管理</div>
                <div>发现时间：2021-12-15</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';
export default {
    name: 'note',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            text:'问题记录',
            checkedAll:false,
            result: [],
        }
    },
    mounted() {
        
    },
    methods: {
        //全选点击事件---只让全选框的触发全不选事件
        checkedAllClick(){
            if(this.checkedAll){
                this.$refs.checkboxGroup.toggleAll(true);
            }else{
                this.$refs.checkboxGroup.toggleAll(false);
            }
        },
        checkedEvent(list){
            if(list.length==3){
                this.checkedAll=true
            }else if(list.length<3){
                this.checkedAll=false
            }
        },
        checkedAllEvent(){
            if(this.checkedAll){
                this.$refs.checkboxGroup.toggleAll(true);
            }
        },
        cancel(){
            this.$toast('取消')
        },
        commit(){
            this.$dialog.confirm({
                title: '提示',
                message: '确定提交检查问题？',
            }).then(()=>{
                this.$router.push('/correct')
            })
        }
    }
}
</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>
