<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    size="50%"
  >
    <div
      style="padding: 20px; font-size: 15px; position: relative; height: 100%"
    >
      <div class="mt20">
        <div class="search_box" style="text-align: end">
          <SearchForm
            :search="config.search"
            @getData="onSubmit"
            ref="search"
          />
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData ? tableData : []"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            v-for="(val, i) in config.columns"
            :key="i"
            :type="val.type"
            :width="val.width"
            :label="val.label"
            :prop="val.prop"
            :formatter="val.formatter"
            :align="val.align ? val.align : 'center'"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page.current_page"
          layout="total, prev, pager, next"
          :total="page.total"
          style="margin-top: 10px; width: 100%; text-align: end"
        >
        </el-pagination>

        <el-button
          @click="cancleFn"
          style="position: absolute; bottom: 10px; right: 10px"
          >关闭</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import SearchForm from "@/components/SearchFormDrawer.vue";

export default {
  name: "DeviceDetail",
  components: { SearchForm },
  created() {},
  data() {
    return {
      tableData: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["processResult", "errorStatus"],
      dict: {},
      urls: {
        currUrl: "",
        saveUrl: "attendance/device/save",
      },
      config: {
        downloadUrl: "",
        isshowTabPane: false,
        search: [
          {
            name: "salaId",
            type: "selectSalaId",
            label: "大厅",
            fuzzy: false,
          },
          {
            name: "deptId",
            type: "selectDeptId",
            label: "部门",
            fuzzy: false,
          },
          // {
          //   name: "classId",
          //   type: "select",
          //   label: "班次",
          //   fuzzy: false,
          // },
          {
            name: "staffName",
            type: "text",
            label: "员工姓名",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          {
            label: "序号",
            width: 50,
            formatter: (row, column, cellValue, index) => {
              return index + 1;
            },
          },

          { label: "姓名", prop: "name" },

          { label: "工号", prop: "workNum" },

          { label: "所属大厅", prop: "salaName" },
          { label: "所属部门", prop: "deptName" },
          { label: "职位", prop: "positionName" },
          { label: "班次", prop: "className" },
          {
            label: "考勤时间",
            prop: "attendanceTime",
            formatter: this.formatterDate,
          },
          { label: "考勤设备", prop: "deviceName" },
          // {
          //   label: "操作",
          //   width: 100,
          //   formatter: (row) => {
          //     if (row.check) {
          //       return <span style="cursor:pointer;color:#ff0000">已选中</span>;
          //     } else {
          //       return <span style="cursor:pointer;color:#1890ff">选择</span>;
          //     }
          //   },
          // },
        ],
      },
      btnLoading: false,
      page: {
        current_page: 1,
        total: 0,
      },
    };
  },

  methods: {
    handleCurrentChange(val) {
      this.page.current_page = val;
      this.$refs.search.onSubmit();
    },
    // 渲染前置处理
    beforeRender(data) {
      return data;
    },
    /** 编辑 */
    edit(row) {
      this.urls.currUrl = "device/edit";
      this.open = true;
      this.title =
        "考勤数据 - " + row.deviceName + `（MAC地址${row.deviceMac}）`;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    onSubmit() {},

    cancleFn() {
      this.open = false;
    },
  },
};
</script>
