<style scoped>
  .jobEvaluationDate>>>.el-date-editor {
    background: transparent !important;
    border: none !important;
    height: 26px !important;
  }

  .jobEvaluationDate>>>.el-input__inner {
    background: transparent !important;
    border: none !important;
    height: 26px !important;
  }

  .jobTable {
    width: 100%;
    text-align: center;
  }

  .jobTable tr td {
    height: 40px;
    color: #000;
    border: 1px solid #d1d1d1;
  }

  .jobTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-col-gutter-md">
        <div class="col-2 jobEvaluationDate q-mr-lg">
          <q-field filled stack-label dense label="考核月份">
            <template v-slot:control>
              <el-date-picker v-model="teacherDate" value-format="yyyy-MM" size="mini" type="month"
                placeholder="选择考核月份">
              </el-date-picker>
            </template>
          </q-field>
        </div>
        <div class="col-2">
          <q-select filled stack-label option-value="Id" option-label="EmployeeName" v-model="saveObj.TeacherAccountId"
            ref="Teacher_Id" :options="TeacherList" label="老师" dense class="col-3 q-pr-lg q-pb-lg" emit-value
            map-options @input="getInfo" />
        </div>
        <div class="col-2" v-if="teacherDate&&saveObj.TeacherAccountId!=''&&saveObj.TeacherAccountId>0&&isAuth">
          <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
            @click="saveTeacherAssessment" />
        </div>
      </div>
    </div>
    <div class="page-content" v-if="teacherDate&&saveObj.TeacherAccountId!=''&&saveObj.TeacherAccountId>0&&isAuth">
      <table class="jobTable" style="border-collapse:collapse;">
        <tbody v-for="(item,index) in saveObj.DetailsList" :key="index">
          <tr>
            <th width="150">类别</th>
            <th width="150">内容</th>
            <th v-for="(sItem,tindex) in item.SubtypeList[0].OptionList" :key="tindex">
              <div>{{sItem.LevelTitle}}</div>
              <div>{{sItem.LevelScore}} 分</div>
            </th>
            <th width="200">考核</th>
          </tr>
          <tr>
            <td :rowspan="item.SubtypeList.length+1">{{item.TypeName}}</td>
          </tr>
          <tr v-for="(sItem,sIndex) in item.SubtypeList" :key="sIndex">
            <td>{{sItem.SubTypeName}}</td>
            <td v-for="(cItem,cIndex) in sItem.OptionList" style="position:relative;" :key="cIndex">
              <template v-if="cItem.LevelDesc!=''&&cItem.LevelScore>0">
                <el-tooltip class="item" effect="dark" :content="cItem.LevelDesc" placement="top-start">
                  <i style="position:absolute;left:3px;top:3px;" class="iconfont icon-bangzhu"></i>
                </el-tooltip>
                <q-checkbox v-model="cItem.IsCheck" @input="changeStatus(sItem,cItem)" val="teal" color="green" />
              </template>
            </td>
            <td>{{sItem.CheckScore}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    queryTeacherAssessmentInfo,
    setTeacherAssessmentInfo,
  } from "../../api/teacher/index";
  export default {
    meta: {
      title: "中教每月工作考核表"
    },
    components: {},
    data() {
      return {
        TeacherList: [], //关联教师下拉数据
        teacherDate: "", //考核月份
        saveObj: {
          Id: 0, //主键编号
          YearStr: 0, //年份
          MonthStr: 0, //月份
          TeacherAccountId: "", //教师账号表编号
          TeacherScore: 0, //教学主管打分
          JiaoWuScore: 0, //教务主管打分
          TotalScore: 0, //总分
          DetailsList: [],
          CheckType: 0, //1-教学主管，2-教务主管
          IsJiaoWuFinish: 0, //教务主管是否完成打分
          IsTeacherFinish: 0, //教学主管是否完成打分
        },
        isAuth: false, //是否有权限
        saveLoading: false,
      }
    },
    created() {
      this.GetTeacherList();
    },
    mounted() {
      let today = new Date();
      var yearStr = today.getFullYear().toString();
      var monthStr = (today.getMonth() + 1).toString();
      this.teacherDate = yearStr + '-' + monthStr;
      if (this.$route.query) {
        if (this.$route.query.Id) {
          this.saveObj.Id = this.$route.query.Id;
        }
        if (this.$route.query.TeacherAccountId) {
          this.saveObj.TeacherAccountId = this.$route.query.TeacherAccountId
        }
        if (this.$route.query.YearStr && this.$route.query.MonthStr) {
          this.teacherDate = this.$route.query.YearStr + '-' + this.$route.query.MonthStr;
        }
        this.getInfo();
      }
    },
    methods: {
      changeStatus(subItem, optionItem) {
        if (optionItem.IsCheck) {
          subItem.OptionList.forEach(sItem => {
            sItem.IsCheck = false;
          });
          optionItem.IsCheck = true;
          subItem.CheckId = optionItem.LevelId;
          subItem.CheckScore = optionItem.LevelScore;
        } else {
          subItem.CheckId = 0;
          subItem.CheckScore = 0;
        }
      },
      //获取教师下拉
      GetTeacherList() {
        var qMsg = {
          IsLeave: 1,
          AccountTypeStr: 2,
          QDeptIds: "8,14"
        };
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      //获取教师考核数据
      getInfo() {
        if (this.teacherDate) {
          this.saveObj.YearStr = this.teacherDate.split('-')[0];
          this.saveObj.MonthStr = this.teacherDate.split('-')[1];
        }
        var qMsg = {
          TeacherAccountId: this.saveObj.TeacherAccountId,
          YearStr: this.saveObj.YearStr,
          MonthStr: this.saveObj.MonthStr,
          Id: 0,
        };
        if (this.$route.query) {
          if (this.$route.query.Id) {
            qMsg.Id = this.$route.query.Id;
          }
        }
        queryTeacherAssessmentInfo(qMsg).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            if (tempData.CheckType > 0) {
              this.isAuth = true;
              this.saveObj.Id = tempData.Id;
              this.saveObj.YearStr = tempData.YearStr;
              this.saveObj.MonthStr = tempData.MonthStr;
              this.saveObj.TeacherAccountId = tempData.TeacherAccountId;
              this.saveObj.TeacherScore = tempData.TeacherScore;
              this.saveObj.JiaoWuScore = tempData.JiaoWuScore;
              this.saveObj.TotalScore = tempData.TotalScore;
              this.saveObj.CheckType = tempData.CheckType;
              this.saveObj.DetailsList = tempData.DetailsList;
              this.saveObj.IsTeacherFinish = tempData.IsTeacherFinish;
              this.saveObj.IsJiaoWuFinish = tempData.IsJiaoWuFinish;
            } else {
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: "您没有权限操作!"
              });
            }
          }
        })
      },
      //保存老师考核信息
      saveTeacherAssessment() {
        if (this.teacherDate) {
          this.saveObj.YearStr = this.teacherDate.split('-')[0];
          this.saveObj.MonthStr = this.teacherDate.split('-')[1];
        }
        this.saveLoading = true;
        setTeacherAssessmentInfo(this.saveObj).then(res => {
          this.saveLoading = false
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top',
              actions: [{
                label: "点击查看",
                color: "primary",
                handler: () => {
                  this.$router.push({
                    path: "/teacher/appraisalList",
                    query: {

                    }
                  });
                }
              }],
            })
          }
        }).catch(() => {
          this.saveLoading = false
        })
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>