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

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <van-tabs v-model="active">
            <van-tab  v-for="(item,index) in tableData"  :key="index" :title="item.title">
                <table border="1" cellspacing="0">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>检查项目</th>
                            <th>检查内容</th>
                            <th>法律依据/出处</th>
                            <th>结果</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item2,index2) in item.list" :key="index2">
                            <td align="center" v-text="index2+1" style="width:10%" ></td>
                            <td align="center" v-text="item2.checkItem" style="width:15%"></td>
                            <td align="center" v-text="item2.checkContent" style="width:20%"></td>
                            <td align="center" v-text="item2.checkBasis" style="width:30%"></td>
                            <td align="center">
                                <van-radio-group v-model="item2.checkStatus" :disabled="finish=='true'?true:item2.isDisabled">
                                    <van-radio name="0" >合格</van-radio>
                                    <van-radio name="1" @click="noGrage(item2)" >不合格</van-radio>
                                </van-radio-group>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </van-tab>
            <!-- <van-tab title="文明施工类">
               
            </van-tab>
            <van-tab title="消防安全类">
               
            </van-tab> -->
        </van-tabs>
    </div>
</template>
<script>
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'formwork',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            tableData:[],//导航和表格列表
            id:'',//检查执行清单id
            active:0,//tab默认选中状态
            text:'问题上报表',//顶部文本
            finish:'',//提交状态
        }
    },
    mounted() {
        if(this.$route.query.id){
            this.id=this.$route.query.id
        }
        if(sessionStorage.getItem('finish')){
            this.finish=sessionStorage.getItem('finish')
        }
        this.init()
    },
    methods: {
        /* 请求问题上报表 */
        init(){
            this.tableData=[]
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('check/carry/list/problem',{planId:this.id}).then((Response)=>{
                this.tableData=Response.data
                this.$toast.clear()
                //根据选择的合格状态来填入单选框禁用状态，'1'为禁用,'0'为启用
                this.tableData.forEach((item)=>{
                    item.list.forEach((item2)=>{
                        if(item2.checkStatus=='1'){
                            item2.isDisabled=true
                        }else if(item2.checkStatus=='0'){
                            item2.isDisabled=false
                        }
                    })
                })
            })
        },
        /* 不合格跳转传参回显到检查问题清单 */
        noGrage(item2){
            console.log(item2)
            //通过禁用状态来判断是否可以跳转
            if(item2.isDisabled==false){
                this.$router.push({
                    name: 'list',
                    query:{
                        planItemId:item2.id,
                        planId:this.id,
                        checkitem:item2.checkItem,//检查项目
                        checkContent:item2.checkContent,//检查内容
                        checkBasis:item2.checkBasis,//法律依据
                    }
                })
            }
        }
    }
}
</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%;
    }
    .van-radio{
        margin-left: 0.4rem;
        margin-top: 0.2rem;
    }
</style>
