<template>
  <div class="app-container">
    <div class="app-content">
      <div class="title">积分统计</div>

      <el-form class="search-form" :inline="true" v-if=" actName== '2'">
<!--        &lt;!&ndash; 快捷时间选择 &ndash;&gt;-->
<!--        <el-form-item>-->
<!--          <el-select v-model="value" placeholder="请选择日期" @change="handleTypeChange">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        &lt;!&ndash; 自定义时间范围 &ndash;&gt;-->
<!--        <el-form-item v-if="value === '0'">-->
<!--          <el-date-picker-->
<!--            v-model="dateRange"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            @change="handleDateRangeChange">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
              <el-form-item >
                <el-input v-model="queryParams.userId" placeholder="请输入用户ID"></el-input>
              </el-form-item>

        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>

      <div class="data-box">
        <div class="table-box">
          <el-button
            class="export"
            size="small"
            @click="handleExport"
            >
            导出
          </el-button>
          <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
            <el-tab-pane label="公司维度" name="1"></el-tab-pane>
            <el-tab-pane label="用户维度" name="2"></el-tab-pane>
          </el-tabs>
          <el-table
            :data="list"
            border
            :summary-method="getSummaries"
            show-summary
            max-height="500"
            style="width: 100%;">
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="nowIntegral" label="现有总积分"></el-table-column>
            <el-table-column prop="withdrawIntegral" label="待提现积分"></el-table-column>
            <el-table-column prop="disableIntegral" label="不可提现积分"></el-table-column>
            <el-table-column prop="finishIntegral" label="已提现积分"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { statistics,exportCommission } from "@/api/his/userIntegralLogs";
import resize from '../../dashboard/mixins/resize'

export default {
  name: 'Index',
  mixins: [resize],
  data() {
    return {
      queryParams:{
        type:1,
        userId:null
      },
      actName:"1",
      options: [
        { value: '1', label: '今天' },
        { value: '2', label: '昨天' },
        { value: '3', label: '本周' },
        { value: '4', label: '上周' },
        { value: '5', label: '本月' },
        { value: '6', label: '上月' },
        { value: '7', label: '本季度' },
        { value: '8', label: '上季度' },
        { value: '9', label: '本年' },
        { value: '10', label: '上年' },
        { value: '0', label: '自定义' }  // 添加自定义选项
      ],
      value: '5',
      dateRange: [],      // 自定义时间范围 [startTime, endTime]
      startTime: '',      // 开始时间
      endTime: '',        // 结束时间
      list: []
    }
  },

  created() {
    this.getList();
  },

  methods: {
    handleClickX(tab, event) {
      if(tab.name=="1"){
        this.queryParams.type=1;
        this.queryParams.userId=null;
      }else{
        this.queryParams.type=2;
      }
      this.getList();
    },
    // 切换时间类型
    handleTypeChange(val) {
      if (val !== '0') {
        this.dateRange = [];
        this.startTime = '';
        this.endTime = '';
      }
    },

    // 自定义时间范围变化
    handleDateRangeChange(val) {
      if (val && val.length === 2) {
        this.startTime = val[0];
        this.endTime = val[1];
      } else {
        this.startTime = '';
        this.endTime = '';
      }
    },

    handleExport() {
      // // 校验自定义时间
      // if (this.value === '0' && (!this.startTime || !this.endTime)) {
      //   this.$message.warning('请选择自定义时间范围');
      //   return;
      // }
      //
      // var data = {
      //   type: this.value === '0' ? null : this.value,
      //   startTime: this.startTime,
      //   endTime: this.endTime
      // }
      exportCommission(this.queryParams).then((response) => {
        this.download(response.msg);
      });
    },

    getList() {
      // 校验自定义时间
      // if (this.value === '0' && (!this.startTime || !this.endTime)) {
      //   this.$message.warning('请选择自定义时间范围');
      //   return;
      // }
      //
      // var data = {
      //   type: this.value === '0' ? null : this.value,
      //   startTime: this.startTime,
      //   endTime: this.endTime
      // }

      statistics(this.queryParams).then((response) => {
        this.list = response.list;
      });
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }

        const values = data.map(item => Number(item[column.property]));

        if (!values.every(value => isNaN(value))) {
          const sum = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);

          // 保留两位小数
          sums[index] = sum.toFixed(2);
        } else {
          sums[index] = '';
        }
      });

      return sums;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  // ... 其他样式不变

  .data-box {
    // ... 其他样式不变

    .table-box {
      margin-top: 15px;

      /* 添加 clearfix 清除浮动 */
      &::after {
        content: '';
        display: table;
        clear: both;
      }

      .export {
        float: right;
        margin: 10px 0px;
        position: relative;  /* 添加相对定位 */
        z-index: 100;        /* 提高层级 */
        cursor: pointer;      /* 确保鼠标样式 */
      }

      /* 确保 tabs 不会覆盖按钮 */
      .el-tabs {
        float: left;
        width: calc(100% - 120px);  /* 为按钮留出空间 */
      }
    }
  }
}
</style>
