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

<template>
    <div>
       <LHeader v-bind:text="text"></LHeader>
        <van-tabs v-model="active">
            <van-tab title="上报状态">
                <table border="1" cellspacing="0">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(user,index) in user" :key="index">
                            <td align="center" v-text="index+1"></td>
                            <td align="center" v-text="user.name"></td>
                            <td align="center" v-text="user.gender"></td>
                            <td align="center" v-text="user.age"></td>
                        </tr>
                    </tbody>
                </table>
            </van-tab>
            <van-tab title="问题记录">
                <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>
                </div>
                <van-field
                    readonly
                    clickable
                    name="calendar"
                    :value="value"
                    label="整改完成日期"
                    placeholder="请选择日期"
                    @click="showCalendar = true"
                    />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />
                <div class="sign"><span>检查组负责人签字确认：</span><van-tag color="#ffe1e1">电子签字</van-tag></div>
                <div class="page-footer-button">
                    <van-button round type="info" size="large" @click="commit">生成整改通知单</van-button>
                    <van-button round type="defult" size="large" @click="cancel">取消</van-button>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import LHeader from '@/components/header.vue'
export default {
    name: 'notice',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            active: 0,
            checkedAll:false,
            result: [],
            valuetext:'',
            user:[
                {name:"杨过",gender:"男",age:"30"},
                {name:"小龙女",gender:"女",age:"35"},
                {name:"郭靖",gender:"男",age:"36"},
                {name:"黄蓉",gender:"女",age:"36"},
                {name:"郭襄",gender:"女",age:"18"},
            ],
            text:'整改通知管理列表',
            value: '',
            showCalendar: false,
        }
    },
    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);
            }
        },
        onConfirm(date) {
            this.value = `${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
        },
        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;
    }
    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{
        margin-top: 0.5rem;
        margin-left:0.4rem ;
        font-size: 0.37333rem;
    }
    .van-tag{
        color: #323233
    }
</style>
