<template>
  <div class="evaluation-student">
    <selfStepVue
      :activeStep="activeStep?.key"
      @check="check"
      :successList="successList"
      :stepData="stepData"
    >
      <template v-slot:xxx="scoped">
        <span style="color: #cccccc">{{
          (scoped.item.role === $store.user.roleId && "由我评价") || ""
        }}</span></template
      >
    </selfStepVue>
    <el-divider></el-divider>
    <div class="user-list">
      <div
        class="user-list-item"
        v-for="item in userList"
        :key="item.studentId"
      >
        <span class="user-name item_text"> {{ item.name }}:</span>
        <span class="user-id item_text"> 账号：{{ item.account }}</span>
        <span class="user-id item_text"> 组织：{{ item.orgName }}</span>
        <el-rate
          :disabled="activeStep.role !== $store.user.roleId"
          @change="rateChange(item)"
          v-model="item[activeStep.key]"
          show-score
        ></el-rate>
      </div>
    </div>
  </div>
</template>

<script>
import selfStepVue from '../evaluation-setting/components/selfStep.vue'
import {
  evaluationApi,
  getssEvaluationIndicatorApi,
  getAllTakeChargeStudentApi
} from '@/api/evaluation/index'

export default {
  data () {
    return {
      activeStep: null,
      successList: [],
      userList: [],
      stepData: [
        { title: '学员队', key: 1, icon: 'el-icon-orange' },
        { title: '教员', key: 2, icon: 'el-icon-user' },
        { title: '课程', key: 3, icon: 'el-icon-reading' },
        { title: '原单位', key: 4, icon: 'el-icon-school' },
        { title: '毕业后', key: 5, icon: 'el-icon-finished' }
      ],
      getAllTakeChargeStudentTimer: null
    }
  },
  activated () {
    this.getInfo()
    // 拉取学员评价数据，防止数据过旧，导致提交时出现问题！

    this.getAllTakeChargeStudent()
    this.setInterval()
  },
  deactivated () {
    this.clearInterval()
  },

  components: {
    selfStepVue
  },
  methods: {
    check (item) {
      if (this.activeStep === item.key) {
        this.activeStep = null
        return
      }
      this.activeStep = item
    },
    async rateChange (item) {
      if (this.getAllTakeChargeStudentTimer) {
        this.clearInterval()
      }

      item.evaluation = []
      for (const key in item) {
        if (!Number.isNaN(+key)) {
          item.evaluation.push(`${key}-${item[key]}`)
        }
      }
      console.log(item.evaluation, item.evaluation.join(','))
      item.evaluation = item.evaluation.join(',')
      await evaluationApi(item)
      this.setInterval()
    },
    async getInfo () {
      const { data } = await getssEvaluationIndicatorApi()
      this.stepData = data.evaluationRule || []
      if (this.stepData.length <= 0) {
        this.$message.error('请将评价设置补充完整后再试！')
      }
      this.activeStep = this.stepData[0]
    },
    async getAllTakeChargeStudent () {
      const { data } = await getAllTakeChargeStudentApi()
      data.forEach((item) => {
        item.evaluation
          ? (item.evaluationArray = item.evaluation.split(','))
          : (item.evaluationArray = [])
        item.evaluationArray.forEach((eva) => {
          const keyValue = eva.split('-')
          item[keyValue[0]] = keyValue[1]
        })
      })
      this.userList = data
    },
    setInterval () {
      this.getAllTakeChargeStudentTimer = setInterval(() => {
        this.getAllTakeChargeStudent()
      }, 5000)
    },
    clearInterval () {
      clearInterval(this.getAllTakeChargeStudentTimer)
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluation-student {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.user-list {
  width: 100%;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  overflow: auto;
}
.item_text {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-list-item {
  margin-bottom: 10px;
  box-shadow: 0 0 3px 3px rgba(243, 241, 241, 0.596);
  width: 15%;
  padding: 10px;
  margin-right: 20px;
  height: 100px;
  border: 1px solid #ebeef5;
  .user-name {
    font-size: 15px;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .user-id {
    margin-bottom: 5px;
    display: block;
    font-size: 13px;
  }
}
</style>
