<template>
  <div class="credit-manage-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>

    <div class="list-wrap screenSet" id="screenSet">
      <div class="header-title">学分发放管理</div>
      <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
        <div style="width: 75%; float:left;">
          <el-form-item label="项目编号：" class="search-item">
            <el-input v-model="searchForm.serialNo" size="small" class="form-width" placeholder="请输入项目编号"></el-input>
          </el-form-item>
          <el-form-item label="项目名称：" class="search-item">
            <el-input v-model="searchForm.projectName" size="small" class="form-width" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="项目时间：" class="search-item">
            <el-date-picker
              v-model="searchForm.beginTime"
              type="datetime"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始日期">
            </el-date-picker>
            <span style="color: #DCDFE6;">—</span>
            <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择结束日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="width: 25%; float: right;">
          <el-form-item class="btn-list">
            <el-button @click="goToSearch" type="primary" size="small">查询</el-button>
            <el-button @click="handleReset" size="small">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column align="center" prop="serialNo" label="项目编号" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="name" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="beginTime" label="项目开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="endTime" label="项目结束时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="status" label="项目状态" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="goToApplyDetail(scope.row)" type="text" size="small">查看申请明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          class="pagination-style"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totalRows"
          :current-page="searchForm.pageNo"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  import * as commonUtil from "../../utils/utils";
  import { 
    getSendListReq,
  } from '@/utils/cme/cmeApi'


  export default {
    data() {
      return {
        curmbFirst: "CME",
        curmbSecond: "学分发放管理",
        totalRows: 0,

        searchForm: {
          serialNo: '',
          projectName: '',
          beginTime: '',
          endTime: '',
          pageNo: 1,
          pageSize: 15,
        },

        tableData: [],
        multipleSelection: [],
        
      }
    },

    components: {
      BreadCrumb
    },

    created() {
      this.goToSearch();
      
    },
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      goToSearch() {
        this.searchForm.pageNo = 1;
        // this.searchForm.pageSize = 15;
        this.getSendList();
      },
      getSendList() {
        let req = this.searchForm;
        openLoading(this);
        getSendListReq(req).then(res => {
          closeLoading(this);
          if (res.code == "000000") {
            console.log('@@@@@@@', res)
            if (res.data && res.data.data) {
              this.tableData = res.data.data;
              this.totalRows = res.data.totalRows;
            } else {
              this.tableData = [];
            }
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },

      handleReset() {
        this.searchForm.serialNo = '';
        this.searchForm.projectName = '';
        this.searchForm.beginTime = '';
        this.searchForm.endTime = '';
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      goToApplyDetail(row) {
        console.log('去申请明细页面 ', row);
        this.$router.push({
          path: '/apply-detail',
          query: {
            id: row.id
          }
        })
      },

      handleSizeChange(val){
        console.log('handleSizeChange>>>')
        this.searchForm.pageSize = val;
        this.getSendList();
      },
      
      handleCurrentChange(val){
        // 切换当前页
        this.searchForm.pageNo = val;
        this.getSendList();
      },

    },

  }
</script>  

<style lang="scss">
  .credit-manage-wrap{
    .list-wrap{
      padding: 10px;
      background: #fff;
      .el-button--small{
        font-size: 14px;
      }
      .search-item{
        float: left;
      }
      .form-width{
        width: 200px;
      }
      .header-title {
        padding: 10px 12px 20px;
        font-size: 14px;
        color: #606266;
        border-bottom: 1px solid #efefef;
      }
      .btn-list{
        float: right;
        margin-right: 30px;
        .el-form-item__content{
          margin-left: 0 !important;
        }
      }
      .search-form-wrap{
        padding: 25px 0 20px;
        overflow: hidden;
        border-bottom: 1px dashed #efefef;
      }
      
    }
  }
</style>