<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>
    <TableHeader :can-collapsed="false" class="tableHeaderCZ">
      <template slot="right">
        <el-button
          v-permission="['admin']"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="onAgreeBy"
        >同意所选
        </el-button>
        <el-button
          v-permission="['admin']"
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="onRefuseBy"
        >拒绝所选
        </el-button>
      </template>
    </TableHeader>
    <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="39"/>
          <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="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 label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="onAgree(scope.$index, scope.row)">同意</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="onRefuse(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 ,requestPost} from "@/utils/request/request";
import TableMixin, { PageModelMixin } from "@/mixins/TableMixin";
import {
  LikeSearchMixin,
  GetDataMixin,
  RefreshActionMixin,
} from "@/mixins/ActionMixin";
export default {
  name: "TUntreated",
  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: "",
      },
      selectionList:[]
    };
  },
  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: "/askforleave/selectAskForLeave",
        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;
      });
    },
    onAgree(index,row){
        const fmData = new FormData()
        fmData.append('userId',row.userId)
        fmData.append('flag',1)
        requestPost({
            url:'/askforleave/deal',
            data:fmData
        }).then(res=>{
            this.$message({
                message: '已同意',
                type: 'success'
            });
            this.selectTable(this.pageVal);
        }).catch(err=>{
            this.$message.error('操作失败，请重试')
        })
    },
    onRefuse(index,row){
        const fmData = new FormData()
        fmData.append('userId',row.userId)
        fmData.append('flag',-1)
        requestPost({
            url:'/askforleave/deal',
            data:fmData
        }).then(res=>{
            this.$message({
                message: '已拒绝',
                type: 'success'
            });
            this.selectTable(this.pageVal);
        }).catch(err=>{
            this.$message.error('操作失败，请重试')
        })
    },
    onAgreeBy(){
        const fmData = new FormData()
        fmData.append('userId',this.selectionList)
        fmData.append('flag',1)
        requestPost({
            url:'/askforleave/deal',
            data:fmData
        }).then(res=>{
            this.$message({
                message: '已同意所选',
                type: 'success'
            });
            this.selectionList.length = 0
            this.selectTable(this.pageVal);
        }).catch(err=>{
            this.$message.error('操作失败，请重试')
        })
    },
    onRefuseBy(){
        const fmData = new FormData()
        fmData.append('userId',this.selectionList)
        fmData.append('flag',-1)
        requestPost({
            url:'/askforleave/deal',
            data:fmData
        }).then(res=>{
            this.$message({
                message: '已拒绝所选',
                type: 'success'
            });
            this.selectionList.length = 0
            this.selectTable(this.pageVal);
        }).catch(err=>{
            this.$message.error('操作失败，请重试')
        })
    },
    //查询
    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);
    },
    //多选操作
    handleSelectionChange(list) {
        let userIdList = []
        list.forEach(item => {
            userIdList.push(item.userId)
        });
        this.selectionList = userIdList
    },
  },
};
</script>

<style>
  .tableHeaderCZ{
    margin-top: 8px;
  }
</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>

