<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-plus">发送问卷</el-button>
            </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.status" placeholder="全部状态" style="width: 200px;"></el-select>
            <el-select v-model="queryParams.sort" placeholder="排序方式" style="width: 200px;"></el-select>
        </div>
        <div class="list">
            <div class="l_item" v-for="(item, index) in dataList" :key="index">
                <div class="li_top adfacjb">
                    <div class="lt_l">项目名称：{{ item.programName }}</div>
                    <div class="lt_r adfac">
                        <div class="lr_pre adfac" @click="handleSchedule(item)">
                            <img src="@/assets/images/agent/send_mini.png">
                            <span>查看进度</span>
                        </div>
                        <div class="lr_pre adfac" @click="handleReport(item)">
                            <img src="@/assets/images/agent/report_mini.png">
                            <span>查看报告</span>
                        </div>
                        <div class="lr_status" :class="{'jxz':item.status===0,'ywc':item.status===1}">{{ item.status===0?'进行中':(item.status===1?'已完成':'未知') }}</div>
                    </div>
                </div>
                <div class="li_team">团队名称：{{ item.teamName }}</div>
                <div class="li_wj">问卷名称：{{ item.questionnaireName }}</div>
                <div class="li_time_person adf">
                    <div class="ltp">发布时间：{{ item.fbTime }}</div>
                    <div class="ltp">截止时间：{{ item.jzTime }}</div>
                    <div class="ltp">团队成员：<span>{{ item.teamWcPerson||0 }}/{{item.teamPersons||0}}</span>完成</div>
                    <div class="ltp">发送人：{{ item.sendPerson }}</div>
                </div>
                <div class="li_jd">
                    <div class="lj" :style="{'width':(item.teamWcPerson/item.teamPersons*100)+'%'}"></div>
                </div>
                <div class="li_text adfacjb">
                    <span>完成情况</span>
                    <span>{{ ((item.teamWcPerson/item.teamPersons)*100).toFixed(0) }}%</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const queryParams = ref({
        name: '',
        status: '',
        sort: ''
    })
    const dataList = ref([
        {
            programName:'TechCorp 领导团队评估',
            teamName:'产品研发 · 创新科技',
            questionnaireName:'对领导团队进行全面PERILL评估，以确定强项和发展机会。',
            fbTime:'4月20日 14:09 ',
            jzTime:'4月20日 14:09 ',
            teamPersons:12,
            teamWcPerson:3,
            sendPerson:'刘俊',
            status:0
        },
        {
            programName:'TechCorp 领导团队评估',
            teamName:'产品研发 · 创新科技',
            questionnaireName:'对领导团队进行全面PERILL评估，以确定强项和发展机会。',
            fbTime:'4月20日 14:09 ',
            jzTime:'4月20日 14:09 ',
            teamPersons:12,
            teamWcPerson:12,
            sendPerson:'刘俊',
            status:1
        },
    ])

    const handleSchedule = (item) => {
        proxy.$router.push({
            path: '/agentQuestionnaireSchedule',
            query:{
                questionnaireName: item.questionnaireName
            }
        })
    }
</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;
                    }

                }
            }
        }

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

        .list{
            width: 100%;
            height: calc(100vh - 196px);
            overflow-y: auto;
            margin-top: 4px;
            .l_item{
                width: 100%;
                padding: 20px 24px;
                box-sizing: border-box;
                margin-top: 16px;
                background: #FFFFFF;
                border-radius: 6px;
                border: 1px solid #F3F4F6;
                .li_top{
                    .lt_l{
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 14px;
                        color: #252525;
                        line-height: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .lt_r{
                        .lr_pre{
                            cursor: pointer;
                            margin-right: 36px;
                            img{
                                width: 20px;
                                height: 20px;
                            }
                            span{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 14px;
                                color: #6B7280;
                                line-height: 20px;
                                margin-left: 8px;
                            }
                        }
                        .lr_status{
                            width: 76px;
                            height: 24px;
                            border-radius: 12px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 24px;
                            text-align: center;
                            &.jxz{
                                background: #FCECB6;
                                color: #864F10;
                            }
                            &.ywc{
                                background: rgba(0,145,145,0.1);
                                color: #009191;
                            }
                        }
                    }
                }
                .li_team{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;
                    line-height: 14px;
                    margin-top: 16px;
                }
                .li_wj{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 14px;
                    color: #252525;
                    line-height: 16px;
                    margin-top: 24px;
                }
                .li_time_person{
                    margin-top: 16px;
                    .ltp{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        margin-right: 142px;
                        span{
                            font-weight: bold;
                            font-size: 16px;
                            color: #761E6A;
                        }
                    }
                }
                .li_jd{
                    width: 100%;
                    height: 8px;
                    background: #F3F4F6;
                    border-radius: 4px;
                    position: relative;
                    margin-top: 20px;
                    .lj{
                        height: 100%;
                        background: linear-gradient( 270deg, #9D5F94 0%, #904A87 100%);
                        border-radius: 4px;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }
                .li_text{
                    margin-top: 10px;
                    span{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #646464;
                        line-height: 14px;
                    }
                }
            }
        }
    }
</style>