<template>
    <div class="page">
        <div class="top adfacjb">
            <div class="t_l">
                <p>报告管理</p>
                <p class="tip">访问和分析PERILL评估报告</p>
            </div>
            <div class="t_r">
                <el-button type="primary" icon="el-icon-upload2">导出报告</el-button>
            </div>
        </div>
        <div class="tabs adfac">
            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeTab(1)">团队报告</div>
            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeTab(2)">个人报告</div>
        </div>
        <div class="query adfacjb">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryParams.name" style="width: calc(100% - 448px);"></el-input>
            <el-select v-model="queryParams.team" placeholder="所有团队" style="width: 200px;"></el-select>
            <el-select v-model="queryParams.sort" placeholder="排序方式" style="width: 200px;"></el-select>
        </div>
        <template v-if="tidx===1">
            <div class="list">
                <div class="l_item adfacjb" v-for="(item, index) in teamList" :key="index">
                    <div class="li_l adfac">
                        <div class="li_pre">
                            <p class="lit_text">{{item.title}}</p>
                            <p class="lit_tip">产品研发 · 创新科技</p>
                        </div>
                        <div class="li_pre">
                            <p class="lit_text">{{item.time}}</p>
                            <p class="lit_tip">报告时间</p>
                        </div>
                        <div class="li_pre">
                            <p class="lit_text">{{item.persons}}/{{ item.sum }}</p>
                            <p class="lit_tip">答卷人数</p>
                        </div>
                    </div>
                    <div class="li_r">
                        <el-button type="primary">查看报告</el-button>
                    </div>
                </div>
            </div>
        </template>
        <template v-else-if="tidx===2">
            <div class="list">
                <div class="l_item adfacjb" v-for="(item, index) in personList" :key="index">
                    <div class="li_l adfac">
                        <div class="li_pre">
                            <p class="lit_text">{{item.title}}</p>
                            <p class="lit_tip">产品研发 · 创新科技</p>
                        </div>
                        <div class="li_pre">
                            <p class="lit_text">{{item.time}}</p>
                            <p class="lit_tip">报告时间</p>
                        </div>
                        <div class="li_pre">
                            <p class="lit_text">{{item.name}}</p>
                            <p class="lit_tip">用户名</p>
                        </div>
                    </div>
                    <div class="li_r">
                        <el-button type="primary">查看报告</el-button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const tidx = ref(1)
    const queryParams = ref({
        name: '',
        team: '',
        sort: ''
    })
    const teamList = ref([
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20},
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20},
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20}

    ])

    const personList = ref([
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'},
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'},
        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'}
    ])

    const handleChangeTab = (idx) => {
        tidx.value = idx
    }
</script>

<style scoped lang="scss">
    .page{
        padding: 28px 20px;
        background: #FAFAFA;

        .top{
            .t_l{
                p{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 16px;
                    color: #252525;
                    line-height: 16px;
                    &.tip{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        margin-top: 16px;
                    }

                }
            }
        }

        .tabs{
            width: 100%;
            margin-top: 28px;
            border-bottom: 1px solid #E5E7EB;
            .t_pre{
                width: 116px;
                padding-bottom: 18px;
                position: relative;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #252525;
                line-height: 16px;
                text-align: center;
                cursor: pointer;
                &.active{
                    font-weight: bold;
                    color: #761E6A;
                    &::after{
                        content: '';
                        width: 116px;
                        height: 2px;
                        background: #833478;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }

                }
            }
        }

        .query{
            width: 100%;
            padding: 16px 20px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #F3F4F6;
            margin-top: 31px;
        }

        .list{
            .l_item{
                margin-top: 10px;
                width: 100%;
                padding: 24px;
                box-sizing: border-box;
                background: #FFFFFF;
                border-radius: 6px;
                border: 1px solid #F3F4F6;
                .li_l{
                    .li_pre{
                        width: 335px;
                        .lit_text{
                            font-family: PingFang-SC, PingFang-SC;
                            font-weight: bold;
                            font-size: 14px;
                            color: #252525;
                            line-height: 14px;
                            text-align: left;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .lit_tip{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #6B7280;
                            line-height: 14px;
                            text-align: left;
                            margin-top: 16px;
                        }
                    }
                }
            }
        }
    }
</style>