<template>
    <div>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#">统计报表</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          分组统计日报表
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <!--
        要resetFields起作用，必须配置:model和prop
      -->
      <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
        <el-form-item label="选择日期" prop="dateRange">
            <el-date-picker
              size="mini"
              v-model="queryModel.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
                format="yyyy-MM-dd">
            </el-date-picker>
            </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="ios-search"
            @click="changePage(false)"
            :loading="loading"
          >查询</el-button>&nbsp;
          <el-button
            type="info"
            size="mini"
            style="margin-left: 8px"
            @click="handleReset('queryForm')"
          >重置</el-button>&nbsp;
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-row class="button-group">
        <el-button
          type="primary"
          size="small"
          plain
          icon="el-icon-upload2"
          @click="exportXls"
        >导出数据</el-button>
        <!-- <el-button
          type="primary"
          size="small"
          plain
          icon="el-icon-upload2"
          @click="handleTest"
        >测试保存</el-button> -->
      </el-row>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="500"
        stripe
        :header-cell-style="headClass"
        @sort-change="sortChange"
      >
        <el-table-column  prop="date" label="日期" width="120"></el-table-column>
        <el-table-column  label="登录人数">
            <el-table-column  prop="loginNum"  label="新增人数">
            </el-table-column>
            <el-table-column  prop="totalLoginNum"  label="累计人数">
            </el-table-column>
        </el-table-column>
        <el-table-column  label="注册人数">
            <el-table-column  prop="dailyPersonRegNum"  label="今日注册人数">
            </el-table-column>
            <el-table-column  prop="totalPersonRegNum"  label="累计注册人数">
            </el-table-column>
        </el-table-column>
        <el-table-column   label="认证人数">
            <el-table-column  prop="personNum"  label="新增人数">
            </el-table-column>
            <el-table-column  prop="totalPersonNum"  label="累计人数">
            </el-table-column>
        </el-table-column>
        <el-table-column   label="简历数">
            <el-table-column  prop="totalJobInformation"  label="累计简历数">
            </el-table-column>
        </el-table-column>
        <el-table-column    label="认证企业数">
            <el-table-column  prop="enterpriseNum"  label="新增线上登记">
            </el-table-column>
            <el-table-column  prop="totalEnterpriseNum"  label="累计企业数量">
            </el-table-column>
        </el-table-column>
        <el-table-column   label="岗位数量">
            <el-table-column  prop="recruitNum"  label="新增发布岗位数量">
            </el-table-column>
            <el-table-column  prop="totalRecruitNum"  label="实时发布岗位数">
            </el-table-column>
            <el-table-column  prop="totalRecruitStatusNum"  label="累计岗位发布数量">
            </el-table-column>
            <el-table-column  prop="jobRequirementNum"  label="岗位需求人数">
            </el-table-column>
            <el-table-column  prop="totalJobRequirementNum"  label="累计岗位需求人数">
            </el-table-column>
        </el-table-column>
        <el-table-column  label="求职数">
            <el-table-column  prop="jobInformationNum"  label="今日报名人数">
            </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </template>
  <script>
  import reportApi from "@/api/statistical/report";
  
  export default {
    name: 'statisticalDailyGroupReportList',
    data() {
      var self = this;
  
      return {
        queryModel: {
          dateRange:[this.initCurDate(),this.initCurDate()]
        },
        loading: false,
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        totalPages: 0,
        totalElements: 0,
        field: "",
        direction: "",
        pageSizeList: [10, 20, 30],
        multipleSelection: [],
        modalTitle: "",      
        businessKey: "",
        showModal: false,
        dialogFormVisible:false,
        newPassword:"",
        roleResult:[],
        props: {
          // 配置项（必选）
          value: "id",
          label: "name",
          children: "children"
        },
      };
    },
    methods: {
        headClass(){
            return "text-align: center;"
        },
        initCurDate(){
            const now = new Date();
            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            const formattedTime = year +"-"+ month +"-"+ day;
            return formattedTime;
        },
        handleTest(){
            var self = this;
    
            reportApi.dailyGroupReportTest().then(function(response) {
              var jsonData = response.data;
    
            }).catch((error)=>{
              self.loading = false;
            });
        },
        changePage(exportFlag) {
            var self = this;
            var formData = new FormData();

            //alert(exportFlag)
    
            formData.append("date", self.queryModel.date);
            formData.append("exportFlag", exportFlag);

            formData.append("dateRange", self.queryModel.dateRange);
    
            self.loading = true;
    
            reportApi.dailyGroupReport(formData).then(function(response) {
            self.loading = false;
    
            var jsonData = response.data;
    
            if(jsonData.result){
                if(exportFlag){
                    //导出
                    self.$message({
                        showClose: true,
                        type: "success",
                        message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
                        dangerouslyUseHTMLString: true,
                        duration: 30000
                    });
                }
                else{
                    //分页查看
                    var page = jsonData.data;
                    self.tableData = page.data;
                }
            }
            else {
                self.$message({
                    message: jsonData.message + "",
                    type: "warning"
                });
            }
            }).catch((error)=>{
            self.loading = false;
            });
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;
        },
        sortChange(data) {
            this.field = data.column.field;
            this.direction = data.order == "ascending" ? "asc" : "desc";
    
            this.changePage(false);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        onDetailModalClose(refreshed) {
            this.showModal = false;
    
            if(refreshed) {
            this.changePage(false);
            }
        },
        exportXls() {
        this.changePage(true);
      },
    },
    mounted: function() {
      var self = this;
      this.changePage(false);
    },
    components: {
    }
  };
  </script>
  <style lang="scss" scoped>
  .el-breadcrumb {
    margin: 10px;
    line-height: 20px;
  }
  
  .el-divider {
    margin: 5px 0;
  }
  
  .demo-form-inline {
    margin-left: 10px;
    text-align: left;
  }
  
  .button-group {
    padding: 10px;
    text-align: left;
  }
  </style>