<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:value="searchForm.serialNo"
              size="small"
              class="form-width"
              placeholder="请输入项目编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称：" class="search-item">
            <el-input
              v-model:value="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:value="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:value="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
        >
          <template v-slot="scope">
            {{ returnStatusText(scope.row.timeStatus) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button
              @click="goToApplyDetail(scope.row)"
              type="text"
              size="small"
              >查看申请明细</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>没有查询到相关结果</p>
            </div>
          </div>
        </template>
      </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,
      },
      projectStatus: {
        1: '进行中',
        2: '已结束',
      },
      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
    },
    returnStatusText(status) {
      let statusVal = this.projectStatus[status]
      return statusVal ? statusVal : '-'
    },
    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.goToSearch()
    },

    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;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
</style>
