<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    :destroy-on-close="true"
    size="50%"
  >
    <el-form
      ref="form"
      class="dra_content"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <div class="box">
        <div class="title">异常情况</div>
        <div class="content">
          <el-row>
            <el-col :span="8"
              >员工：{{ form.staffName ? form.staffName : "--" }}</el-col
            >
            <el-col :span="8"
              >所属部门：{{ form.deptName ? form.deptName : "--" }}</el-col
            >
            <el-col :span="8"
              >窗口编号：{{ form.windowNum ? form.windowNum : "--" }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"
              >考勤组：{{
                form.attendanceGroupName ? form.attendanceGroupName : "--"
              }}</el-col
            >
            <el-col :span="8"
              >异常时间：{{ formatterDate(form.errorTime) }}</el-col
            >
            <el-col :span="8"
              >上下班时间：{{
                form.goOffTimeStr ? form.goOffTimeStr : "--"
              }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="10"
              >实际打卡时间：{{ formatterDate(form.actualAttendTime) }}</el-col
            >
            <el-col :span="9"
              >异常结果：{{
                form.errorResult ? form.errorResult : "--"
              }}</el-col
            >
            <el-col :span="5"
              >加分/扣分方式：{{
                form.subAddType
                  ? util_formatter("subAddType", form.subAddType)
                  : "--"
              }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"
              >加分/扣分时间：{{ formatterDate(form.deductTime) }}</el-col
            >
            <el-col :span="8"
              >加分/扣分人员：{{
                form.deductPerson ? form.deductPerson : "--"
              }}</el-col
            >
          </el-row>
        </div>
      </div>
      <div class="box">
        <div class="title">核查情况</div>
        <div class="content">
          <el-row>
            <el-col :span="8"
              >核查结果：{{
                form.checkResult
                  ? util_formatter("checkResult", form.checkResult)
                  : "--"
              }}</el-col
            >
            <el-col :span="8"
              >绩效规则：{{ form.ruleName ? form.ruleName : "--" }}</el-col
            >
            <el-col :span="8"
              >加分/扣除分值：<span style="color:#ff0000">{{
                form.score ? form.score : "--"
              }}</span></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"
              >说明：{{ form.checkDesc ? form.checkDesc : "--" }}</el-col
            >
            <el-col :span="8"
              >核查人员：{{
                form.checkPerson ? form.checkPerson : "--"
              }}</el-col
            >
            <el-col :span="8"
              >核查时间：{{ formatterDate(form.checkTime) }}</el-col
            >
          </el-row>
        </div>
      </div>
      <div class="box">
        <div class="title">申诉情况</div>
        <div class="content">
          <el-row>
            <el-col :span="24"
              >申诉说明：{{ form.appealDesc ? form.appealDesc : "--" }}</el-col
            >
            <el-col :span="24"
              >申诉时间：{{ formatterDate(form.appealTime) }}</el-col
            >
            <el-col :span="24"
              >申诉附件：
              <span v-if="!form.performAttendAppealFilesList">
                --
              </span>
              <div class="img_content" v-else>
                <div
                  class="imgBox"
                  v-for="val in form.performAttendAppealFilesList"
                  :key="val.id"
                  @click="hanldeDownloadFile(val)"
                >
                  <img src="../../../../assets/images/fileImg.png" alt="" />
                  {{ val.fileName }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="box" v-if="form.view == '查看'">
        <div class="title">申诉结果</div>
        <div class="content">
          <el-row>
            <el-col :span="8"
              >申诉结果：{{
                form.appealResult
                  ? util_formatter("appealResult", form.appealResult)
                  : "--"
              }}</el-col
            >
            <el-col :span="8"
              >处理人员：{{
                util_formatter("updateUserId", form.updateUserId + "")
              }}</el-col
            >
            <el-col :span="8"
              >处理时间： {{ formatterDate(form.updateTime) }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="24"
              >说明：{{ form.remark ? form.remark : "--" }}</el-col
            >
          </el-row>
        </div>
      </div>
      <div class="box" v-else>
        <div class="title">申诉结果</div>
        <div class="content">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申诉结果：">
                <el-radio-group v-model="form.appealResult">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明：">
                <el-input type="textarea" v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <form-buttons
        @submit="submitForm"
        v-if="pageInfo.type != 'view'"
        noCancelBtn
      />
    </el-form>
    <!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <Field
          label="核查记录Id"
          prop="checkRecordId"
          v-model="form.checkRecordId"
          placeholder="请输入核查记录Id"
        />
        <Field
          label="员工ID"
          prop="staffId"
          v-model="form.staffId"
          placeholder="请输入员工ID"
        />
        <Field
          label="员工姓名"
          prop="staffName"
          v-model="form.staffName"
          placeholder="请输入员工姓名"
        />
        <Field
          label="工号"
          prop="workNum"
          v-model="form.workNum"
          placeholder="请输入工号"
        />
        <Field
          label="所属部门"
          prop="deptId"
          v-model="form.deptId"
          placeholder="请输入所属部门"
        />
        <Field
          label="所属部门名称"
          prop="deptName"
          v-model="form.deptName"
          placeholder="请输入所属部门名称"
        />
        <Field
          label="所属考勤组ID"
          prop="attendanceGroupId"
          v-model="form.attendanceGroupId"
          placeholder="请输入所属考勤组ID"
        />
        <Field
          label="所属考勤组名称"
          prop="attendanceGroupName"
          v-model="form.attendanceGroupName"
          placeholder="请输入所属考勤组名称"
        />
        <Field
          label="考勤时间"
          prop="attendanceDate"
          v-model="form.attendanceDate"
          type="date"
        />
        <Field
          label="绩效规则id"
          prop="ruleId"
          v-model="form.ruleId"
          placeholder="请输入绩效规则id"
        />
        <Field
          label="规则名称"
          prop="ruleName"
          v-model="form.ruleName"
          placeholder="请输入规则名称"
        />
        <Field
          label="加分/扣分方式"
          prop="subMethod"
          v-model="form.subMethod"
          type="select"
          :enumData="dict.subMethod"
          placeholder="请选择加分/扣分方式"
        />
        <Field
          label="增减类型"
          prop="subAddType"
          v-model="form.subAddType"
          type="select"
          :enumData="dict.subAddType"
          placeholder="请选择增减类型"
        />
        <Field
          label="扣分或增加分值"
          prop="score"
          v-model="form.score"
          placeholder="请输入扣分或增加分值"
        />
        <Field
          label="上下班时间"
          prop="goOffTimeStr"
          v-model="form.goOffTimeStr"
          placeholder="请输入上下班时间"
        />
        <Field
          label="异常时间"
          prop="errorTime"
          v-model="form.errorTime"
          type="date"
        />
        <Field
          label="实际打卡时间"
          prop="actualAttendTime"
          v-model="form.actualAttendTime"
          type="date"
        />
        <Field
          label="异常处理结果"
          prop="errorResult"
          v-model="form.errorResult"
          placeholder="请输入异常处理结果"
        />
        <Field
          label="核查人员"
          prop="checkPerson"
          v-model="form.checkPerson"
          placeholder="请输入核查人员"
        />
        <Field
          label="核查时间"
          prop="checkTime"
          v-model="form.checkTime"
          type="date"
        />
        <Field
          label="核查说明"
          prop="checkDesc"
          v-model="form.checkDesc"
          type="textarea"
          placeholder="请输入核查说明"
        />
        <Field
          label="核查结果"
          prop="checkResult"
          v-model="form.checkResult"
          placeholder="请输入核查结果"
        />
        <Field
          label="处理状态"
          prop="processStatus"
          v-model="form.processStatus"
          type="select"
          :enumData="dict.processStatus"
          placeholder="请选择处理状态"
        />
        <Field
          label="申诉说明"
          prop="appealDesc"
          v-model="form.appealDesc"
          placeholder="请输入申诉说明"
        />
        <Field
          label="申诉时间"
          prop="appealTime"
          v-model="form.appealTime"
          type="date"
        />
        <Field
          label="申诉结果"
          prop="appealResult"
          v-model="form.appealResult"
          type="select"
          :enumData="dict.appealResult"
          placeholder="请选择申诉结果"
        />
        <Field
          label="说明"
          prop="remark"
          v-model="form.remark"
          type="textarea"
          placeholder="请输入说明"
        />
      </el-row>
      <el-divider content-position="center"
        >绩效记录申诉附件信息信息</el-divider
      >
      <br />
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAddPerformAttendAppealFiles"
            >添加</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDeletePerformAttendAppealFiles"
            >删除</el-button
          >
        </el-col>
      </el-row>

      <el-table
        :data="performAttendAppealFilesList"
        :row-class-name="rowPerformAttendAppealFilesIndex"
        @selection-change="handlePerformAttendAppealFilesSelectionChange"
        ref="performAttendAppealFiles"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="序号" align="center" prop="index" width="50" />
        <el-table-column label="文件名称" prop="fileName">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fileName"
              placeholder="请输入文件名称"
            />
          </template>
        </el-table-column>
        <el-table-column label="文件地址" prop="filePath">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.filePath"
              placeholder="请输入文件地址"
            />
          </template>
        </el-table-column>
        <el-table-column label="创建用户" prop="createUserId">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createUserId"
              placeholder="请输入创建用户"
            />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.createTime"
              placeholder="请输入创建时间"
            />
          </template>
        </el-table-column>
        <el-table-column label="更新用户" prop="updateUserId">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.updateUserId"
              placeholder="请输入更新用户"
            />
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updateTime">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.updateTime"
              placeholder="请输入更新时间"
            />
          </template>
        </el-table-column>
      </el-table>

      <form-buttons
        @submit="submitForm"
        v-if="pageInfo.type != 'view'"
        noCancelBtn
      />
    </el-form> -->
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import { timestampToTime } from "@/assets/utils/dateFormat.js";
import { downloadFile } from "@/assets/utils/index";
import { formatterDate } from "@/assets/utils/index";

export default {
  name: "PerformAttendAppealDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("perform/attend/appeal");
  },
  data() {
    return {
      // 子表选中数据
      checkedPerformAttendAppealFiles: [],
      // 绩效记录申诉附件信息表格数据
      performAttendAppealFilesList: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "绩效记录申诉信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: [
        "subMethod",
        "subAddType",
        "processStatus",
        "appealResult",
        "updateUserId",
      ],
      toDate: [
        "attendanceDate",
        "errorTime",
        "actualAttendTime",
        "checkTime",
        "appealTime",
      ],
      // 表单校验
      rules: {
        staffName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        createTime: [{ required: true, message: "请选择创建时间" }],
      },
      urls: {
        saveUrl: "/perform/attend/appeal/audit",
      },
    };
  },

  methods: {
    util_formatter(key, val) {
      try {
        return this.dict[key][val];
      } catch (error) {
        return val;
      }
    },
    formatterDate,
    // 下载附件
    hanldeDownloadFile(val) {
      console.log(val);
      downloadFile(val.filePath, val.fileName);
    },
    picMatter(val) {
      if (val || val !== "--") {
        return (
          <el-image
            src={val.indexOf("http") == -1 ? this.baseUrl + val : val}
            preview-src-list={
              val.indexOf("http") == -1 ? this.baseUrl + val : val
            }
            style="width: 100px"
          ></el-image>
        );
      } else {
        return val;
      }
    },
    /** 绩效记录申诉附件信息序号 */
    rowPerformAttendAppealFilesIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 绩效记录申诉附件信息添加按钮操作 */
    handleAddPerformAttendAppealFiles() {
      let obj = {};
      obj.fileName = "";
      obj.filePath = "";
      obj.createUserId = "";
      obj.createTime = "";
      obj.updateUserId = "";
      obj.updateTime = "";
      this.performAttendAppealFilesList.push(obj);
    },
    /** 绩效记录申诉附件信息删除按钮操作 */
    handleDeletePerformAttendAppealFiles() {
      if (this.checkedPerformAttendAppealFiles.length == 0) {
        this.$alert("请先选择要删除的绩效记录申诉附件信息数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.performAttendAppealFilesList.splice(
          this.checkedPerformAttendAppealFiles[0].index - 1,
          1
        );
      }
    },
    /** 单选框选中数据 */
    handlePerformAttendAppealFilesSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.performAttendAppealFiles.clearSelection();
        this.$refs.performAttendAppealFiles.toggleRowSelection(selection.pop());
      } else {
        this.checkedPerformAttendAppealFiles = selection;
      }
    },
    // 渲染前置处理
    beforeRender(data) {
      if (data.performAttendAppealFilesList) {
        this.performAttendAppealFilesList = data.performAttendAppealFilesList;
      }
      return data;
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      // this.urls.currUrl = "/perform/attend/appeal/info";
      // this.getData();
      this.$get("/perform/attend/appeal/info", { id: row.id }).then((res) => {
        if (res.code == 1) {
          this.form = res.data;
          this.dict = res.dict;
        } else {
          this.reset();
        }
        this.form.appealResult = "";
        this.form.processStatus = 2;
        this.form.remark = "";
        this.form.view = "核查";
        this.open = true;
      });
      this.pageInfo.type = "edit";
      this.title = "处理绩效记录申诉信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "perform/attend/appeal/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增绩效记录申诉信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "perform/attend/appeal/view";
      this.getData();
      this.form.view = "查看";
      this.pageInfo.type = "view";
      this.title = "绩效记录申诉信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        checkRecordId: null,
        staffId: null,
        staffName: "",
        workNum: "",
        deptId: null,
        deptName: "",
        attendanceGroupId: null,
        attendanceGroupName: "",
        attendanceDate: null,
        ruleId: null,
        ruleName: "",
        subMethod: 1,
        subAddType: 1,
        score: 0.0,
        goOffTimeStr: "",
        errorTime: null,
        actualAttendTime: null,
        errorResult: "",
        checkPerson: "",
        checkTime: null,
        checkDesc: "",
        checkResult: "",
        processStatus: 1,
        appealDesc: "",
        appealTime: null,
        appealResult: 2,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dra_content {
  width: 100%;
  height: 100%;
  padding: 20px;
  .box {
    width: 100%;
    height: auto;
    background: inherit;
    background-color: rgba(242, 246, 252, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 15px 0 0 15px;
    .title {
      color: #1890ff;
      font-size: 16px;
      padding-left: 10px;
      position: relative;
      margin-bottom: 30px;
      &::after {
        content: "";
        display: block;
        border-left: 3px solid #1890ff;
        left: 0;
        top: 0;
        bottom: 0;
        position: absolute;
      }
    }
    .content {
      width: 100%;
      padding: 10px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      margin-left: 0 auto;
      margin-bottom: 30px;
      /deep/.el-row {
        margin-bottom: 20px;
      }
      .img_content {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0 0 10px;
      }
      .imgBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 80px;
        cursor: pointer;
        img {
          width: 50px;
          height: 50px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
