<template>
  <div class="multiple-select-student">
    <div class="selected-list">
      <div
        class="selected-item"
        v-for="(item, sindex) in seletedList"
        :key="item.key"
      >
        <i
          class="selected-remove el-icon-close"
          @click="removeSelectedStudent(sindex)"
        ></i>
        <p class="selected-label">{{ item.label }}</p>
      </div>
    </div>
    <div class="selected-add" v-if="showAdd" @click="toSelect">
      <i class="el-icon-plus"></i>
      <span>选择考生</span>
    </div>

    <el-dialog
      class="student-list-dialog"
      :visible.sync="modalIsShow"
      title="选择考生"
      width="640px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <div class="student-list">
        <div
          :class="['student-item', { 'student-item-selected': item.selected }]"
          v-for="item in studentList"
          :key="item.key"
          @click="switchSelectStudent(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "multiple-select-student",
  props: {
    dataKey: {
      type: String,
      required: true,
    },
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
    seletedIds: {
      type: Array,
      default() {
        return [];
      },
    },
    showAdd: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.initData();
  },
  data() {
    return {
      seletedList: [],
      studentList: [],
      newSeletedIds: [],
      modalIsShow: false,
    };
  },
  methods: {
    initData() {
      this.studentList = this.dataList.map((item) => {
        return {
          ...item,
          key: item[this.dataKey],
          label: `${item.identity}  ${item.courseName}(${item.courseCode})  ${item.name}`,
          selected: this.seletedIds.includes(item[this.dataKey]),
        };
      });
      this.updateSelectedStudent();
    },
    updateSelectedStudent() {
      this.seletedList = this.studentList
        .filter((item) => item.selected)
        .map((item) => {
          return { ...item };
        });
      this.newSeletedIds = this.seletedList.map((item) => item[this.dataKey]);
    },
    initSelectedStudent() {
      this.studentList.map((item) => {
        item.selected = this.newSeletedIds.includes(item[this.dataKey]);
      });
    },
    removeSelectedStudent(sindex) {
      if (this.seletedList.length <= 1 && !this.showAdd) {
        this.$message.error("当前只剩下一条信息，不可再删！");
        return;
      }
      this.seletedList.splice(sindex, 1);
      this.newSeletedIds = this.seletedList.map((item) => item[this.dataKey]);
      this.$emit("selected", this.newSeletedIds);
    },
    switchSelectStudent(student) {
      student.selected = !student.selected;
    },
    toSelect() {
      this.initSelectedStudent();
      this.modalIsShow = true;
    },
    closeDialog() {
      this.modalIsShow = false;
    },
    confirm() {
      this.modalIsShow = false;
      this.updateSelectedStudent();
      this.$emit("selected", this.newSeletedIds);
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple-select-student {
  .selected-list {
    background: #f0f4f9;
    border-radius: 6px;
    border: 1px solid #e8edf3;
    padding: 10px;
    min-height: 180px;
  }
  .selected-item {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 6px 15px 6px 30px;
    border-radius: 6px;
    color: #202b4b;
    margin-bottom: 4px;
    line-height: 20px;

    > .selected-remove {
      position: absolute;
      display: block;
      font-size: 14px;
      color: rgba(189, 200, 218, 1);
      left: 8px;
      top: 9px;
      cursor: pointer;

      &:hover {
        color: #fe5863;
      }
    }
    > .selected-label {
      margin: 0;
      font-weight: 400;
      white-space: pre-wrap;
    }
  }
  .selected-add {
    font-weight: 600;
    color: #1886fe;
    cursor: pointer;
    > i {
      margin-right: 5px;
    }
  }
}
.student-list-dialog {
  .student-item {
    border: 1px dashed #e0e0e0;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    color: #999;
    white-space: pre-wrap;
    cursor: pointer;

    &:hover {
      border-color: #1886fe;
    }

    &-selected {
      border-style: solid;
      border-color: #1886fe;
      color: #1886fe;
    }
  }
}
</style>
