<template>
  <div class="item-list">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="itemlist-content screenSet" id="screenSet">
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form ref="serchForm" :model="formData" label-width="75px" style="width:100%;">
          <el-col :span="6">
            <el-form-item label="项目状态:">
              <el-select
                v-model="formData.status"
                size="small"
                style="width: 100%;"
                placeholder="请选择项目状态"
              >
                <el-option
                  v-for="(item,index) in statusSelect"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model="formData.name" size="small" placeholder="请输入项目名称">
                <i slot="suffix" class="el-icon-search"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding:0;text-align:right;padding-right:15px;">
            <el-button type="primary" size="small" @click="searchData()">查询</el-button>
            <el-button type="default" size="small" @click="resetForm()" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="projectName" label="项目名称" min-width="200" align="center"></el-table-column>
        <el-table-column prop="timeStatus" label="项目状态" min-width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.timeStatus | reportStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="projectBegintime" label="开始时间" min-width="160" align="center">
          <template slot-scope="scope">{{ scope.row.projectBegintime }}</template>
        </el-table-column>
        <el-table-column prop="projectEndtime" label="结束时间" min-width="160" align="center">
          <template slot-scope="scope">{{ scope.row.projectEndtime }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button style="color:#509284" type="text" size="small" @click="go(scope.row)">查看学情报告</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png" />
            <p>没有找到符合的结果</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNo"
          :page-sizes="[20, 50 ,100, 200]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
let vm = null;

export default {
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "项目列表",
      formData: {
        //搜索信息
        status: "",
        name: "",
        pageNo: 1, //当前是第几页
        pageSize: 20 //页面总数
      },
      statusSelect: [
        //项目状态
        {
          label: "全部",
          value: ""
        },
        {
          label: "进行中",
          value: 1
        },
        {
          label: "已结束",
          value: 2
        }
      ],
      tableData: [],
      totalRows: 0, //数据总数
      idType: '',
    };
  },
  components: {
    BreadCrumb
  },
  created() {
    vm = this;
    vm.idType = localStorage.getItem('storageIdType');
    vm.search();
  },
  // 挂载到Dom完成时
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    searchData() {
      vm.formData.pageNo = 1;
      vm.search();
    },
    // 搜索列表
    search() {
      let req = {};
      req = this.formData;
      openLoading(vm);
      vm.GET("portal/portalInfo/getPortalReportProject", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          if(res.data.totalRows == 0) {
            vm.$message("没有找到符合的结果");
          }
          vm.tableData = res.data.projectList;
          vm.totalRows = res.data.totalRows;
        } else {
          vm.$message(res.message);
        }
      });
    },
    // 重置搜索信息
    resetForm() {
      this.formData = {
        status: "",
        name: "",
        pageNo: 1, //当前是第几页
        pageSize: 20 //页面总数
      };
      vm.search();
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      vm.formData.pageSize = val;
      vm.search();
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.formData.pageNo = val;
      vm.search();
    },
    //跳转到报告详情页
    go(row) {
      let routerData = {
        id: row.id,
        projectName: row.projectName,
      };
      vm.$router.push({ path: "/item-list" , query: routerData });
    }
  }
};
</script>
<style lang="scss">
.item-list {
  .itemlist-content {
    padding: 10px;
    background: #fff;
  }
}
</style>