<template>
  <div>
    <div class="gy-form inline" style="--fix:70px;">
      <div class="gy-form-item mb">
        <div class="gy-label middle right">班级选择：</div>
        <el-cascader :options="org_list"
          :props="{ checkStrictly: true, value: 'id', label: 'name', children, emitPath: false }" placeholder="请选择"
          clearable v-model="current_org" @change="getStudents(current_org)" :filter-method="filterMethod">
        </el-cascader>
      </div>
      <div class="gy-form-item mb">
        <QueryInput v-model="search" @query="findStudentList"></QueryInput>
      </div>
    </div>
    <div class="gy-transfer gy-form">
      <div class="left-list list  gy-check">
        <div class="header">
          <el-checkbox v-model="left_check_all" @change="checkAll($event,'left')"></el-checkbox>
          <div>
            待选学员
          </div>
        </div>
        <el-checkbox-group v-model="left_checked" class="check-list">
          <el-checkbox v-for="(item) in left_list" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="feature-group">
        <el-button type="primary" @click="toRight">
          添加学员<i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <el-button type="primary"  @click="toLeft">
          <i class="el-icon-arrow-left "></i>删除学员
        </el-button>
      </div>
      <div class="right-list list  gy-check">
        <div class="header ">
          <el-checkbox v-model="right_check_all" @change="checkAll($event,'right')"></el-checkbox>
          <div>
            已选学员
          </div>
        </div>
        <el-checkbox-group v-model="right_checked" class="check-list">
          <el-checkbox v-for="(item) in right_list" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>

    </div>
  </div>
</template>

<script>
/**
 * 学员选择器
 */
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import {
  //  getMyOrg,
  getAllOrg, getStudentByOrgId
} from '@/api/assessment-evaluation/exam'
import { QueryInput } from '@/components/widget'
export default {
  components: { QueryInput },
  data: () => ({
    /**
     * 机构数据列表
     */
    org_list: [],
    /**
     * 右侧列表中的数据
     */
    right_list: [],
    /**
     * 左侧剩余未选中的数据
     */
    left_list: [],
    /**
     * 左侧被选中的数据
     */
    left_checked: [],
    /**
     * 右侧被选中的数据
     */
    right_checked: [],
    /**
     * 左侧列表是否全选
     */
    left_check_all: false,
    /**
     * 右侧列表是否全选
     */
    right_check_all: false,
    /**
     * 当前筛选的机构
     */
    current_org: null,
    /**
     * 请求到的所有学员数据
     */
    all_student: [],
    /**
     * 搜索框内容绑定
     */
    search: '',
    /**
     * 已选择的学员信息
     */
    selected_students: []
  }),
  props: {
    value: {
      default: _ => []
    },
    transOptions: {
      default: _ => []
    }
  },
  watch: {
    // value: {
    //   deep: true,
    //   immediate: true,
    //   handler (nv) {
    //     this.right_list = nv
    //   }
    // },
    /**
     * 右侧列表被修改，抛出所有学员id
     */
    right_list: {
      deep: true,
      immediate: true,
      handler (nv) {
        this.$emit('input', nv?.map(item => item.id))
      }
    },
    /**
     * 初始化时从父组件传入的数据放入右侧列表中
     */
    transOptions: {
      deep: true,
      immediate: true,
      handler (nv) {
        this.right_list = nv
      }
    }
  },
  activated () {
    this.initAllList()
    this.initAllChecked()
    this.current_org = null
    this.getAllOrgs()
  },
  methods: {
    /**
     * 全选操作
     */
    checkAll (e, type) {
      if (type === 'left') {
        this.left_checked = e ? this.left_list.map(item => item.id) : []
      } else if (type === 'right') {
        this.right_checked = e ? this.right_list.map(item => item.id) : []
      }
    },
    /**
     * 移动到右侧操作回调
     */
    toRight () {
      for (let index = this.left_list.length - 1; index >= 0; index--) {
        const element = this.left_list[index]
        const leftItemIsChecked = this.left_checked.findIndex(ioi => ioi === element.id)
        if (leftItemIsChecked !== -1) {
          this.right_list.unshift(element)
          this.left_list.splice(index, 1)
        }
      }
      this.initAllChecked()
      // this.left_checked
    },
    /**
     * 移动到左侧列表按钮回调
     */
    toLeft () {
      const length = this.right_list.length - 1
      for (let index = length; index >= 0; index--) {
        const element = this.right_list[index]
        const rightItemIsChecked = this.right_checked.findIndex(ioi => ioi === element.id)

        if (rightItemIsChecked !== -1) {
          if (+this.current_org === +element.orgId) {
            this.left_list.unshift(element)
          }
          this.right_list.splice(index, 1)
        }
      }
      this.initAllChecked()
    },
    /**
     * 请求所有机构
     */
    async getAllOrgs () {
      const { data } = await getAllOrg()
      const { tree } = data.toTree()
      this.org_list = Object.freeze(tree)
    },
    /**
     * 初始化左右列表
     */
    initAllList () {
      this.left_list = []
      this.right_list = []
      this.search = ''
    },
    /**
     * 清空所有选中
     */
    initAllChecked () {
      this.left_checked = []
      this.right_checked = []
      this.left_check_all = false
      this.right_check_all = false
    },
    /**
     * 根据机构获取其中的学员
     */
    async getStudents (orgId) {
      if (!orgId) {
        this.left_list = []
        return
      }
      const { data } = await getStudentByOrgId(orgId)
      data.forEach(item => {
        item.orgId = orgId
      })
      this.initAllChecked()
      // 过滤右表已存在的老学员
      this.right_list.forEach(item => {
        const hasThisStudent = data.findIndex(oi => oi.id === item.id)
        if (hasThisStudent !== -1) {
          data.splice(hasThisStudent, 1)
        }
      })
      this.left_list = data
    },
    /**
     * 获取所有学员
     */
    async findStudentList () {
      if (!this.current_org) return this.$message.error('请先选择一个班级')
      this.left_list = this.left_list.sort((a, b) => {
        if (a.name.indexOf(this.search) !== -1) {
          return -1
        } else if (b.name.indexOf(this.search) !== -1) {
          return 1
        }
        return 0
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.gy-transfer {
  display: flex;
  align-items: center;
  min-width: 370px;
  .check-list{
    padding: 0 10px;
    display: flex;
    flex:1;
    overflow-y: scroll;
    flex-direction: column;
    .el-checkbox{
      padding: 5px 0 ;
    }
  }
  .list {
    width: 150px;
    // border: 1px solid $--color-primary;
    box-shadow: 0 0 0 1px $--color-primary , 1px 1px 5px 1px rgba(66,66,66,0.3);
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .header {
      height: 30px;
      background: $--color-primary;
      display: flex;
      align-items: center;
      padding: 0 10px;
      &>div {
        color:#fff;
        font-weight: bold;
        margin-left: 10px;
      }
    }
  }
}

.feature-group {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  width: 120px;
  padding: 0 10px;
  ::v-deep {
    .el-button+.el-button{
      margin-top: 30px;
    }
    .el-button {
      margin: 0;
      height: 30px;
      padding: 0;
      border-radius: 15px;
      &+&{
      }
      .el-icon-arrow-left,
      .el-icon-arrow-right {
        padding: 2px;
        margin: 0;
        border-radius: 50%;
        background: #fff;
        color: $--color-primary;
        display: inline-block;
      }
      .el-icon-arrow-left{
        margin-right: 3px;
      }
      .el-icon-arrow-right{
        margin-left: 3px;
      }

    }

  }
}
</style>
