<template>
    <div class="page">
        <div class="top adfac">
            <img src="@/assets/images/agent/arrow_left.png" @click="handleBack">
            <div class="spans">
                <span>项目管理</span>
                <span class="last">&nbsp;/&nbsp;问卷详情</span>
            </div>
        </div>
        <div class="content adffcacjc">
            <div class="c_top adfacjc">
                <div class="ct_l">
                    <div class="cl_title">大纲</div>
                    <div class="cl_list">
                        <div class="cl_item" :class="{'active':qidx===index}" v-for="(item, index) in questionList" :key="index"><span>{{ index+1 }}.</span>{{ item.title||'问题'+(index+1) }}</div>
                    </div>
                </div>
                <div class="ct_r">
                    <div class="cr_title">{{ '企业员工培训需求调查问卷' }}</div>
                    <div class="cr_type">问卷类型：{{ '高级' }}</div>
                    <div class="cr_list">
                        <div class="crl_item" v-for="(item, index) in dataList" :key="index">
                            <div class="ci_title"><span>*</span>{{ (index+1)+'.'+item.question }}</div>
                            <div class="ci_answer adfac" v-for="(answer, idx) in item.answerList" :key="idx">
                                <img src="@/assets/images/agent/notselect_mini.png">
                                <span>{{ answer.name }}</span>
                                <!-- <el-radio v-model="item.answer" :label="answer.value" style="display: block;margin-top: 26px;">{{ answer.name }}</el-radio> -->
                                <!-- <div class="ca_czs adfac" style="display: none;">
                                    <img src="@/assets/images/agent/edit_mini2.png">
                                    <img src="@/assets/images/agent/add_mini.png">
                                    <img src="@/assets/images/agent/reduce_mini.png">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c_bottom adfacjc">
                <div class="cb_l"></div>
                <div class="cb_r">
                    <el-button type="primary">发送问卷</el-button>
                    <el-button type="default" @click="handleBack">返回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();

    const questionList = ref([1,1,1,1,1,1,1,1,1])
    const dataList = ref([
        {
            question:'您所在的部门是哪个？',
            answer:'',
            answerList:[
                {name:'A 人力资源部',value:'A 人力资源部'},
                {name:'B 财务部',value:'B 财务部'},
                {name:'C 市场部',value:'C 市场部'},
                {name:'D 技术部',value:'D 技术部'},
                {name:'E 其他',value:'E 其他'},
            ]
        },
        {
            question:'您所在的部门是哪个？',
            answer:'',
            answerList:[
                {name:'A 人力资源部',value:'A 人力资源部'},
                {name:'B 财务部',value:'B 财务部'},
                {name:'C 市场部',value:'C 市场部'},
                {name:'D 技术部',value:'D 技术部'},
                {name:'E 其他',value:'E 其他'},
            ]
        },
        {
            question:'您所在的部门是哪个？',
            answer:'',
            answerList:[
                {name:'A 人力资源部',value:'A 人力资源部'},
                {name:'B 财务部',value:'B 财务部'},
                {name:'C 市场部',value:'C 市场部'},
                {name:'D 技术部',value:'D 技术部'},
                {name:'E 其他',value:'E 其他'},
            ]
        }
    ])
    
    const handleBack = () => {
        proxy.$router.go(-1)
    }
</script>

<style scoped lang="scss">
    .page{
        background: #FAFAFA;
        .top{
            width: 100%;
            height: 64px;
            background: #FFFFFF;
            border-bottom: 1px solid #F3F4F6;
            
            img{
                width: 36px;
                height: 36px;
                margin-left: 16px;
                cursor: pointer;
            }
            .spans{
                display: flex;
                align-items: center;
                margin-left: 23px;
                span{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;
                    line-height: 14px;
                    &.last{
                        color: #111111;
                    }
                }
            }
        }

        .content{
            width: calc(100% - 24px);
            height: calc(100vh - 88px);
            margin: 12px;

            .c_top{
                width: 100%;
                height: calc(100vh - 136px);
                .ct_l{
                    width: 240px;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 6px;
                    border: 1px solid #F3F4F6;
                    padding: 16px;
                    box-sizing: border-box;
                    .cl_title{
                        width: 100%;
                        height: 32px;
                        background: #F4F4F4;
                        border-radius: 6px;
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 14px;
                        color: #393939;
                        line-height: 32px;
                        text-align: center;
                    }
                    .cl_list{
                        width: 100%;
                        height: calc(100% - 58px);
                        overflow-y: auto;
                        margin-top: 20px;
                        .cl_item{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #6B7280;
                            line-height: 48px;
                            cursor: pointer;
                            &:first-child{
                                margin-top: 0;
                            }
                            span{
                                color: #252525;
                            }
                            &:hover,&.active{
                                color: #761E6A;
                                span{
                                    color: #761E6A;
                                }
                            }
                        }
                    }
                }
        
                .ct_r{
                    width: 812px;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 6px;
                    border: 1px solid #F3F4F6;
                    margin-left: 12px;
                    overflow-y: auto;
                    .cr_title{
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 24px;
                        color: #761E6A;
                        line-height: 33px;
                        text-align: center;
                        padding: 30px 0;
                        border-bottom: 1px solid #ECEEF5;
                    }
                    .cr_type{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        text-align: center;
                        padding: 39px 0;
                        border-bottom: 1px solid #ECEEF5;
                    }
                    .cr_list{
                        .crl_item{
                            padding: 45px 40px;
                            border-bottom: 1px solid #ECEEF5;
                            .ci_title{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 14px;
                                color: #252525;
                                line-height: 14px;
                                span{
                                    font-family: PingFang-SC, PingFang-SC;
                                    font-weight: bold;
                                    font-size: 14px;
                                    color: #E22D48;
                                    line-height: 14px;
                                    margin-right: 8px;
                                }
                            }
                            .ci_answer{
                                position: relative;
                                // img{
                                //     width: 16px;
                                //     height: 16px;
                                //     margin-left: 24px;
                                //     cursor: pointer;
                                // }
                                // &:hover{
                                //     .ca_czs{
                                //         display: block !important;
                                //     }
                                // }
                                margin-top: 26px;
                                padding-left: 30px;
                                &>img{
                                    width: 16px;
                                    height: 16px;
                                }
                                &>span{
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #6B7280;
                                    line-height: 14px;
                                    margin-left: 12px;
                                }
                            }
                            &:hover{
                                background: rgba(118,30,106,0.04);
                            }
                        }
                    }
                }
            }

            .c_bottom{
                width: 100%;
                margin-top: 19px;
                .cb_l{
                    width: 240px;
                }
                .cb_r{
                    width: 812px;
                    margin-left: 12px;
                }
            }
        }
    }
</style>