<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-button icon="el-icon-download" size="mini" type="primary" plain @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex;  margin-bottom: 20px">
      <div
        style="color:white; font-size: 17px; font-weight: bold;background-color: red;padding: 8px 20px;border-radius: 5px;align-items: center;text-align: center;">
        交易总人数
        <br>
        {{ extendMap.totalFeeCount }}
      </div>
      <div
        style="color:white; font-size: 17px;margin: 0 5px; font-weight: bold;background-color: #eeae44;padding: 8px 20px;border-radius: 5px;align-items: center;text-align: center;">
        交易总金额 <br>
        ￥{{ extendMap.totalFeeMoney }}
      </div>
      <!-- <div
        style="color:white; font-size: 17px; font-weight: bold;background-color: #d5529d;padding: 8px 20px;border-radius: 5px;align-items: center;text-align: center;">
        实际到账总金额 <br>
        ￥{{ extendMap.totalActuallyFeeMoney }}
      </div> -->
    </div>
    <el-table border="" v-loading="loading" :data="ZigeTrainingList">
      <el-table-column label="序号" width="80" align="center" type="index">
        <template slot-scope="scope">
          {{ getXvhao(scope.$index, queryParams) }}
        </template>
      </el-table-column>
      <el-table-column label="期次" align="center" prop="getQiYearName">
      </el-table-column>
      <el-table-column label="交费人数（人）" align="center" prop="feeCount">
      </el-table-column>
      <el-table-column label="交费金额（元）/人" align="center" prop="feeBz" />
      <el-table-column label="交费总金额（元）" align="center" prop="totalMoney" />
      <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="交费详细" height="600px" :visible.sync="dialogVisible" width="90%">
      <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExportMoney">导出</el-button>
      <el-table height="70.1vh" style="overflow-x: hidden;margin-top: 10px;" 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="120" align="center" prop="qiYearName">
        </el-table-column>
        <el-table-column label="姓名" width="70" align="center" prop="userName" />
        <el-table-column label="性别" width="50" align="center" prop="sex" />
        <el-table-column label="身份证号" width="165" 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="执业单位" min-width="200" 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="sfqk">
        </el-table-column>
        <el-table-column label="开票名称" width="130" align="center" prop="kpmc" />
        <el-table-column label="开票方式" width="130" align="center" prop="kpfs" />
        <el-table-column label="系统编号" width="190" align="center" prop="xtbh" />
        <el-table-column label="交易单号" width="195" align="center" prop="jydh" />
        <el-table-column label="交易金额" align="center" prop="jfje" />
        <el-table-column label="交费时间" width="150" align="center" prop="jfsj">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.jfsj, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
      </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, getFeeDetailsList, exportFeeDetailsList } from '@/api/tongji/moneyTongji'
export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      total: 0,
      totalMoney: 0,
      queryParamsMoney: {
        pageNum: 1,
        pageSize: 10,
        trainId: '',
        // orderByColumn: "adddate",
        // isAsc: "desc",
      },
      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
      },
      rowId: null,
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    handleExportMoney() {
      this.$modal.loading('数据导出中，请稍候...')
      this.download('/web/statistics/exportFeeDetailsList', {
        TrainId: this.rowId
      }, `费用明细.xlsx`)
    },
    saveAs(text, name, opts) {
      saveAs(text, name, opts);
    },
    getListMoney() {
      if (this.dateRange.length == 0) {
        this.dateRange = [null, null]
      }
      this.$modal.loading('数据加载中，请稍候...')
      getFeeDetailsList(this.addDateRange(this.queryParamsMoney, this.dateRange)).then(response => {
        this.moneyList = response.rows;
        this.totalMoney = response.total;
        this.$modal.closeLoading()
      }).catch(err => {
        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/exportFeeDetailsList', {
        ...this.queryParams, ...this.dateRange
      }, `费用明细.xlsx`)
    },
    getList() {
      this.$modal.loading('数据加载中，请稍候...')
      getFeeStatistics(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.ZigeTrainingList = response.rows;
        this.extendMap = response.extendMap;
        this.total = response.total;
        this.$modal.closeLoading()
      }).catch(err => {
        this.$modal.closeLoading()
      })
    },
    handleView(row) {
      this.rowId = row.trainId
      console.log("🚀 ~ handleView ~ row:", row)
      this.dialogVisible = true
      this.queryParamsMoney.trainId = row.trainId
      this.getListMoney()
    }
  },
};
</script>
<style lang="scss" scoped></style>
