<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
    height: 28px !important;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col-2 Sysuser_Date q-mr-lg">
        <q-field filled dense>
          <template v-slot:control>
            <el-date-picker v-model="queryDate" style="width:100%" value-format="yyyy-MM" @change="refreshPage()"
              size="mini" type="month" placeholder="选择年月">
            </el-date-picker>
          </template>
        </q-field>
      </div>
      <div class="col-2" v-if="isHaveEdit">
        <q-select filled v-model="msg.TeacherAccountId" dense use-input label="教师" :options="MyTeacherListData"
          option-label="EmployeeName" @input="refreshPage" clearable option-value="Id" emit-value map-options />
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table sticky-right-column-table" separator="none" :data="dataList" :columns="columns"
        row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">教师月度考核列表</div>
          <q-space />
          <div class="page-option">
            <q-btn v-if="isHaveEdit" color="accent" size="sm" class="q-mr-md" icon="add" label="考核"
              @click="goAssessTable()" />
          </div>
        </template>

        <template v-slot:body-cell-OptionId="props">
          <q-td :props="props">
            <!-- <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="submitApproval(props.row)"
              label="提交审批" v-if="props.row.AuditStatus==0&&props.row.TeacherSignDate" />
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="showForm(props.row,1)"
              label="评价" />
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="showForm(props.row,2)"
              label="建议" /> -->
            <q-btn v-if="isHaveEdit" flat size="xs" icon="edit" color="accent" style="font-weight:400"
              @click="goAssessTable(props.row)" label="编辑" />
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="gotoDetail(props.row)"
              label="详情" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
      <behaviorForm v-if="isShowBehavior" :save-obj="objOption" @close="closeForm" @success="refreshPage">
      </behaviorForm>
      <helpForm v-if="isShowHelp" :save-obj="objOption" @close="closeForm" @success="refreshPage"></helpForm>
    </div>
  </div>
</template>
<script>
  import {
    queryTeacherAssessmentPage,
    SubmitTeacherAssessmentApproval
  } from '../../api/teacher/index';
  import {
    queryEmployee,
  } from "../../api/users/user";
  import behaviorForm from "../../components/teacher/behavior-form.vue";
  import helpForm from "../../components/teacher/help-form.vue";
  import {
    mapState
  } from "vuex";
  export default {
    meta: {
      title: "教师月度考评"
    },
    components: {
      behaviorForm,
      helpForm
    },
    data() {
      return {
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          YearStr: "",
          MonthStr: "",
          TeacherAccountId: "",
        },
        queryDate: '', //查询月份
        columns: [{
            name: "TeacherName",
            label: "教师",
            field: "TeacherName",
            align: "left"
          },
          {
            name: "YearStr",
            label: "年份",
            field: "YearStr",
            align: "left"
          },
          {
            name: "MonthStr",
            label: "月份",
            field: "MonthStr",
            align: "left"
          },
          {
            name: "TeacherScore",
            label: "教学主管打分",
            field: "TeacherScore",
            align: "left"
          },
          {
            name: "JiaoWuScore",
            label: "教务主管打分",
            field: "JiaoWuScore",
            align: "left"
          },
          {
            name: "TotalScore",
            label: "总分",
            field: "TotalScore",
            align: "left"
          },
          {
            name: 'OptionId',
            label: '操作',
            field: row => row.Id
          }
        ],
        dataList: [],
        pageCount: 0,
        isShowBehavior: false, //是否显示对员工评价弹窗
        isShowHelp: false, //是否显示员工对公司建议弹窗
        objOption: null,
        MyTeacherListData: [], //教师列表
      }
    },
    computed: mapState({
      //是否有下载权限
      isHaveEdit(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "Edit_TeacherAssessment") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    created() {
      this.findData();
      let today = new Date();
      this.msg.YearStr = today.getFullYear().toString();
      this.msg.MonthStr = (today.getMonth() + 1).toString();
      this.queryDate = this.msg.YearStr + '-' + this.msg.MonthStr;
      if (this.$route.query) {
        if (this.$route.query.TeacherAccountId) {
          this.msg.TeacherAccountId = Number(this.$route.query.TeacherAccountId)
        }
        if (this.$route.query.YearStr && this.$route.query.MonthStr) {
          this.msg.YearStr = this.$route.query.YearStr;
          this.msg.MonthStr = this.$route.query.MonthStr
          this.queryDate = this.msg.YearStr + '-' + this.msg.MonthStr
        }
      }
    },
    mounted() {
      // if (!this.isHaveEdit) {
      //   let userinfo = this.getLocalStorage();
      //   this.msg.TeacherAccountId = userinfo.Id;
      // }
      this.getTeacherAssessmentPage()
    },
    methods: {
      findData() {
        queryEmployee({
          AccountTypeStr: "2",
          IsLeave: 1
        }).then(res => {
          if (res.Code == 1) {
            this.MyTeacherListData = res.Data;
          }
        })
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getTeacherAssessmentPage()
      },
      getTeacherAssessmentPage() {
        this.loading = true;
        queryTeacherAssessmentPage(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
      },
      //刷新页面
      refreshPage() {
        if (this.queryDate) {
          this.msg.YearStr = this.queryDate.split('-')[0];
          this.msg.MonthStr = this.queryDate.split('-')[1];
        }
        this.getTeacherAssessmentPage();
      },
      //跳转考核新增修改页面
      goAssessTable(item) {
        var qObj = {};
        if (item) {
          qObj.Id = item.Id;
          qObj.TeacherAccountId = item.TeacherAccountId;
        }
        this.OpenNewUrl('/teacher/jobEvaluation', qObj);
      },
      //跳转到考核详情页面
      gotoDetail(item) {
        this.OpenNewUrl('/teacher/teacherAssessment', {
          Id: item.Id
        });
      },
      showForm(item, showType) {
        this.objOption = item;
        if (showType == 1) {
          this.isShowBehavior = true;
        } else if (showType == 2) {
          this.isShowHelp = true;
        }
      },
      closeForm() {
        this.isShowBehavior = false;
        this.isShowHelp = false;
      },
      //提交审批
      submitApproval(item) {
        var saveObj = {
          Id: item.Id
        };
        SubmitTeacherAssessmentApproval(saveObj).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "提交审核成功!",
              position: "top"
            });
            this.getTeacherAssessmentPage()
          }
        });
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>