<style>
  .TreeCked {
    margin: 20px 20px 0 20px;
    color: #A8A8B3;
    font-size: 14px;
  }

  .SendContent {
    display: flex;
    height: 450px;
  }

  .SendOne_Left {
    width: 60%;
  }

  .SendOne_Right {
    width: 40%;
  }

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

  .object_tit span {
    display: inline-block;
  }

  .objectList {
    width: 100%;
    height: 380px;
    overflow: auto;
    outline: none;
    margin-right: 15px;
  }

  .objectList::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .objectList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .objectList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

  .objectList ul {
    padding: 0;
  }

  .objectList ul li {
    list-style-type: none;
  }

  .objectList ul li div {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 3;
  }

  .objectList ul li a {
    display: block;
    padding-left: 16px;
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #181E33;
    text-decoration: none;
  }

  .objectList ul li a i {
    color: #cad5e6;
  }

  .manageTitl:hover {
    background: #F7FAFC;
  }

  .stuChilden {
    display: none;
    overflow-y: auto;
  }

  .showChild {
    display: block;
  }

  .selectedCon {
    height: 380px;
    overflow: auto;
  }

  .selectedCon ul {
    margin: 0;
    padding: 0;
  }

  .selectedCon ul li {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-left: 8px;
  }

  .selectedCon ul li i {
    font-size: 18px;
    cursor: pointer;
    display: none;
  }

  .selectedCon ul li:hover i {
    display: block;
  }

  .selectedCon ul li:hover {
    background-color: #F7FAFC;
  }

  .selectedCon::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .selectedCon::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .selectedCon::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width:800px;max-width:800px;">
      <q-card-section>
        <div class="text-h6">选择学员</div>
      </q-card-section>
      <div class="page-search row items-center">
        <div class="row wrap" style="width:100%;margin-left:30px;">
          <q-input @input="research()" class="col-3 q-mr-lg" clearable filled v-model="msg.GuestName" label="学员名称"
            @clear="research()" maxlength="20" />
          <q-input @input="research()" class="col-3 q-mr-lg" clearable filled v-model="msg.ClassName" label="班级名称"
            @clear="research()" maxlength="20" />
          <q-input @input="research()" class="col-3" clearable filled v-model="msg.ClassNo" label="班级编号"
            @clear="research()" maxlength="20" />
        </div>
      </div>
      <q-card-section class="q-pt-none scroll" style="max-height: 50vh">
        <div class="SendContent">
          <div class="SendOne_Left">
            <div class="object_tit">
              <span style="margin-left:20px;">班级/学生</span>
              <span style="cursor:pointer;" @click="Allchecked=!Allchecked">{{!Allchecked?"全选":"取消"}}</span>
            </div>
            <div class="objectList">
              <ul>
                <li v-for="(item,index) in dataList" :key="index">
                  <div class="manageTitl" @click="getChildShow(item)">
                    <a href="javascript:;" :title="item.Name">
                      <i class="iconfont icon-arrow-down" v-if="item.isShowChild"></i>
                      <i class="iconfont icon-arrow-right3" v-else></i>
                      {{item.Name}}
                    </a>
                    <span style="float:right;margin-right:35px;">
                      <el-checkbox v-model="item.IsCheck" @change="getFatherCheck(item)"></el-checkbox>
                    </span>
                  </div>
                  <ul class="stuChilden" :class="{'showChild':item.isShowChild}">
                    <li v-for="(subItem,subIndex) in item.SubList" :key="subIndex">
                      <div class="manageTitl" style="display:flex;justify-content:space-between;">
                        <div style="padding-left:40px;">{{subItem.Name}}</div>
                        <div style="padding-right:35px;">
                          <el-checkbox v-model="subItem.IsCheck" @change="getchildCheck(item)">
                          </el-checkbox>
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="SendOne_Right">
            <div class="TreeCked">
              已选 {{checkedStu.length}} 人
            </div>
            <div class="selectedCon">
              <ul>
                <li v-for="(item,index) in checkedStu" :key="index">
                  <div>{{item.Name}}</div>
                  <div>
                    <i class="iconfont icon-shanchu2" @click="delChecked(item,index)"></i>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="确认选择" color="accent q-px-md" style="font-weight:400 !important" @click="sureQuestionBank" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryClassStudentTree,
  } from '../../api/course/class';
  export default {
    props: {
      sendStudent: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        defaultProps: {
          children: 'SubList',
          label: 'Name'
        },
        msg: {
          GuestName: "", //学员名称
          ClassName: "", //班级名称
          ClassNo: "", //班级编号
        }, //查询参数
        loading: false, //表格加载进度条
        dataList: [], //数据列表
        checkedStu: [], //选中数据
        Allchecked: false, //全选、取消全选
      }
    },
    mounted() {
      this.initData();
      this.getClassStudentTree();
    },
    methods: {
      initData() {
        if (this.sendStudent && this.sendStudent.length > 0) {
          this.sendStudent.forEach(item => {
            this.checkedStu.push(item);
          })
        }
      },
      //点击父级全选或取消
      getFatherCheck(item) {
        if (item && item.SubList && item.SubList.length > 0) {
          item.SubList.forEach(y => {
            y.IsCheck = item.IsCheck;
            //取消选中 
            if (!y.IsCheck) {
              if (this.checkStuExists(y)) {
                var cIndex = this.checkedStu.findIndex(cItem => cItem.GuestId == y.GuestId);
                if (cIndex > -1 && cIndex < this.checkedStu.length) {
                  this.checkedStu.splice(cIndex, 1);
                }
              }
            }
          })
        }
        this.setStuChecked();
      },
      //点击子节点选中或取消
      getchildCheck(item) {
        let num = 0;
        if (item && item.SubList && item.SubList.length > 0) {
          item.SubList.forEach(x => {
            if (x.IsCheck) {
              num++
            }
          })
          if (num == item.SubList.length) {
            item.IsCheck = true;
          } else {
            item.IsCheck = false;
          }
        }
        //取消选中 
        if (!item.IsCheck) {
          if (this.checkStuExists(item)) {
            var cIndex = this.checkedStu.findIndex(cItem => cItem.GuestId == item.GuestId);
            if (cIndex > -1 && cIndex < this.checkedStu.length) {
              this.checkedStu.splice(cIndex, 1);
            }
          }
        }
        this.setStuChecked();
      },
      //删除选中名单
      delChecked(item, index) {
        this.checkedStu.splice(index, 1);
        this.dataList.forEach(rootItem => {
          if (rootItem.SubList && rootItem.SubList.length > 0) {
            var chooseClassId = 0;
            rootItem.SubList.forEach(sItem => {
              if (sItem.GuestId == item.GuestId) {
                sItem.IsCheck = false;
                chooseClassId = sItem.ClassId
              }
            })
            if (chooseClassId > 0 && chooseClassId == rootItem.ClassId) {
              rootItem.IsCheck = false;
            }
          }
        })
        this.setStuChecked();
      },
      //重新查询
      research(type) {
        this.getClassStudentTree();
      },
      //获取题库分页列表
      getClassStudentTree() {
        queryClassStudentTree(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
            this.dataList.forEach(x => {
              x.isShowChild = false;
            })
          }
        })
      },
      //设置选中或取消选中
      setStuChecked() {
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(rootItem => {
            if (rootItem.SubList && rootItem.SubList.length > 0) {
              rootItem.SubList.forEach(sItem => {
                //选中
                if (sItem.IsCheck) {
                  if (!this.checkStuExists(sItem)) {
                    this.checkedStu.push(sItem);
                  }
                }
              })
            }
          })
        }
      },
      //检查用户是否存在
      checkStuExists(item) {
        var isExists = false;
        if (this.checkedStu && this.checkedStu.length > 0) {
          this.checkedStu.forEach(cItem => {
            if (!isExists && cItem.GuestId == item.GuestId) {
              isExists = true;
            }
          })
        }
        return isExists;
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
      },
      //确认选择
      sureQuestionBank() {
        this.$emit('success', this.checkedStu);
      },
      //点击父级
      getChildShow(item) {
        item.isShowChild = !item.isShowChild;
        this.$forceUpdate();
      }
    },
    watch: {
      sendStudent: {
        handler(newValue) {
          this.initData();
        },
        deep: true
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
