<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"
    />
    <TableBody ref="tableBody">
      <template>
        <el-table
          ref="table"
          height="441px"
          style="font-size:14px;"
          v-loading="tableLoading"
          :data="filterList || dataList"
          :header-cell-style="tableConfig.headerCellStyle"
          :size="tableConfig.size"
          :stripe="tableConfig.stripe"
          :border="tableConfig.border"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="45"
          />
          <el-table-column align="center" label="学号" width="130px">
            <template slot-scope="scope">
              {{ scope.row.userId }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="姓名" prop="userName" width="70px"/>
          <el-table-column align="center" label="班级" prop="classroom" width="160px"/>
          <el-table-column align="center" label="寝室楼" width="70px">
            <template slot-scope="scope">
              {{ scope.row.buildingNo+'号楼' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="寝室号" prop="roomNo" width="70px"/>
          <el-table-column align="center" label="床铺" width="70px">
            <template slot-scope="scope">
              {{ scope.row.bedNo+'号床' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="上次登录时间"
            prop="lastLoginTime"
            width="200px"
          />
          <el-table-column
            align="center"
            label="上次登录IP"
            prop="lastLoginIp"
          />
          <el-table-column label="操作" width="145px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
            </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: "TableWithSearch",
  mixins: [
    TableMixin,
    LikeSearchMixin,
    GetDataMixin,
    PageModelMixin,
    RefreshActionMixin,
  ],
  computed: {
    ...mapGetters(["avatar", "uid"]),
  },
  data() {
    return {
      filterList: null,
      pageVal: 1,
      pageSize: "20",
      total: 0,
      tableLoading: true,
      userId:'',
      userName:''
    };
  },
  created() {
    this.selectTable(this.pageVal);
    this.initLikeSearch({
      url: "/",
      conditionItems: [
        {
          name: "userName",
          label: "姓名",
          value: "",
          type: "input",
          placeholder: "请输入姓名",
          span: 4,
        },
        {
          name: "userId",
          label: "学号",
          value: "",
          type: "input",
          placeholder: "请输入学号",
          span:4
        },{
            type:'span_r',
            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: "/student/selectStudentByVague",
        params: {
          userId:this.userId,
          userName:this.userName,
          pageValue: val,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        this.tableLoading = false;
        this.filterList = res.data.data;
        this.total = res.data.num;
      });
    },
    //查询
    doSearch() {
      const { userName, userId } = this.generatorSearchParams();
      this.userId = userId
      this.userName = userName
      this.selectTable(1)
    },
    //重置查询
    resetSearch() {},
    //分页
    currentChanged(val) {
      this.pageVal = val
      this.selectTable(val);
    },
    //每页几条数据
    pageSizeChanged(val) {
      this.pageSize = val;
      this.selectTable(this.pageVal);
    },
    //刷新分页
    doRefresh() {
      this.selectTable(this.pageVal)
    },
    //多选操作
    handleSelectionChange(val){
      console.log(val);
    }
  },
};
</script>

<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>
