<template>
    <div class="container">
        <!-- 导航 -->
        <div class="nav">
            问卷发布
            <div class="nav-btn ">
                <a>返回</a>
            </div>
        </div>

        <div class="placeholder">
        </div>

        <div class="body mar-top " v-loading="loading"  element-loading-text="拼命加载中">
            <div class=" main box">
                <!-- 问卷标题 -->
                <div>
                    <h2 class="title">{{paper.title}}</h2>
                </div>
                <el-form ref="form" :model="formData" label-width="0px" v-loading="releaseLoading">
                    <div class="release_settings">
                        
                        <div class="set_obj set_item">
                            <!-- 设置项名称 -->
                            <div class="label" >
                                发放对象
                            </div>
                            <!-- 设置项 内容 -->
                            <div class="content">
                                <el-button type="primary" icon="el-icon-plus"  plain round  @click="dialogVisible = true" >选择发放对象</el-button>
                                <div class="select_box" v-show="selectedStuListConfirm.length > 0">
                                    <div class="select_obj" v-for="(item,index) in selectedStuListConfirm" :key="index">
                                        {{item.name}}
                                        <div class="select_del">
                                            <i class="el-icon-close" style="color:#fff;font-size:10px;" @click="deleteSelectItem(index)"></i>
                                        </div>
                                    </div>

                                    <!-- <div class="select_obj">
                                        计算机科学与工程学院 
                                    </div> -->
                                </div>
                            </div>
                        </div>

                        <!-- <div class=" set_item">
                            
                            <div class="label">
                                发放对象
                            </div>
                            
                            <div class="content">   
                                <el-button type="primary" icon="el-icon-plus"  plain round >发放对象</el-button>
                            </div>
                        </div> -->


                        <div class=" set_item">
                            <!-- 设置项名称 -->
                            <div class="label">
                                有效时段
                            </div>
                            <!-- 设置项内容 -->
                            <div class="content">
                                <el-form-item required>
                                    <el-col :span="11">
                                        <el-form-item prop="date1">
                                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="开始时间" v-model="formData.startTime" style="width: 100%;" ></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="line" :span="2" style="text-align:center;">-</el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date2">
                                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="结束时间" v-model="formData.endTime" style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-form-item>
                            </div>
                        </div>
        
                    </div>
                </el-form>
              
                <!-- 提交按钮 -->
                <div class="paper_btns">
                    <div >
                        <el-button size="small" round>取消</el-button>
                          <el-button size="small" round type="primary" @click="release">发布问卷</el-button>
                    </div>
                </div>
            </div>
        </div>

         <!-- <el-dialog custom-class="dialogclass" title="选择辅导员" :visible.sync="dialogVisible" width="500px" append-to-body>
           
            <div slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
         </el-dialog> -->
         <div class="dialog-mask" v-show="dialogVisible">
            <div class="dialog">
                <div class="dialog-title">
                    <div class="text">
                        选择发放对象
                    </div>
                    <div class="closeBtn" @click="closeDialog">
                        <i class="el-icon-close" style="font-size:18px;"></i>
                    </div>
                </div>
                <div class="search">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline"  size="mini">
                        <el-form-item label="所属班级" prop="classId">
                            <el-cascader  ref="cascader" placeholder="请选择班级" v-model="classVlue1" :props="{ checkStrictly: true }" :show-all-levels="false" :options="ClassNameList"
                                @change="handleChange1" clearable filterable
                                >
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" >查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="dialog-body">
                    
                    <div class="dialog-left">
                  
                        <div class="selectAllctrl">
                            <span>
                                {{label == null?'学院/专业/班级/学生':label}}
                            </span>
                            <span @click="selectAll">
                                {{selectAllText}}
                            </span>
                        </div>
                        <div class="list" style="height:369px;" v-loading="stusLoading" element-loading-text="数据加载中">
                            <el-scrollbar style="height:100%">
                                <div class="obj" v-for="(stu,index) in studentList" :key="index">
                                    <div class="obj_name">
                                        {{stu.name}}
                                    </div>
                                    <div class="checkbox" >
                                        <el-checkbox v-model="stu.isSelected" @change="selectChange"></el-checkbox>
                                    </div>
                                </div>
                             
                            </el-scrollbar>
                        </div>
                        
                    </div>
                    <div class="dialog-right">
                        <div class="right-title">
                            {{'已选择' + selectedStuList.length}}
                        </div>
                        <div class="list" style="height:369px;" v-loading="selectedStuLoading" element-loading-text="数据加载中" >
                              <el-scrollbar style="height:100%">
                                    <div class="obj boj1" v-for="(stu,index) in selectedStuList" :key="index">
                                        <div class="obj_name">
                                            {{stu.name}}
                                        </div>
                                        <div class="checkbox">
                                             <i class="el-icon-close" style="font-size:16px;" @click="deleteSelectItem(index)"></i>
                                        </div>
                                    </div>
                              </el-scrollbar>
                        </div>
                    </div>
                </div>
                <div class="dialog-footer">
                        <el-button size="small" round @click="dialogVisible = false">取消</el-button>
                        <el-button size="small" round type="primary" @click="confirmSelect">确定</el-button>
                </div>
            </div>
         </div>
       
    </div>

</template>

<script>
import { getClassName,listAllStudent } from "@/api/stuCQS/basedata/student";
import { add,update,get,release} from "@/api/questionnaire/question";

export default {
    data() {
        return {
            isPreview:false,
            loading:false,
            paper:{
                title:"辅导员满意度问卷调查",
                questions:[
                    {
                        index:0,
                        type: 1,
                        name:'请问你对辅导员的工作是否满意?',
                        options:[
                            {
                                content:"满意",
                                score:5
                            },
                            {
                                content:"比较满意",
                                score:3
                            },
                            {
                                content:"不太满意",
                                score:1
                            },
                            {
                                content:"太满意",
                                score:0
                            }
                        ]
                    },

                    {
                        index:1,
                        type: 2,
                        name:'请问你对辅导员的工作是否满意?',
                        options:[
                            {
                                content:"满意",
                                score:5
                            },
                            {
                                content:"比较满意",
                                score:3
                            },
                            {
                                content:"不太满意",
                                score:1
                            },
                            {
                                content:"太满意",
                                score:0
                            }
                        ]
                    },


                    {
                        index:2,
                        type: 0,
                        name:'今后辅导的工作你有什么意见和建议?',
                        
                    },

                ]
                
            },
            formData:{},
            searchForm:{},
            dialogVisible:false,
            ClassNameList: [],//班级名称
            classVlue1: [],//班级搜索选择
            label: null,//班级添加修改选择
            studentList:[],
            selectedStuList:[],
            stusLoading:false,
            selectedStuLoading:false,
            selectAllText:"全选",
            selectedStuListConfirm:[],
            releaseLoading:false,
            
            
        };
    },
    created(){
        this.getClassNameList();
        if(this.$route.query.id){
            this.formData.id = this.$route.query.id;
          
        }
        
        
    },
    methods:{
        //发布问卷
        release(){

            //获取所有学号
            let stuNos = [];
            if(this.selectedStuListConfirm.length <= 0){
                this.$modal.msgError("未选择发放对象");
                
                return;
            }

            this.selectedStuListConfirm.forEach(stu =>{
                stuNos.push(stu.stuNo);

            });
            this.releaseLoading = true;
            this.formData.stuNos = stuNos;
            // this.formData.questions = JSON.stringify(this.formData.questions);
            release( this.formData).then(res=>{
                this.$modal.msgSuccess("发布成功");
                this.releaseLoading = false;
            });

        },
        deleteSelectItem(index){
             let stu = this.selectedStuList[index];
             this.selectedStuListConfirm.splice(index,1);
             this.selectedStuList.splice(index,1);
             for (let i= 0; i < this.studentList.length; i++) {
                    
                if(this.studentList[i].stuNo == stu.stuNo){
                    this.studentList[i].isSelected = false;   
                    break;
                }
                    
             }
        },
        
        confirmSelect(){
            this.selectedStuListConfirm = this.selectedStuList;
            this.dialogVisible = false;
        },
        selectAll(){
            if(this.selectAllText == '全选'){
                 for (let i= 0; i < this.studentList.length; i++) {
                    this.studentList[i].isSelected = true;   
                }
                this.selectAllText = "取消全选"
            }else{
                 for (let i= 0; i < this.studentList.length; i++) {
                    this.studentList[i].isSelected = false;   
                }
                this.selectAllText = "全选"
            }
            this.selectChange();
        
        },
        selectChange(){
            this.selectedStuLoading = true;
          
             let  arr = []; 
            for (let i= 0; i < this.studentList.length; i++) {
                 let stu= this.studentList[i];
     
                 if(stu.isSelected){
                    arr.push(stu);
                }
                
            }
          
            this.selectedStuList = arr;
            this.selectedStuLoading = false;
        },
        //获取班级
         getClassNameList() {
            getClassName().then(res => {
                this.ClassNameList = res.data;
            })
            },
         //搜索班级选择
        handleChange1(value) {
            this.studentList = [];
            this.stusLoading = true;
             //获取选择的文本
            if(value[2]){
                // this.label =this.classNameList[value[0]].children[value[1]].childrenp[value[2]].label;
                listAllStudent({'status':'01',"classId":value[2]}).then(res=>{
                      res.data.forEach(ele => {
                          this.studentList.push({
                             'stuNo':ele.stuNo,
                             'name':ele.name,
                              isSelected:false
                          })
                      });
                         this.stusLoading = false;
                });
            }else if(value[1]){
                // this.label = this.classNameList[value[0]].children[value[1]].label;  
                    listAllStudent({'status':'01',"majorId":value[1]}).then(res=>{
                          res.data.forEach(ele => {
                          this.studentList.push({
                             'stuNo':ele.stuNo,
                             'name':ele.name,
                              isSelected:false
                            
                          })
                      });
                        this.stusLoading = false;

                    });
            }else if(value[0]){
                    // this.label = this.classNameList[value[0]].label; 
                    listAllStudent({'status':'01',"deptId":value[0]}).then(res=>{
                        res.data.forEach(ele => {
                            this.studentList.push({
                                'stuNo':ele.stuNo,
                                'name':ele.name,
                                 isSelected:false
                             
                            })
                        });
                          this.stusLoading = false;
                    });
            }
            this.label =   this.$refs.cascader.getCheckedNodes()[0].label;
          
        },
        
   
        closeDialog(){
            this.dialogVisible = false;
        }
    }
}
</script>

<style  scoped>
.app-main{
    position: relative;
    height: 100%;
}
/* nav  标题   保存  预览  保存发布等按钮*/
.container{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    left: 0;
    height: 100%;
    background-color: #f2f4f7;

}
.body {
      background-color: #f2f4f7;
}
.nav{
    width: 100%;
    height: 40px;
    background: #3A4357;
    box-shadow: 0 2px 17px 0 rgba(211, 211, 211, 0.50);
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #A8A8B3;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}
.nav-btn {
    position: absolute;
    left: 0;
    top: 0;
}


.nav-btn a {
    float: left;
    width: auto;
    padding: 0 20px;
    color: white;
}
.nav-btn a.completeBtn{
    background-color: #409EFF;
}
.placeholder{
    width: 100%;
    height: 40px;
}
/* 版心 */
.main{
    width: 1200px;
    margin: 0 auto;
}
.mar-top{
    margin-top: 20px;
}
.box{
    padding: 24px 20px 15px 24px;
    background: #fff;
    box-shadow: 0px 2px 10px 0px rgba(237, 238, 240, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
/* 问卷标题 */
.title{
    font-size: 18px;
    color: #181E33;
    line-height: 25px;
    font-weight: bold;
}


/* 提交和重置按钮 */
.paper_btns{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.paper_btns>div{
    display: flex;
    gap: 10px;
}
/* 发放信息设置 */
.release_settings{

}
.set_item{
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-bottom:20px;
 
}
.set_item .label{
    display: inline-block;
    width: 104px;
    line-height: 34px;
    color: #131B26
}
.set_item.set_obj .content{

    width: calc(100% - 105px);
 
}
.select_box{
    width: 100%;
    border: 1px dashed #E1E1E5;
    padding-top: 12px;
    border-radius: 4px;
    padding: 12px 4px 0 4px;
    margin-top: 5px;
}
.select_box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
}
.select_obj{
    display: inline-block;
    background: #F2F5FA;
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    border-radius: 14px;
    color: #181E33;
    margin-left: 10px;
    margin-bottom: 12px;
    position: relative;
    font-size: 12px;
}
.select_obj:hover>.select_del{
    display: block;
}
.select_del{
    display: none;
    width: 16px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.50);
    border-radius: 50%;
    position: absolute;
    top: -3px;
    right: -8px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}
.dialogclass{

}
.set_obj{
   
}
.dialog-mask{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 0;
}
.dialog{
    position: absolute;
    width: 640px;
    height: 600px;
    left: 50%;
    top: 50%;
    margin-left: -320px;
    margin-top: -300px;
     background: #fff;
     border-radius: 10px;
     overflow: hidden;
}
.dialog-title{
    display: flex;
    justify-content: space-between;
    line-height: 60px;
    height: 60px;
    box-shadow: inset 0 -1px 0 0 rgba(242, 242, 242, 0.80);
    padding: 0 30px;
    box-sizing: border-box;
   
}
.dialog-title .text{
    font-weight: 500;

    color: #131B26;


    font-size: 18px;
}

.closeBtn{
    cursor: pointer;
}
.dialog-footer{
    width: 100%;
    height: 72px;
    padding-right: 20px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 17px;
    box-shadow: 0 -1px 4px 0 rgba(209, 209, 209, 0.18);
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog-body{
    display: flex;
   
}
.dialog-body .dialog-left{
    width: 349px;
 
    padding-left: 30px;
    padding-top: 14px;
    border-right: 1px solid #F2F2F2;


}
.search{
    height: 36px;
    padding-left: 30px;
    position: relative;
    padding-top: 14px;
}

.selectAllctrl{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #A8A8B3;
    line-height: 35px;
    margin-top: 12px;
    overflow: hidden;
    padding-right: 30px;
}
.selectAllctrl>span{
    height: 35px;
    line-height: 35px;
}

.dialog-right{
        width: 291px;
     
}
.right-title{
    margin-top: 25px;
     height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #A8A8B3;
    padding-left: 14px;
}
.dialog-body .dialog-right .list{
    padding-left: 14px;
}
/* 隐藏横向滚动条 */
.dialog-body .dialog-left>>>.el-scrollbar__wrap::-webkit-scrollbar{
    display: none;
}

.dialog-body .dialog-right>>>.el-scrollbar__wrap::-webkit-scrollbar{
    display: none;
}
.obj{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 50px;
    height: 40px;
    line-height: 40px;
}
.obj .checkbox{
    padding-top:3px;
}
.boj1 .checkbox{
    display: none;
    cursor: pointer;
}
.boj1:hover>.checkbox{
    display: block;
}
</style>