<template>
  <el-container>
    <el-header id="capture-detail-header">
      <LinkTitlesCustom :currentPaths="currentPaths" />
    </el-header>
    <el-main style="overflow: unset;margin-left: 20px;" class="el-main-padding">
      <el-row>
        <el-col :span="6">
          <img :src="studentBasePhotoPath" alt width="180" />
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="8" class="capture-title">
              <span>监考数据ID:{{ examRecordDataId }}</span>
            </el-col>
            <el-col :span="16" style="text-align: right;">
              <el-button
                size="small"
                v-if="showAudit"
                type="success"
                icon="el-icon-success"
                title="通过"
                @click="auditPass"
                >通过</el-button
              >

              <el-button
                size="small"
                v-if="showAudit"
                type="danger"
                icon="el-icon-error"
                title="不通过"
                @click="openAuditDialog"
                >不通过</el-button
              >
              <el-button
                size="small"
                icon="el-icon-arrow-left"
                type="primary"
                @click="back"
                >返回</el-button
              >
            </el-col>
          </el-row>
          <el-row class="margin-top-10">
            <el-col :span="24">
              <el-table :data="examAuditData" border>
                <el-table-column
                  sortable
                  label="学号"
                  prop="studentCode"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="身份证号"
                  prop="identityNumber"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="姓名"
                  prop="studentName"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程代码"
                  prop="courseCode"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程名称"
                  prop="courseName"
                ></el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="margin-top-10">
            <el-col :span="24">
              <el-table :data="examAuditData" border>
                <el-table-column
                  sortable
                  label="校验(次)"
                  prop="faceTotalCount"
                  width="100"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="成功(次)"
                  prop="faceSuccessCount"
                  width="100"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="陌生人(次)"
                  prop="faceStrangerCount"
                  width="120"
                ></el-table-column>
                <el-table-column
                  width="140"
                  sortable
                  label="人脸比对(%)"
                  prop="faceSuccessPercent"
                ></el-table-column>
                <el-table-column
                  width="140"
                  sortable
                  label="人脸真实性(%)"
                  prop="baiduFaceLivenessSuccessPercent"
                ></el-table-column>
                <el-table-column
                  width="120"
                  sortable
                  label="虚拟设备"
                  prop="virtualCameraNames"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="违纪类型"
                  prop="disciplineType"
                  width="130"
                ></el-table-column>
                <el-table-column sortable label="违纪说明" width="260">
                  <template slot-scope="scope">
                    <span
                      v-html="disciplineTypeFilter(scope.row.disciplineDetail)"
                    ></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120"
                  sortable
                  label="审核结果"
                  prop="status"
                ></el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="margin-top-10 photorow">
            <el-col
              :span="6"
              :key="item.id"
              v-for="item in capturesList"
              class="photocol"
            >
              <div class="photo-pass" v-show="item.pass">通过</div>
              <div class="photo-nopass" v-show="!item.pass">不通过</div>
              <img
                class="photo"
                :title="item.virtualCameraNames"
                :src="item.fileUrl"
                alt
                width="200"
              />
              <div class="photo-stranger" v-show="item.stranger">陌生人</div>
              <div
                class="photo-facelivenessPass"
                v-show="!item.isFacelivenessPass"
              >
                <i class="el-icon-warning" title="真实性不通过"></i>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog title="审核" :visible.sync="dialogFormVisible">
        <el-form :model="auditForm" ref="auditForm">
          <el-form-item
            label="违纪类型"
            prop="disciplineType"
            :rules="[
              { required: true, message: '请选择违纪类型', trigger: 'change' }
            ]"
          >
            <el-select v-model="auditForm.disciplineType" placeholder="请选择">
              <el-option
                v-for="item in disciplineTypeList"
                :key="item.name"
                :label="item.desc"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详情描述" style="margin-top:15px;">
            <el-input
              v-model="auditForm.disciplineDetail"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10 }"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <div class="dialog-footer margin-top-10 text-center">
            <el-button type="primary" @click="doAuditNoPass">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
import { DISCIPLINE_TYPE_LIST } from "../constants/constants";
export default {
  components: { LinkTitlesCustom },
  data() {
    return {
      examRecordDataId: "",
      examAuditData: [],
      examRecordData: [],
      capturesList: [],
      studentBasePhotoPath: "",
      showAudit: false,
      dialogFormVisible: false,
      auditForm: {
        examRecordDataId: null,
        disciplineType: "",
        disciplineDetail: "",
        isPass: null
      },
      currentPaths: ["抓拍详情"],
      disciplineTypeList: DISCIPLINE_TYPE_LIST,
      pendingOperate: false
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    getExamAuditData() {
      var param = new URLSearchParams({
        examRecordDataId: this.examRecordDataId
      });
      let isPendingAudit = this.pendingOperate;
      this.$http
        .post("/api/ecs_oe_admin/exam/capture/audit/detail", param)
        .then(response => {
          if (response.data) {
            this.showAudit =
              !isPendingAudit && response.data.isWarn && !response.data.isAudit;
            this.examAuditData.push(response.data);
            var studentId = response.data.studentId;
            this.getStudentInfo(studentId);
          }
        });
    },
    listExamCapture() {
      var param = new URLSearchParams({
        examRecordDataId: this.examRecordDataId
      });
      this.$http
        .post("/api/ecs_oe_admin/exam/capture/list", param)
        .then(response => {
          this.capturesList = response.data;
        });
    },
    getStudentInfo(studentId) {
      this.$http
        .get("/api/ecs_core/student/getStudentInfo?studentId=" + studentId)
        .then(response => {
          if (response.data.photoPath) {
            this.studentBasePhotoPath = response.data.photoPath;
          }
        });
    },
    /**
     * 审核通过
     */
    auditPass() {
      var auditParams = {
        examRecordDataId: this.examRecordDataId,
        isPass: true
      };
      var param = new URLSearchParams(auditParams);
      this.$http
        .post("/api/ecs_oe_admin/exam/audit/single/audit", param)
        .then(() => {
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success"
          });
          this.back();
        });
    },
    openAuditDialog() {
      this.dialogFormVisible = true;
      this.auditForm = {
        examRecordDataId: this.examRecordDataId,
        disciplineType: "",
        disciplineDetail: "",
        isPass: false
      };
    },
    doAuditNoPass() {
      this.$refs["auditForm"].validate(valid => {
        if (valid) {
          var param = new URLSearchParams(this.auditForm);
          this.$http
            .post("/api/ecs_oe_admin/exam/audit/single/audit", param)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success"
              });
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.back();
    },
    disciplineTypeFilter: function(value) {
      if (value && value.indexOf("&&") > -1) {
        var arr = value.split("&&");
        var detail = "";
        for (var i = 0; i < arr.length; i++) {
          detail += arr[i] + "<br>";
        }
        return detail;
      } else {
        return value;
      }
    }
  },
  created() {
    this.examRecordDataId = this.$route.params.examRecordDataId;
    this.pendingOperate = this.$route.query.pendingOperate;
    var fromPage = this.$route.params.from;
    var currentPathJson = {
      illegalityNameList: ["违纪名单", "抓拍详情"],
      awaitingAudit: ["监考待审", "抓拍详情"],
      alreadyAudited: ["监考已审", "抓拍详情"],
      examDetail: ["考试明细", "抓拍详情"]
    };
    this.currentPaths = currentPathJson[fromPage];
    this.getExamAuditData();
    this.listExamCapture();
  }
};
</script>
<style scoped>
#capture-detail-header {
  height: 15px !important;
}
.capture-title {
  font-size: 20px;
  font-weight: bold;
}
.photorow {
  border: 1px solid #ebeef5;
  text-align: center;
}
.photocol {
  position: relative;
  margin: 20px 10px 0 10px;
}
.photo {
  display: block;
  width: 208px;
  height: 159px;
}
.photo-pass {
  position: absolute;
  top: 2px;
  width: 208px;
  text-align: center;
  color: white;
  font-size: 12px;
  background-color: rgba(10, 10, 10, 0.4);
}
.photo-nopass {
  position: absolute;
  top: 2px;
  width: 208px;
  text-align: center;
  color: red;
  font-size: 12px;
  background-color: rgba(10, 10, 10, 0.4);
}
.photo-stranger {
  position: absolute;
  top: 140px;
  width: 208px;
  text-align: center;
  color: red;
  font-size: 12px;
  background-color: rgba(10, 10, 10, 0.4);
}
.photo-facelivenessPass {
  position: absolute;
  top: 160px;
  width: 208px;
  font-size: 14px;
  text-align: center;
  color: red;
}
</style>
<style scoped src="../style/common.css"></style>
