<!--停课表单审核信息-->
<style>
  .assessmentbill-Dialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }

  .assessmentbill-Dialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .assessmentbill-Dialog .className {
    margin-left: 10px;
  }

  .assessmentbill-Dialog .classStatus {
    padding: 3px 8px;
    background-color: #c8d7fc;
    color: #2961fe;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 20px;
  }

  .assessmentbill-Dialog .normalName {
    color: #999999;
  }

  .assessmentbill-Dialog .normalInner {
    color: #111111;
  }

  .drop_NameDown {
    margin-top: 20px;
    width: 300px;
  }

  .assessmentContent {
    margin: 10px;
    padding-bottom: 80px;
  }

  .assessmentContent .role_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3fc4ff;
    display: inline-block;
  }

  .assessmentContent .backinfo_Item {
    color: #000000;
    font-weight: bold;
  }

  .assessmentContent .backInfo_One {
    margin: 20px 0;
  }

  .assessmentContent .backOtherInfo {
    color: #111111;
  }

  .assessmentContent .backInfo_Title {
    display: inline-block;
    width: 120px;
    text-align: right;
    color: #999999;
  }

  .assessmentContent .replayReason {
    width: 100%;
    min-height: 100px;
    background-color: #f0f5fb;
    border-radius: 3px;
    padding: 20px;
    margin: 20px 0;
  }

  .assessmentContent .replay_Title {
    font-weight: bold;
    color: #111111;
  }

  .assessmentContent .chaosong_Peo {
    display: inline-block;
    padding: 2px 3px;
    color: #fff;
    border-radius: 3px;
    margin: 0 5px 5px 0;
    background-color: #9cf;
  }

  .assessmentContent .topBaseInfo {
     overflow: auto;
  }

  .topBaseInfo::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #f5f5f5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .topBaseInfo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .topBaseInfo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear,
        0 0,
        0 100%,
        color-stop(0.5, rgba(255, 255, 255, 0.2)),
        color-stop(0.5, transparent),
        to(transparent));
    background-color: #0ae;
  }

  ._show_img_box {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
  }



  ._jump_page {
    cursor: pointer;
    text-decoration: underline;
  }

  ._jump_page:hover {
    color: #c94052;
  }
</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top: 61px; width: 850px" class="no-border-radius assessmentbill-Dialog">
      <div class="drawerTop">
        <div style="display: flex; align-items: center">
          <div class="className">
            <div class="classFirst">教师考核申请审批</div>
          </div>
        </div>
      </div>
      <q-tabs style="margin: 15px" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="first" label="详细信息" />
        <q-tab :ripple="false" name="second" label="审批记录" />
      </q-tabs>
      <div v-if="tabCheck == 'first'" style="margin: 0 15px">
        <div class="assessmentContent">
          <div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>基本信息
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-6">
                <span class="backInfo_Title">申请编号：</span>
                <span class="backOtherInfo _jump_page" title="点击查看详情"
                  @click="gotoTeachetAssessment(setingObj.DataObj)">{{ setingObj.DataObj.Id }}</span>
              </div>
              <div class="col-6">
                <span class="backInfo_Title">申请人：</span>
                <span class="backOtherInfo">
                  {{
                  setingObj.CreateByName
                  }}
                </span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-6">
                <span class="backInfo_Title">老师：</span>
                <span class="backOtherInfo">{{ setingObj.DataObj.TeacherName }}</span>
              </div>
              <div class="col-6">
                <span class="backInfo_Title">考核月份：</span>
                <span class="backOtherInfo">{{ setingObj.DataObj.YearStr}}-{{setingObj.DataObj.MonthStr}}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-6">
                <span class="backInfo_Title">教学主管打分：</span>
                <span class="backOtherInfo">{{ setingObj.DataObj.TeacherScore }}</span>
              </div>
              <div class="col-6">
                <span class="backInfo_Title">教务主管打分：</span>
                <span class="backOtherInfo">{{ setingObj.DataObj.JiaoWuScore }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backInfo_Title">合计得分：</span>
                <span class="backOtherInfo">{{ setingObj.DataObj.TotalScore }}</span>
              </div>
            </div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>部门考核信息
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">1、该员工的综合工作表现如何？</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Behavior }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">2、主要缺点：</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.ShortComing }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主要优点：</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Advantage }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">3、该员工发展潜力如何？</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Potential }}
                  {{setingObj.DataObj.PotentialOther }}</span>
              </div>
            </div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>意见及建议
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">1、您的上级怎样帮助你，将使你未来的工作绩效更高？</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Help }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">2、对公司的发展有什么建议？</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Suggest }}</span>
              </div>
            </div>
            <div class="row backInfo_One">
              <div class="col-12">
                <span class="backOtherInfo" style="color:#999999;">3、其他意见：</span>
              </div>
              <div class="col-12" style="text-indent:2em">
                <span class="backOtherInfo">{{setingObj.DataObj.Other }}</span>
              </div>
            </div>
            <div v-if="showType == 2">
              <div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px;">
                <div>审批意见</div>
                <div>
                  <q-radio v-model="stopBillMsg.AuditStatus" :val="2" label="通过" />
                  <q-radio v-model="stopBillMsg.AuditStatus" :val="3" label="驳回" />
                </div>
              </div>
              <q-input filled stack-label :dense="false" v-model="stopBillMsg.Description" type="textarea"
                label="审批意见" />
            </div>
            <div style="margin-top: 20px">
              <div class="row">
                <div class="col-6" style="display: flex; align-items: top">
                  <template v-if="tempPeople.length > 0">
                    <div style="display: inline-block; width: 45px">抄送:</div>
                    <div style="
                        display: inline-block;
                        margin-left: 5px;
                        width: 340px;
                      ">
                      <span class="chaosong_Peo" v-for="(childItem, cindex) in tempPeople"
                        :key="cindex">{{ getName(childItem) }}</span>
                    </div>
                  </template>
                </div>
                <div class="col-6" style="
                    justify-content: flex-end;
                    display: flex;
                    align-items: center;
                  ">
                  <i class="iconfont icon-aite" style="
                      font-size: 20px;
                      margin: 7px 20px 0 0;
                      cursor: pointer;
                    " v-if="showType == 2">
                    <q-popup-proxy>
                      <q-banner>
                        <div style="width: 350px">
                          <div style="margin: 10px 0 15px 0">抄送</div>
                          <q-select class="col-6 q-pb-lg q-pr-lg" multiple clearable filled stack-label use-input
                            option-value="Id" option-label="EmployeeName" v-model="tempPeople" ref="ManagerId"
                            :options="EmployeeList" label="选择人员" :dense="false" emit-value map-options
                            @filter="filterFn">
                            <template v-slot:no-option>
                              <q-item>
                                <q-item-section class="text-grey">未找到相关数据</q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </i>
                  <q-btn class="q-mr-md" label="关闭" @click="closeBackInfo" />
                  <q-btn v-if="showType == 2" color="accent q-px-md" label="确认" @click="saveBackClassInfo()" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabCheck == 'second'">
        <flowinfoForm :seting-obj="setingObj" :showType="showType" @close="closeShenheForm" @success="refreshPage">
        </flowinfoForm>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm" style="
        height: 40px !important;
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
      ">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
    <div v-if="picIsShow" class="_show_img_box" @click="(picIsShow = false), (picObj = [])">
      <div style="
          position: absolute;
          max-width: 800px;
          height: auto;
          left: 50%;
          top: 50%;
          margin-left: -400px;
          transform: translateY(-50%);
        ">
        <el-image style="width: 100%; height: 100%" fit="cover" v-for="(item, index) in picObj" :key="index" :src="item"
          :preview-src-list="picObj"></el-image>
      </div>
    </div>
  </q-dialog>
</template>

<script>
  import flowinfoForm from "../sale/flowinfo-form";
  import {
    saveBackBillAduit,
    queryBackBillMoney
  } from "../../api/sale/bill";
  import {
    queryEmployee
  } from "../../api/users/user";
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      },
      showType: {
        type: Number,
        default: 1
      }
    },
    components: {
      flowinfoForm
    },
    data() {
      return {
        persistent: true,
        tabCheck: "first", //默认选第一个
        stopBillMsg: {
          Id: 0,
          Description: "", //审批意见
          AuditStatus: 2, //审核状态
          SpecialNode: 0, //是否特殊节点
          RecipientIds: "" //抄送人
        },
        classPriceObj: {}, //课程价格信息
        EmployeeList: [],
        AllemployeeList: [],
        tempPeople: [], //抄送人数组
        //附件---s
        picIsShow: false,
        picObj: [],
        initialIndex: 0
        //附件---e
      };
    },
    computed: {

    },
    created() {
      this.getEmployee();
    },
    mounted() {
      this.stopBillMsg.Id = this.setingObj.Id;
      this.stopBillMsg.SpecialNode = this.setingObj.SpecialNode;
      if (this.stopBillMsg.SpecialNode == 1) {
        //this.getBackBillMoney();
      }
    },
    methods: {
      getBackBillMoney() {
        queryBackBillMoney({
          BackId: this.setingObj.RelationId
        }).then(res => {
          if (res.Code == 1) {
            this.classPriceObj = res.Data;
          }
        });
      },
      closeBackInfo() {
        this.persistent = false;
        this.$emit("close");
      },
      //停课单据审核
      saveBackClassInfo() {
        var str = "";
        if (this.tempPeople && this.tempPeople.length > 0) {
          this.tempPeople.forEach(item => {
            str += "," + item;
          });
        }
        if (str && str != "") {
          str = str.substr(1);
        }
        this.stopBillMsg.RecipientIds = str;
        saveBackBillAduit(this.stopBillMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "审核成功!",
              position: "top"
            });
            //调用父页面成功方法
            this.$emit("success");
            this.$emit("close");
          }
        });
      },
      //获取员工列表
      getEmployee() {
        var qMsg = {
          EmployeeName: ""
        };
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
              this.EmployeeList = JSON.parse(JSON.stringify(jsonData));
            }
          }
        });
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList));
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(
              v => v.EmployeeName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取员工姓名
      getName(id) {
        let str = "";
        this.EmployeeList.forEach(x => {
          if (id == x.Id) {
            str = x.EmployeeName;
          }
        });
        return str;
      },
      //跳转到老师考核详情
      gotoTeachetAssessment(item) {
        this.OpenNewUrl("/teacher/teacherAssessment", {
          Id: item.Id,
        });
      },
      refreshPage() {
        this.persistent = false;
        this.$emit("success");
      },
      closeShenheForm() {
        this.persistent = false;
        this.$emit("close");
      },
    }
  };
</script>