<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    size="60%"
  >
    <div style="padding:15px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <!-- <Field label="请假人" prop="leavePersonId" v-model="form.leavePersonId" placeholder="请输入请假人"/> -->
          <Field
            label="请假人"
            prop="leavePerson"
            v-model="form.leavePerson"
            placeholder="请输入请假人"
            :maxLength="10"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="所属部门"
            prop="deptId"
            v-model="form.deptId"
            type="select"
            placeholder="请选择所属部门"
            :enumData="dict.deptId"
            :disabled="pageInfo.type == 'view'"
          />
          <!-- <Field label="所属部门" prop="deptName" v-model="form.deptName" type="textarea" placeholder="请输入所属部门"/> -->
          <Field
            label="电话号码"
            prop="phoneNumber"
            v-model="form.phoneNumber"
            placeholder="请输入电话号码"
            :maxLength="11"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="请假类型"
            prop="leaveType"
            v-model="form.leaveType"
            type="select"
            :enumData="dict.leaveType"
            placeholder="请选择请假类型"
            :disabled="pageInfo.type == 'view'"
          />

          <Field
            label="开始时间"
            prop="startTime"
            v-model="form.startTime"
            type="datetime"
            @change="changedate"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="结束时间"
            prop="endTime"
            v-model="form.endTime"
            type="datetime"
            @change="changedate"
            :disabled="pageInfo.type == 'view'"
          />

          <Field
            label="时长(单位:秒)"
            disabled
            prop="duration"
            v-model="form.duration"
            placeholder="请输入时长(秒)"
            :maxLength="4"
          />
          <Field
            label="请假事由"
            prop="reason"
            v-model="form.reason"
            type="textarea"
            placeholder="请输入请假事由"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="审核结果"
            prop="auditResult"
            v-model="form.auditResult"
            type="radio"
            :enumData="dict.auditResult"
            placeholder="请选择审核结果"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="审核说明"
            prop="auditDesc"
            v-model="form.auditDesc"
            placeholder="请输入审核说明"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="审批负责人"
            prop="approverId"
            type="select"
            v-model="form.approverId"
            placeholder="请选择审批负责人"
            :enumData="dict.approverId"
            :disabled="pageInfo.type == 'view'"
          />
          <!-- <Field label="审批负责人" prop="approver" v-model="form.approver" placeholder="请输入审批负责人"/> -->
          <!-- <Field label="附件" prop="attachment" v-model="form.attachment" type="textarea" placeholder="请输入附件"/> -->
          <Field
            label="备注"
            prop="remark"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
            :disabled="pageInfo.type == 'view'"
          />
          <Field
            label="申请时间"
            prop="createTime"
            v-model="form.createTime"
            type="datetime"
            disabled
          />
        </el-row>
        <el-form-item label="附件路径" prop="attachmentPathList">
          <FileUpload
            @input="uploadFn"
            :value="form.attachmentPathList"
            :fileNumber="1"
            :disabled="pageInfo.type == 'view'"
          />
        </el-form-item>
        <form-buttons
          @submit="submitForm"
          noCancelBtn
          v-if="pageInfo.type !== 'view'"
        />
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import valid from "@/assets/utils/vaild.js";
import { getMinu, getSec } from "@/assets/utils/dateFormat.js";
export default {
  name: "AttendanceLeaveRecordDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("attendance/leave/record");
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_API_BASE_URL + "/",
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "请假记录信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["leaveType", "deptId", "approverId", "auditResult"],
      toDate: ["startTime", "endTime", "createTime"],
      // 表单校验
      rules: {
        leavePerson: [
          { required: true, message: "请输入请假人", trigger: "blur" },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        phoneNumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            validator: valid.phone,
            message: "电话号码格式不正确",
            trigger: "blur",
          },
        ],
        leaveType: [
          { required: true, message: "请选择请假类型", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        duration: [{ required: true, message: "请输入时长", trigger: "blur" }],
        reason: [
          { required: true, message: "请输入请假理由", trigger: "blur" },
        ],
        approverId: [
          { required: true, message: "请选择审批人", trigger: "change" },
        ],
        // attachmentPathList: [
        //   { required: true, message: "请上传附件文件", trigger: "change" },
        // ],
        auditResult: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
      },
      attachmentPath: "",
    };
  },
  watch: {},
  methods: {
    // beforeSubmit() {
    //   if (this.form.endTime.valueOf() > this.form.startTime.valueOf()) {
    //     // this.submitForm();
    //   } else {
    //     this.$message.error("结束日期需大于请假日期");
    //   }
    // },
    uploadFn(e) {
      this.form.attachmentPathList = e;
      this.$forceUpdate(this.form.attachmentPathList);
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/leave/record/edit";
      this.getData();
      //   this.$get("attendance/leave/record/edit", { id: row.id }).then((res) => {
      //     if (res.code == 1) {
      //       this.form = res.data.entity;
      //       this.attachmentPath = res.data
      //         ? [
      //             {
      //               url: res.data.entity.attachmentPath,
      //               name: res.data.entity.attachmentPath,
      //             },
      //           ]
      //         : "";
      //       this.dict = res.data.dict;
      //       this.open = true;
      //     } else {
      //       this.reset();
      //     }
      //   });
      this.pageInfo.type = "edit";
      this.title = "修改请假记录信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "attendance/leave/record/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增请假记录信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/leave/record/view";
      this.getData();

      this.pageInfo.type = "view";
      this.title = "请假记录信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.attachmentPath = [
        // {   name:'请假附件',
        //     url:this.form.attachmentPath
        // }
      ];
      this.open = true;
    },
    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },
    changedate(val) {
      if (this.form.startTime && this.form.endTime) {
        if (this.form.endTime.valueOf() > this.form.startTime.valueOf()) {
          this.form.duration = getSec(this.form.startTime, this.form.endTime);
        } else {
          this.$message.closeAll();
          this.$message.error("结束日期需大于请假日期");
        }
      }
    },
    // 表单重置
    reset() {
      this.form = {
        leavePersonId: null,
        leavePerson: "",
        deptId: null,
        deptName: "",
        phoneNumber: "",
        leaveType: null,
        startTime: null,
        endTime: null,
        duration: null,
        reason: "",
        approverId: null,
        approver: "",
        attachment: "",
        attachmentPath: "",
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
