<template>
  <div>
    <el-row>
        <el-col :span="24" style="margin-bottom:5px;">
          <el-button size="small" type="success" @click="addTask()">新建统计任务</el-button>
        </el-col>
        <el-col :span="24">
          <el-card :body-style="{ padding: '5px 10px' }">
            <t-table :table-data="tableData" :table-loading="tableLoading" @clickBtn="handleClickBtn" />
            <el-pagination
              layout="total, prev, pager, next, sizes"
              :page-size="pagination.pageSize"
              :page-sizes="[10, 50, 100, 500,1000]"
              :current-page="pagination.pageNum"
              :total="pagination.total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-card>
        </el-col>
    </el-row>
    <!-- 查看 -->
    <detail ref="detailRef"  :visible="isShowDetail" :tableRow="tableRow" @clickCancel="cancel"></detail>
    <!-- 新建任务 -->
    <add-task :visible="isShowAddTask" @clickCancel="cancel" @clickSubmit="handleAddTask"></add-task>
  </div>
</template>
<script>
import {  message,} from "@/utils/common";
import {queryPage,statisticsPdfData} from "@/api/archives-management/statistics.js";
import tTable from "./components/table.vue";
import detail from "./components/detail.vue";
import addTask from "./components/addTask.vue";
export default {
  data() {
    return {
      tableRow:{}, // 行数据
      isShowAddTask:false,
      isShowDetail:false,
      tableLoading:false,
      tableData: [{id:0,pci:20210101,time:'20220101',taskName:'aaa',state:0},
      {id:1,pci:20210101,time:'20220101',taskName:'aaa',state:1},
      {id:2,pci:20210101,time:'20220101',taskName:'aaa',state:0}],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  components: {
    tTable,
    detail,
    addTask
  },
 
  methods: {
    // 查询接口
    getData() {
      this.tableLoading = true;
      let params = {
        limit: this.pagination.pageSize,
        page: this.pagination.pageNum
      }
      queryPage(params).then((res)=>{
        if(res.code == 100){
          this.tableData = res.body.list;
          this.pagination.total = res.body.total;
        }
      }).finally(()=>{
        this.tableLoading = false;
      })
      // 调用接口
    },
    // 创建任务
    addTask(){
      this.isShowAddTask = true;
    },
    handleAddTask(params){
      let _params = {
        batchNo:params.batchNo,
        type:params.type,
        classIds:params.classIds
      }
      statisticsPdfData(_params).then((res)=>{
        if(res.code == 100){
          message('success',res.msg,3000);
          // 刷新数据
          this.getData();
        }
      }).finally(()=>{
        this.isShowAddTask = false;
      })
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.getData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getData()
    },
    // 查看
    handleClickBtn(row){
      this.isShowDetail = true;
      // 调用查看数据
      this.tableRow = row;
      this.$nextTick(()=>{
        this.$refs.detailRef.getViewData();
      })
          
      
    },
    
    cancel(){
      this.isShowDetail = false;
      this.isShowAddTask = false
    }
  },
  mounted() {
    
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 5px;
  display: flex;
  justify-content: space-around;
  background: #f6f8fc;
  height: 100%;

  .tree-box {
    width: 22%;

    .el-tree {
      width: 100%;
      margin-top: 10px;
    }

    .clearfix {
      font-weight: 600;
      font-size: 17px;
      letter-spacing: 3px;
    }
  }

  .form-box {
    width: 77%;
    height: calc(100vh - 105px);
    overflow-y: auto;
    .clearfix {
      font-weight: 600;
      font-size: 17px;
      letter-spacing: 3px;
    }
  }
}
</style>
