<template>
    <div class="main-container">
    <TableHeader
      :can-collapsed="
        likeSearchModel.conditionItems &&
        likeSearchModel.conditionItems.length !== 0
      "
      :search-model="likeSearchModel.conditionItems"
      :default-collapsed-state="true"
      title="查询条件"
      @doSearch="doSearch"
      @resetSearch="resetSearch"
    >
    </TableHeader>

    <TableBody ref="tableBody">
      <template>
        <el-table
          ref="table"
          height="439px"
          style="font-size: 14px"
          v-loading="tableLoading"
          :data="filterList || dataList"
          :header-cell-style="tableConfig.headerCellStyle"
          :size="tableConfig.size"
          :stripe="tableConfig.stripe"
          :border="tableConfig.border"
        >
          >
          <el-table-column align="center" label="学号" width="130px" prop="userId"/>
          <el-table-column align="center" label="姓名" width="80px" prop="userName"/>
          <el-table-column align="center" label="班级" prop="classroom" width="160px"/>
          <el-table-column align="center" label="请假类型" prop="type" width="80px">
            <template slot-scope="scope">
              {{ scope.row.type == 0 ? "病假" : ( scope.row.type == 1 ?'事假':'公假') }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="去向" prop="whereabout" width="160px"/>
          <el-table-column align="center" label="备注" prop="remark" />
          <el-table-column align="center" label="开始日期" prop="start"/>
          <el-table-column align="center" label="结束日期" prop="end" />
          <el-table-column align="center" label="状态" prop="state" >
            <template slot-scope="scope">
              {{ scope.row.state == 3 ? "已销假" : '请假未通过' }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </TableBody>
    <TableFooter
      :current-page="pageVal"
      :page-size="pageModel.pageSize"
      :total-size="total"
      @pageSizeChanged="pageSizeChanged"
      @currentChanged="currentChanged"
      @onRefresh="doRefresh"
    />
    </div>
</template>

<script>


import { mapGetters } from "vuex";
import { requestGet } from "@/utils/request/request";
import TableMixin, { PageModelMixin } from "@/mixins/TableMixin";
import {
  LikeSearchMixin,
  GetDataMixin,
  RefreshActionMixin,
} from "@/mixins/ActionMixin";
export default {
  name: "TProcessed",
  mixins: [
    TableMixin,
    LikeSearchMixin,
    GetDataMixin,
    PageModelMixin,
    RefreshActionMixin,
  ],
  computed: {
    //获取vuex数据
    ...mapGetters(["avatar", "roles"]),
  },
  data() {
    return {
      filterList: null,
      pageVal: 1,
      pageSize: "20",
      total: 0,
      tableLoading: false,
      select: {
        userId: "",
        userName: "",
        classroom: "",
      }
    };
  },
  created() {
    this.selectTable(this.pageVal);
    this.initLikeSearch({
      url: "/",
      //自定义查询输入框
      conditionItems: [
        {
          name: "userId",
          label: "学号",
          value: "",
          type: "input",
          placeholder: "请输入学号",
          span: 4,
        },
        {
          name: "userName",
          label: "姓名",
          value: "",
          type: "input",
          placeholder: "请输入姓名",
          span: 4,
        },
        {
          name: "classroom",
          label: "班级",
          value: "",
          type: "input",
          placeholder: "请输入班级",
          span: 8,
        },
      ],
      extraParams: () => this.withPageInfoData(),
      onResult: (res) => {
        this.handleSuccess(res);
      },
      onError: (error) => {
        console.log(error);
      },
    });
  },

  mounted() {},
  methods: {
    //获取表格数据
    selectTable(val) {
      this.tableLoading = true;
      this.filterList = [];
      requestGet({
        url: "/askForLeaveInfo/selectAskForLeaveInfo",
        params: {
          pageValue: val,
          pageSize: this.pageSize,
          userId: this.select.userId,
          userName: this.select.userName,
          classroom: this.select.classroom,
        },
      }).then((res) => {
        this.tableLoading = false;
        this.filterList = res.data.data;
        this.total = res.data.num;
      });
    },
    //查询
    doSearch() {
      //获取筛选框输入数据
      const { userId, userName, classroom } = this.generatorSearchParams();
      this.select.userId = userId;
      this.select.userName = userName;
      this.select.classroom = classroom;
      this.selectTable(1);
    },
    //重置查询
    resetSearch() {
      this.select.userId = "";
      this.select.userName = "";
      this.select.classroom = "";
      this.selectTable(1);
    },
    //分页
    currentChanged(val) {
      this.pageVal = val;
      this.selectTable(val);
    },
    //每页几条数据
    pageSizeChanged(val) {
      this.pageSize = val;
      this.selectTable(this.pageVal);
    },
    //刷新分页
    doRefresh() {
      this.selectTable(this.pageVal);
    },
  },
};
</script>

<style>
  .tableHeaderCZ{
    margin-top: 8px;
  }
  .left-enter{
  transform:translateX(100%);
}
.left-enter-to{
  transform:translateX(0);
}

.left-enter-active{
  transition: .5s;
}


.right-leave{
  z-index:100;
  transform:translateX(0);
}
.right-leave-to{
  z-index:100;
  transform:translateX(100%);
}

.right-leave-active{
  z-index:100;
  transition: .5s;
}
</style>

<style lang="scss" scoped>
.btn {
  margin: 0 auto;
}
.avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  vertical-align: middle;
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .avatar-vip {
    border: 2px solid #cece1e;
  }
  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}
.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>