<template>
  <div class="app-container">
    <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="交易时间" prop="ZcsZhuanYe">
        <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-button style="margin-bottom: 10px;" icon="el-icon-download" size="mini" type="primary" plain
      @click="handleExport">导出</el-button>

    <el-table border="" v-loading="loading" :data="ZigeTrainingList">
      <el-table-column label="序号" width="60" align="center" type="index">
        <template slot-scope="scope">
          {{ getXvhao(scope.$index, queryParams) }}
        </template>
      </el-table-column>
      <el-table-column label="期次" width="130" align="center" prop="qiciName">
      </el-table-column>
      <el-table-column width="300" label="网络计划名称" align="center" prop="wljhmc">
      </el-table-column>
      <el-table-column label="报名上限" align="center" prop="bmsx" />
      <el-table-column label="已报人数" align="center" prop="ybrs" />
      <el-table-column label="交费人数" align="center" prop="yjfrs" />
      <el-table-column label="未交费人数" align="center" prop="wjfrs" />
      <el-table-column label="交费已学习" align="center" prop="jfyxx" />
      <el-table-column label="交费未学习" align="center" prop="jfwxx" />
      <el-table-column label="交费学习中" align="center" prop="jfxxz" />
      <el-table-column label="交费学习完" align="center" prop="jfxxw" />
      <el-table-column label="考试通过" align="center" prop="kstg" />
      <el-table-column label="考试未通过" align="center" prop="kswtg" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <el-dialog top="3vh" title="网络学习明细" :visible.sync="dialogVisible" width="85%">
      <!-- <el-button style="margin-bottom:10px" size="mini" type="primary" icon="el-icon-download"
        @click="handleExportInfo()">导出</el-button> -->
      <el-table height="70.1vh" style="overflow-x: hidden;" v-loading="loading" :data="moneyList">
        <el-table-column label="序号" width="50" align="center" type="index">
          <template slot-scope="scope">
            {{ getXvhao(scope.$index, queryParamsMoney) }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="期次" width="110" align="center" prop="QiCi">
          <template slot-scope="scope">
            {{ scope.row.QiciYear + "年第" + scope.row.QiCi + "期" }}
          </template>
        </el-table-column> -->
        <el-table-column label="姓名" width="110" align="center" prop="userName" />
        <el-table-column label="性别" width="50" align="center" prop="sex" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <!-- <el-table-column label="培训类别" width="100" align="center" prop="pxlb" /> -->
        <!-- <el-table-column label="证书编号" width="170" align="center" prop="idCard" /> -->
        <el-table-column label="执业单位" align="center" prop="qiname" />
        <!-- <el-table-column label="证书有效期至" width="100" align="center" prop="yxqz">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yxqz, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="报名时间" width="150" align="center" prop="addDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.bmsj, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="培训学时/分钟" align="center" prop="kpmc">
          <template slot-scope="scope">
            {{ scope.row.pxxs + "学时/" + scope.row.pxfz + "分钟" }}
          </template>
        </el-table-column>
        <el-table-column label="已学分钟" width="120" align="center" prop="yxfz" />
        <el-table-column label="是否完成学时" width="150" align="center" prop="sfwcxs" />
        <el-table-column label="考试情况" width="150" align="center" prop="ksqk" />
      </el-table>
      <pagination v-show="totalMoney > 0" :total="totalMoney" :page.sync="queryParamsMoney.pageNum"
        :limit.sync="queryParamsMoney.pageSize" @pagination="getListMoney" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import { getFeeStatistics, getFeeDetailsListEdu, exportFeeDetailsList, getWebLearnPersonTraining } from '@/api/tongji/moneyTongji'
export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      total: 0,
      totalMoney: 0,
      queryParamsMoney: {
        pageNum: 1,
        pageSize: 10,
        trainId: ''

      },
      moneyList: [],
      dialogVisible: false,
      dateRange: [

      ],
      ZigeTrainingList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(1); // 设置为本月的第一天
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(0); // 设置为本年的第一月
              start.setDate(1); // 设置为本年的第一天
              picker.$emit('pick', [start, end]);
            }
          },
        ]
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // orderByColumn: "feeshenhetime",
        // isAsc: "desc",
      },
      extendMap: {
        totalActuallyFeeMoney: 0,
        totalFeeCount: 0,
        totalFeeMoney: 0
      },
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    handleExportInfo() {
      this.$modal.loading('数据导出中，请稍候...')
      this.download('/web/statistics/exportWebLearnDetailsList', {
        TrainId: this.queryParamsMoney.trainId
      }, `网络学习明细.xlsx`)
    },
    saveAs(text, name, opts) {
      saveAs(text, name, opts);
    },
    getListMoney() {
      if (this.dateRange.length == 0) {
        this.dateRange = [null, null]
      }
      this.$modal.loading("数据加载中,请稍候...");
      getFeeDetailsListEdu(this.addDateRange(this.queryParamsMoney, this.dateRange)).then(response => {
        this.moneyList = response.rows;
        this.totalMoney = response.total;
        this.$modal.closeLoading();
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = []
      this.handleQuery();
    },
    handleExport() {
      this.$modal.loading('数据导出中，请稍候...')
      this.download('/web/statistics/exportWebLearnDetailsList', {
      }, `网络学习明细.xlsx`)
    },
    getList() {
      this.$modal.loading("数据加载中,请稍候...");
      getWebLearnPersonTraining(this.queryParams).then(response => {
        this.ZigeTrainingList = response.rows;
        this.extendMap = response.extendMap;
        this.total = response.total;
        this.$modal.closeLoading();
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    handleView(row) {
      console.log("🚀 ~ handleView ~ row:", row)
      this.dialogVisible = true
      this.queryParamsMoney.trainId = row.trainId
      this.getListMoney()
    }
  },
};
</script>
<style lang="scss" scoped></style>
