<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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="finish=='true'?true:item.checkSubmitId?true:false">问题{{index+1}}</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" :disabled="finish=='true'?true:false">全选</van-checkbox>
            <van-button round type="info" @click="commit" :disabled="finish=='true'?true:false">提交</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(this.$route.query.id){
            this.id=this.$route.query.id
        }
        if(this.$route.query.finish){
            this.finish=this.$route.query.finish
        }
        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)=>{
                    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(()=>{
                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('取消')
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .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>
