<template>
  <div class="v-page">
    <div class="evaluation">
      <h2 class="v-title">评价列表</h2>
      <p
        class="e_item mb-12"
        v-for="v in evaluation_list"
        :key="v.id"
        :class="{active:v==active_evaluation}"
        @click="active_evaluation=v"
      >
        {{v.name}}
      </p>

      <el-empty class="v-empty" v-if="!evaluation_list.length" />
    </div>
    <template v-if="active_evaluation">
      <SearchTreeMenu
        ref="treeMenuRef"
        title="组织机构列表"
        :tree-data="org_list"
        @current-change="onChangeOrg"
      />
      <TableLayout class="flex-1" :column="column" :data="student_list">
      <template v-slot:appModule>{{active_evaluation.appModule}}</template>
        <template v-slot:evaluations="{row}">
          <div>
            <div v-for="indicator in active_evaluation.indicators" :key="indicator.id" class="flex-h">
              <div class="mr-12">{{indicator.name}}:</div>
              <el-rate :value="student_evaluation_map[row.id + indicator.id]?.score" @change="(score)=>toScore(row,indicator,score)"></el-rate>
            </div>
          </div>
        </template>
      </TableLayout>
    </template>
  </div>
</template>

<script>
import { SearchTreeMenu, TableLayout } from '@/components/layout'
import { createStudentEvaluationScoreApi, findAllEvaluationApi, findAllStudentEvaluationApi, updateStudentEvaluationScoreApi } from '@/api/evaluation'
import { findAllOrgApi } from '@/api/system/org'
import { findStudentByOrgIdApi } from '@/api/system/user'

export default {
  components: { SearchTreeMenu, TableLayout },

  data: () => ({
    active_evaluation: null,
    evaluation_list: [],
    org_list: null,
    student_list: [],
    student_evaluation_map: {}
  }),

  created () {
    this.column = [
      { prop: 'name', label: '学生姓名', width: '80px' },
      { prop: 'appModule', label: '应用模块', width: '120px' },
      { prop: 'evaluations', label: '评价项' }
    ]

    this.findAllOrg()
  },

  activated () {
    this.findAllEvaluation()
  },

  methods: {
    async findAllEvaluation () {
      const { data } = await findAllEvaluationApi()
      this.evaluation_list = data
    },

    async findAllOrg () {
      const { data } = await findAllOrgApi()
      this.org_list = data.toTree().tree
    },

    onChangeOrg (org) {
      this.activeOrgId = org.id
      this.findAllStudentEvaluation()
      this.findStudentByOrgId()
    },

    async findStudentByOrgId () {
      const { data } = await findStudentByOrgIdApi(this.activeOrgId)
      this.student_list = data
    },

    async findAllStudentEvaluation () {
      const { data } = await findAllStudentEvaluationApi(this.activeOrgId)
      for (const v of data) {
        this.$set(this.student_evaluation_map, v.studentId + v.indicatorId, v)
      }
    },

    async toScore (student, indicator, score) {
      const id = this.student_evaluation_map[student.id + indicator.id]?.id
      await (id ? updateStudentEvaluationScoreApi : createStudentEvaluationScoreApi)({
        id,
        score,
        studentId: student.id,
        indicatorId: indicator.id
      })
      this.findAllStudentEvaluation()
    }

  }
}
</script>

<style lang="scss" scoped>
.evaluation {
  margin-right: 18px;
  padding-right: 18px;
  width: 226px;
  border-right: 1px solid #e9e8ee;

  .v-title {
    margin-bottom: 26px;
  }

  .e_item {
    padding: 10px;
    background-color: rgba($color: $--color-primary, $alpha: 0.05);
    color: #666;
    border-right: 3px solid transparent;
    cursor: pointer;

    &:hover,
    &.active {
      border-color: #208ac6;
      color: #208ac6;
      background-color: #e7f7f7;
    }
  }
}
</style>
