<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notDel>
      <el-button
        type="primary"
        @click="doExport"
        :disabled="isExport"
        size="mini"
        slot="table-head-left2"
        >导出
      </el-button>
    </LayoutTable>
    <drawer-show ref="drawerform" @ok="getData" />
    <drawer-audit ref="draweraudit" @ok="getData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import drawerAudit from "./draweraudit";
import table from "@/assets/mixins/table";

export default {
  name: "AttendanceLeaveRecordList",
  components: {
    drawerShow,
    drawerAudit,
  },
  mixins: [table],
  created() {},
  methods: {
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.drawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.drawerform.view(row);
    },
    audit(row) {
      //todo 审核页面进行审核
      this.$refs.drawerform.edit(row);
      // this.$refs.draweraudit.view(row);
    },
    doExport() {
      this.isExport = true;
      this.$download(
        "/attendance/leave/record/exportExcel",
        {
          idList: this.selection,
          name: this.$route.query["name"],
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
  },
  data() {
    return {
      isExport: false,
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "leavePerson",
            type: "text",
            label: "请假人",
            fuzzy: true,
          },
          {
            name: "phoneNumber",
            type: "text",
            label: "电话号码",
            fuzzy: true,
          },
          {
            name: "deptId",
            type: "select",
            label: "全部部门",
            fuzzy: false,
          },
          {
            name: "leaveType",
            type: "select",
            label: "请假类型",
            fuzzy: false,
          },
          {
            name: "startTime",
            type: "date",
            label: "开始时间",
            fuzzy: false,
          },
          {
            name: "endTime",
            type: "date",
            label: "结束时间",
            fuzzy: false,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          { type: "index", label: "序号", width: 50 },

          // {label: "请假人id", prop: "leavePersonId", formatter: this.formatter},

          { label: "请假人", prop: "leavePerson" },

          // {label: "所属部门id", prop: "deptId", formatter: this.formatter},

          { label: "所属部门", prop: "deptName" },

          { label: "电话号码", prop: "phoneNumber" },

          {
            label: "请假类型",
            prop: "leaveType",
            formatter: this.formatterLeaveType,
          },

          {
            label: "开始时间",
            prop: "startTime",
            formatter: this.formatterDate,
          },

          { label: "结束时间", prop: "endTime", formatter: this.formatterDate },

          { label: "时长", prop: "duration", formatter: this.formatter },

          // {label: "审批负责人Id", prop: "approverId", formatter: this.formatter},

          /*          {label: "处理状态", prop: "processStatus", formatter: this.formatter},*/

          { label: "状态", prop: "auditResult", formatter: this.formatter },
          { label: "审批负责人", prop: "approver" },

          {
            label: "创建用户",
            prop: "createUserId",
            formatter: this.formatter,
          },

          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },

          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <div>
                  <table-buttons
                    noAdd
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                  <span> </span>
                  {row.processStatus === 1 ? (
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-open"
                      onClick={() => {
                        this.audit(row);
                      }}
                    >
                      审核
                    </el-button>
                  ) : (
                    ""
                  )}
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
