<template>
  <el-dialog
    :visible="visible"
    :title="title"
    :close-on-click-modal="false"
    :show-close="false"
    width="780px"
    append-to-body
  >
    <el-row v-loading="loading">
      <el-col :span="12">
        <div style="line-height: 28px">{{ $t('Student.selectdialog.52049bqhms40') }}</div>
        <div class="treebox">
          <el-tabs v-model="tabName" type="border-card">
            <el-tab-pane v-if="inSchoolData" :label="$t('Student.selectdialog.52049bqho540')" name="inschool">
              <inschool-tree
                v-model="tagValue"
                :multiple="multiple"
                :mixed="mixed"
                :closeTag="closeTag"
                :academicYearData="academicYearData"
                :treeData="inSchoolData"
                :tags="tags"
                :tagDict="tagDict"
              />
            </el-tab-pane>
            <el-tab-pane v-if="prepareData" :label="$t('Student.selectdialog.52049bqhopk0')" name="potential">
              <potential-tree
                v-model="tagValue"
                :multiple="multiple"
                :mixed="mixed"
                :visible="visible"
                :closeTag="closeTag"
                :treeData="prepareData"
                :tags="tags"
                :tagDict="tagDict"
              />
            </el-tab-pane>
            <el-tab-pane v-if="potentialData" :label="$t('Student.selectdialog.52049bqhovk0')" name="prepare">
              <prepare-tree
                v-model="tagValue"
                :multiple="multiple"
                :mixed="mixed"
                :visible="visible"
                :closeTag="closeTag"
                :treeData="potentialData"
                :tags="tags"
                :tagDict="tagDict"
              />
            </el-tab-pane>
            <el-tab-pane v-if="alumnusData" :label="$t('Student.selectdialog.52049bqhp0g0')" name="alumnus">
              <alumnus-tree
                v-model="tagValue"
                :multiple="multiple"
                :mixed="mixed"
                :visible="visible"
                :closeTag="closeTag"
                :treeData="alumnusData"
                :tags="tags"
                :tagDict="tagDict"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="line-height: 28px">{{ $t('Student.selectdialog.52049bqhp600') }}</div>
        <div class="tagbox">
          <div class="tagbox-content">
            <el-table
              ref="multipleTable"
              :data="tagValue"
              tooltip-effect="dark"
              style="width: 100%"
              :show-header="false"
            >
              <el-table-column width="40">
                <template slot-scope="scope">
                  <span class="tag-image"><img :src="scope.row.PhotoImageUrl" style="object-fit: cover" /></span>
                </template>
              </el-table-column>
              <el-table-column prop="label" width="*">
                <template slot-scope="scope"> {{ scope.row.Label }}</template>
              </el-table-column>
              <el-table-column prop="value" width="50">
                <template slot-scope="scope">
                  <el-button
                    @click="handleCloseTag(scope.row.Type, scope.row.Id)"
                    icon="el-icon-close"
                    size="small"
                    circle
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()" size="small">{{ $t('Student.selectdialog.52049bqhpdk0') }}</el-button>
      <el-button @click="handleOK()" size="small" type="primary">{{
        $t('Student.selectdialog.52049bqhpmo0')
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import InschoolTree from './inschooltree.vue'
import PotentialTree from './potentialtree.vue'
import PrepareTree from './preparetree.vue'
import AlumnusTree from './alumnustree.vue'

export default {
  name: 'selectdialog',
  components: {
    InschoolTree,
    PotentialTree,
    PrepareTree,
    AlumnusTree
  },
  props: {
    value: { required: true },
    // visible: { type: Boolean, default: false },
    multiple: Boolean,
    mixed: Boolean, //混合选择
    academicYearData: { dafault: null },
    classData: { default: null },
    studentData: { default: null },
    tags: { default: null },
    tagDict: { default: null },
    tabs: {
      default: () => {
        return ['inschool', 'potential', 'prepare', 'alumnus']
      }
    }
  },
  data() {
    return {
      title: this.$t('Student.selectdialog.52049bqhprs0'),
      tagValue: null,
      tabName: '',
      closeTag: null,
      inSchoolData: null,
      prepareData: null,
      potentialData: null,
      alumnusData: null,
      visible: false,
      loading: false
    }
  },
  computed: {},
  methods: {
    deepClone(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj)
      return objClone
    },
    open() {
      this.visible = true
      this.loading = true
      this.loadData().then(() => {
        this.loading = false
      })

      this.tabName = this.tabs.length > 0 ? this.tabs[0] : ''
      this.tagValue = []
      this.tagValue = this.deepClone(this.value)
    },
    handleClose() {
      this.visible = false
      this.tagValue = []
      this.inSchoolData = null
      this.prepareData = null
      this.potentialData = null
      this.alumnusData = null
      this.tabName = null
      // this.$emit('update:visible', false)
    },
    handleOK() {
      this.$emit('input', this.tagValue)
      this.tagValue = []
      this.inSchoolData = null
      this.prepareData = null
      this.potentialData = null
      this.alumnusData = null
      this.tabName = null
      this.visible = false
      this.$emit('callback')
      // this.$emit('update:visible', false)
    },
    loadData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.getInSchoolData(this.academicYearData, this.classData, this.studentData)
          this.getPrepareData(this.studentData)
          this.getPotentialData(this.studentData)
          this.getAlumnusData(this.studentData)
          resolve()
        }, 1000)
      })
    },

    getInSchoolData(academicYearData, classData, studentData) {
      let selectValue = this.tagValue
      let buildStudentNode = function (classId) {
        let studentNode = []
        studentData
          .filter(node => {
            return node.classId === classId && node.status == 1
          })
          .forEach(node => {
            studentNode.push({
              id: node.id,
              value: `student_${node.id}`,
              label: node.label,
              parentId: `class_${classId}`,
              type: 'student',
              photoImageUrl: node.photoImageUrl,
              children: []
            })
          })
        return studentNode
      }

      let buildClassNode = function (academicYearId) {
        let classNode = []
        classData
          .filter(node => {
            return node.yearId === academicYearId
          })
          .forEach(node => {
            let childrenNode = buildStudentNode(node.id)
            let isSelected = selectValue.includes(`class_${node.id}`)
            node.childrenCount = childrenNode.length
            classNode.push({
              id: node.id,
              value: `class_${node.id}`,
              label: `${node.label}(${childrenNode.length})`,
              type: 'class',
              selected: isSelected,
              children: childrenNode
            })
          })
        return classNode
      }

      let buildAcademicYearNode = function () {
        let academicYearNode = []
        academicYearData.forEach(item => {
          let childrenNode = buildClassNode(item.id)
          if (childrenNode.length > 0) {
            academicYearNode.push({
              id: item.id,
              value: `year_${item.id}`,
              label: item.label,
              type: 'year',
              disabled: true,
              children: childrenNode
            })
          }
        })
        return academicYearNode
      }

      this.inSchoolData = this.tabs.includes('inschool') ? buildAcademicYearNode() : null
    },
    getPrepareData(studentData) {
      let buildStudentNode = function () {
        let studentNode = []
        studentData
          .filter(node => {
            return node.status === 2
          })
          .forEach(node => {
            studentNode.push({
              id: node.id,
              value: `student_${node.id}`,
              label: node.label,
              notes: node.notes,
              type: 'student',
              photoImageUrl: node.photoImageUrl,
              children: []
            })
          })
        return studentNode
      }
      this.prepareData = this.tabs.includes('prepare') ? buildStudentNode() : null
    },
    getPotentialData(studentData) {
      let _this = this
      let classData = this.classData
      let academicYearData = this.academicYearData
      let getClassName = function (classId) {
        if (!classId) {
          return _this.$t('Student.selectdialog.52049bqhpwk0')
        }
        let _class = classData.find(item => item.id == classId)
        if (_class) {
          let academicYear = academicYearData.find(item => item.id == _class.yearId)
          return `(${academicYear.label}) ${_class.label}`
        }
        return _this.$t('Student.selectdialog.52049bqhpwk0')
      }
      let buildStudentNode = function () {
        let studentNode = []
        studentData
          .filter(node => {
            return node.status === 3
          })
          .forEach(node => {
            let notes = getClassName(node.classId)
            studentNode.push({
              id: node.id,
              value: `student_${node.id}`,
              label: node.label,
              notes: notes,
              type: 'student',
              photoImageUrl: node.photoImageUrl,
              children: []
            })
          })
        return studentNode
      }

      this.potentialData = this.tabs.includes('potential') ? buildStudentNode() : null
    },
    getAlumnusData(studentData) {
      let buildStudentNode = function () {
        let studentNode = []
        studentData
          .filter(node => {
            return node.status === 4
          })
          .forEach(node => {
            studentNode.push({
              id: node.id,
              value: `student_${node.id}`,
              label: node.label,
              notes: node.notes,
              type: 'student',
              photoImageUrl: node.photoImageUrl,
              children: []
            })
          })
        return studentNode
      }

      this.alumnusData = this.tabs.includes('alumnus') ? buildStudentNode() : null
    },
    getImageUrl(item) {
      if (item.Type == 'class') {
        return '/img/org.png'
      }
      if (item.Type == 'student') {
        return '/img/role.png'
        // let student = this.studentData.find(user => user.Id == item.Id || user.id == item.Id)
        // return student.imageUrl ? student.imageUrl : student.ImageUrl
      }
      return ''
    },
    handleCloseTag(type, id) {
      this.closeTag = this.tagValue.find(tag => tag.Id == id && tag.Type == type)
      let index = this.tagValue.findIndex(tag => tag.Id == id && tag.Type == type)
      this.tagValue.splice(index, 1)
      if (!this.multiple) {
        this.currentNodeKey = null
      }
    }
  },
  watch: {}
}
</script>

<style lang="scss">
.tag-group {
  padding: 5px;
  .el-tag {
    margin: 2px;
  }
}
.el-tree {
  background: none;
}
.treebox {
  margin-right: 5px;
  // border: 1px solid #ebeef5;
  overflow: hidden;
  background-color: #f4f6f8;
  .el-tabs__content {
    padding: 5px;
  }
  .treebox-header {
    margin: 5px 0;
    height: 28px;
    .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
  .treebox-tags {
    height: 28px;
    margin: 5px 0;
  }
  .treebox-content {
    height: 351px;
    overflow: auto;
  }
}

.tagbox {
  // margin-left: 5px;
  border: 1px solid #dcdfe6;
  padding: 5px;
  overflow: hidden;
  background-color: #f4f6f8;

  .tagbox-content {
    height: 428px;
    overflow: auto;

    .tag-image {
      display: block;
      overflow: hidden;
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;

      img {
        object-fit: cover;
        display: block;
        height: 100%;
        vertical-align: middle;
      }
    }

    .el-tag {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 2px 0 2px 6px;
    }
  }
}
</style>
