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

<template>
    <div>
       <LHeader v-bind:text="text" :goback="goback"></LHeader>
       <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索内容"
            @search="onSearch" 
            >
            <template #action>
                <div @click="onSearch" >搜索</div>
            </template>
        </van-search>
        <van-tabs v-model="active" :swipe-threshold="3"	@change="tabChange">
            <van-tab  v-for="(item,index) in checkedConfirmList"  :key="index" :title="item.title">
                <div class="card"  v-for="(it,index) in item.list"  :key="index" @click="cardLocation(it)">
                    <div>负责人姓名：{{it.realName}}</div>
                    <div>检查名称：{{it.name}}</div>
                    <div>检查类型：{{it.type}}</div>
                    <div v-show="it.isOpen">
                        <div>检查开始时间：{{it.planStartTime}}</div>
                        <div>检查结束时间：{{it.planEndTime}}</div>
                        <div>检查地点：{{it.address}}</div>
                        <div>是否完成检查：{{it.finish?'是':'否'}}</div>
                        <div>问题数量：{{it.troubleNumber}}</div>
                    </div>
                    <div class="more" @click.stop="toggle(it)">
                        {{ it.OpenText }}
                    </div>
                </div>
            </van-tab>
        </van-tabs>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'notice',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            title:'待完成',//默认选中状态的tab页签
            active:'0',//默认选中状态
            status:'unconfirm',//默认完成状态
            value:'',//列表搜索关键字值
            goback:'save-workbench',//返回工作台
            checkedConfirmList:[
                {
                    title:'待完成',
                    list:[]
                },
                {
                    title:'已完成',
                    list:[]
                }
            ],//整改通知管理列表
            text:'整改通知管理',
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        /* 请求整改通知列表 */
        init(){
            // this.noticeList=[]
            this.clearTab()
            this.$toast.loading({
                message:'加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            })
            getFun('check/notify/list',{select:this.value,status:this.status}).then((Response)=>{
                this.$toast.clear()
                this.checkedConfirmList.forEach((item)=>{
                    if(item.title==this.title){
                        item.list=Response.data[0].list
                        item.list.forEach((it)=>{
                            it.isOpen=false
                            it.OpenText="展开 ▼";
                        })
                    }
                })
                // this.checkedConfirmList=Response.data
                // this.checkedConfirmList.forEach((item)=>{
                //     item.list.forEach((it)=>{
                //         it.isOpen=false
                //         it.OpenText="展开 ▼";
                //     })
                // })
            })
        },
         /* 搜索查询列表接口 */
        onSearch(){
            this.init()
        },
        cardLocation(item){
            sessionStorage.setItem('projectId',item.projectId)
            sessionStorage.setItem('noticeFinish',item.finish)
            sessionStorage.setItem('id',item.id)
            this.$router.push({
                name:'noticeList',
                params:{
                    name:'notice',
                    id:item.id
                }
            })
        },
        //切换显示内容
        toggle(item){
            item.isOpen = !item.isOpen;
            if (item.isOpen) {
                //   显示所有数据
                item.OpenText = "收起 ▲";
            } else {
                item.OpenText = "展开 ▼";
                // 只显示第一个数据
            }
            this.$forceUpdate()
        },
        //清空tab列表数据
        clearTab(){
            this.checkedConfirmList.forEach((it)=>{
                it.list=[]
            })
        },
        tabChange(name,title){
            if(name=='0'){
                this.status='unconfirm'
            }else{
                this.status='confirmed'
            }
            this.title=title
            this.init()
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        position: relative;
        border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
        line-height: 0.8rem;
    }
    .more{
        position: absolute;
        bottom: 0.25rem;
        right: 15px;
        color: #2a80f7;
        font-weight: none;
        z-index: 99;
    }
</style>
