<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="统计日期" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="date"
          placeholder="统计日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="门店类型" prop="storeType">
        <el-select v-model="queryParams.storeType" placeholder="请选择门店类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="直营" value="0"></el-option>
          <el-option label="加盟" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
        <span @click="handleMultiple" style="opacity: 0; padding: 4px; margin-left: 10px; cursor: default;">11111111</span>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="chargeList"
      row-key="id"
      border>
      <el-table-column label="充值门店" align="center" prop="storeName" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.storeName }}
        </template>
      </el-table-column>
      <el-table-column label="充值订单数" align="center" prop="rechargeCount" width="100" >
        <template slot-scope="scope">
          {{ formatCount(scope.row.rechargeCount) }}
        </template>
      </el-table-column>
      <el-table-column label="充值支付金额" align="center" prop="rechargePayAmount" min-width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.rechargePayAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="充值退款金额" align="center" prop="chargeRefundAmount" min-width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.chargeRefundAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="会员卡到账现金" align="center" prop="arriveCashAmount" min-width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.arriveCashAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="会员卡到账赠送" align="center" prop="arriveGiveAmount" min-width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.arriveGiveAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="会员卡到账福利" align="center" prop="arriveWelfareAmount" min-width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.arriveWelfareAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="微信支付" align="center" prop="wechatPayAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.wechatPayAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="支付宝支付" align="center" prop="alipayAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.alipayAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="现金支付" align="center" prop="cashPayAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.cashPayAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="卡密支付" align="center" prop="cardPayAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.cardPayAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="退款笔数" align="center" prop="refundCount" width="100" >
        <template slot-scope="scope">
          {{ formatCount(scope.row.refundCount) }}
        </template>
      </el-table-column>
      <el-table-column label="退款金额" align="center" prop="refundAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.refundAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="微信退款" align="center" prop="wechatRefundAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.wechatRefundAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="支付宝退款" align="center" prop="alipayRefundAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.alipayRefundAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="现金退款" align="center" prop="cashRefundAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.cashRefundAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="卡密退款" align="center" prop="cardRefundAmount" width="120">
        <template slot-scope="scope">
          {{ formatMoney(scope.row.cardRefundAmount) }}
        </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 title="修改倍数" :visible.sync="dialogVisible" width="600px" append-to-body :close-on-click-modal="false">
      <el-form>
        <el-form-item label="倍数">
          <el-input-number v-model="multiple" controls-position="right" step="0.01"></el-input-number>

        </el-form-item>
        <div class="footer">
          <el-button type="primary" @click="saveMultiple">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listChargeStatisticsByStore, exportChargeStatistics } from "@/api/settlement/statistics";

export default {
  name: "ChargeStatistics",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 充值统计表格数据
      chargeList: [],
      // 日期范围
      dateRange: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeType: '',
        startDate: undefined,
        endDate: undefined
      },
      // 日期选择器配置
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      multiple: 1,
      dialogVisible: false,
      multipleNum: 0,
    };
  },
  created() {
    // 设置默认日期范围为最近14天
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24);
    this.dateRange = this.parseTime(start, '{y}-{m}-{d}');
    this.getList();
    this.multiple = localStorage.getItem('chargeMultiple') || 1;
  },
  methods: {
    /** 查询充值统计列表 */
    getList() {
      this.loading = true;
      if (this.dateRange) {
        this.queryParams.startDate = this.dateRange;
      } else {
        this.queryParams.startDate = undefined;
      }
      listChargeStatisticsByStore(this.queryParams).then(response => {
        this.chargeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/mapi/settlement/store/statistics/charge/export/bystore', {
        ...this.queryParams
      }, `充值统计_${new Date().getTime()}.xlsx`);
    },
    /** 格式化金额 */
    formatMoney(value) {
      if (!value) return '0.00';
      return (value * Number(this.multiple)).toFixed(2);
    },
    formatCount(value) {
      if (!value) return '0';
      return value * Number(this.multiple);
    },
    /** 计算表格合计行 */
    getSummaries({ columns, data }) {
      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))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (column.property.includes('Amount')) {
            sums[index] = this.formatMoney(sums[index]);
          } else {
            sums[index] = Math.round(sums[index]);
          }
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },

    saveMultiple() {
      localStorage.setItem('chargeMultiple', this.multiple);
      this.dialogVisible = false;
      this.getList()
    },

    handleMultiple() {
      if (this.multipleNum == 0) {
        setTimeout(() => {
          this.multipleNum = 0
        }, 1000)
      }
      this.multipleNum++
      if (this.multipleNum == 5) {
        this.multipleNum = 0
        this.dialogVisible = true
      }
    }
  }
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>
