<!--
 * @Description: 财务管理 => 快捷对账单
 * @Author: Rockery
 * @Date: 2024-11-14 09:44:00
 * @LastEditors: ygh
 * @LastEditTime: 2024-11-14 09:44:00
-->

<template>
  <div class="app-container app-container-scheduling">
    <div class="app-container_flex_auto">
      <div class="app-container_form app-container-queryform" v-show="showSearch">
        <!-- 页面查询表单 Start -->
        <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
          <el-form-item label="演出日期" label-width="80px">
            <el-date-picker style="width: 250px;" v-model="queryParams.performDate" type="daterange" :clearable="false"
              value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="80px" label="支付账号">
            <el-select
              v-model="queryParams.unionMid"
              placeholder="支付账号"
              clearable
              style="width: 100%"
            >
                <el-option
                  v-for="dict in dict.type.pay_mchid"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" prop="payWay">
          <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
            <el-option
              v-for="dict in dict.type.pay_way_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left: 10px;" 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>
        <!-- 页面查询表单 End -->
      </div>

      <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
        <!-- 页面批量操作按钮 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-hasPermi="['financeMr:statements:export']" type="warning" plain icon="el-icon-download"
              size="mini" :disabled="tableDataList.length < 1" @click="handleExport"
              v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出</el-button>
          </el-col>

          <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
        </el-row>

        <div class="app-container_table_main">
          <!-- 页面表格数据区域 Start -->
          <el-table v-loading="loading" ref="statementsTableRef" :data="tableDataList" border show-summary row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="cust-table" max-height="530px">
            <el-table-column label="日期" align="center" prop="performDate" width="150" />
            <el-table-column label="演出时段" align="center" prop="performTime" width="150" />
            <el-table-column label="下单人数(个)" align="center" prop="viewersCount" width="150" />
            <el-table-column label="交易总额(元)" align="center" prop="orderPrice" width="150" />
            <el-table-column label="核销金额(元)" align="center" prop="usePriceTotal" width="150" />
            <el-table-column label="应到账金额(元)" align="center" prop="realPrice" width="160" />
            <el-table-column label="分销金额(元)" align="center" prop="retailPriceTotal" width="150" />
            <!-- <el-table-column label="费率(%)" align="center" prop="withdrawRate" width="200" />
            <el-table-column label="手续费(元)" align="center" prop="proceMoney" width="200" /> -->
            <el-table-column label="退款人数(个)" align="center" prop="refundViewerTotal" width="150" />
            <el-table-column label="退款金额(元)" align="center" prop="refundPriceTotal" width="150" />
            <el-table-column label="提现金额(元)" align="center" prop="withdrawPriceTotal" width="150" />
            <el-table-column label="分销提现金额(元)" align="center" prop="personWithdrawPriceTotal" width="160" />
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <!-- <el-button size="mini" type="text" @click="goStatementsIndexNew(scope.row)"
                  v-hasPermi="['finance:Statements:quickReconciliation:difference']">查看差异</el-button> -->
                <el-button size="mini" type="text" @click="goStatementsIndexNew(scope.row)"
                  v-hasPermi="['finance:Statements:quickReconciliation:details']">对账详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 页面表格数据区域 End -->
        </div>
      </div>
      <div class="app-container_table_page">
        <PaginationNew 
          :total="total" 
          :page.sync="queryParams.pageNum" 
          :limit.sync="queryParams.pageSize"
          @pagination="initData" />
      </div>
    </div>

    <!-- 详情 -->
    <details-dia ref="detailsDia" @getList="getList"></details-dia>
  </div>
</template>

<script>
import { listStatements, exportStatements } from '@/api/financeMr/quickReconciliation';
// import { indoorParkList } from '@/api/ParkingPointMgr/IndoorMgr';
import { exportExcel } from '@/utils/exportexcel';
import detailsDia from "../../order/orderMr/dialog/details";
import moment from "moment"
export default {
  name: 'QuickReconciliation',
  components: {
    detailsDia,
    'parkingrecord-pagination-select': () => import('@/components/CustPaginationSelect') // 支持分页搜索功能的[el-select]下拉框
  },
  dicts: ['order_form_type', 'pay_way_type', 'transaction_type','pay_mchid'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      rules: {},
      // 总条数
      total: 0,
      // 表格数据
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 导出数据状态
      handleExportLoading: false,
    };
  },
  created() {
    this.$set(this.queryParams, 'performDate', [moment().subtract(1, 'days').format("yyyy-MM-DD"), moment().subtract(1, 'days').format("yyyy-MM-DD")])
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    async initData() {
      this.loading = true;
      this.getList();
    },
    setParams() {
      let params = { ...this.addDateRange(this.queryParams, this.dateRange) };
      if (params.performDate) {
        params.performStartDate = moment(params.performDate[0]).startOf('day').format("yyyy-MM-DD HH:mm:ss");
        params.performEndDate = moment(params.performDate[1]).endOf('day').format("yyyy-MM-DD HH:mm:ss");
      }
      console
      delete params.performDate
      return params
    },
    /** 查询列表信息 */
    getList() {
      this.loading = true;
      listStatements(this.setParams())
        .then((response) => {
          this.tableDataList = response?.data?.rows || [];
          this.total = response?.data?.total ?? 0;
          this.loading = false;
        })
        .catch(() => {
          this.tableDataList = [];
          this.total = 0;
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.initData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$set(this.queryParams, 'performDate', [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")])
      this.queryParams.unionMid = null
      this.queryParams.payWay = null
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm(`确定要导出快捷对账单的数据吗？`, '提示', {
        confirmButtonText: '确定 ',
        cancelButtonText: '取消 ',
        type: 'warning'
      })
        .then(() => {
          // 开启导出遮护罩
          this.handleExportLoading = true;

          // 排除不需要的属性
          let { pageNum, pageSize, ...otherObj } = this.setParams();
          let handleExportReq = { ...otherObj, exportType: this.exportType };
          // 发送导出请求
          exportStatements(handleExportReq)
            .then((response) => {
              exportExcel(response, '快捷对账单_' + moment().format('yyyy_MM_DD'), '.xlsx');

              // 关闭导出遮护罩
              this.handleExportLoading = false;
            })
            .catch(() => {
              this.$message.error('导出异常！');
              // 关闭导出遮护罩
              this.handleExportLoading = false;
            });
        })
        .catch(() => {
          this.$message.info('您已取消导出！');
          // 关闭导出遮护罩
          this.handleExportLoading = false;
        });
    },


    /**
     *
     */
    goStatementsIndexNew(row) {
      this.$router.push({
        path: '/financeMr/statementsIndexNew', query: {
          performDate: row.performDate,
          performTimeId: row.performTimeId
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .pagination-container {
    text-align: center;

    .el-pagination {
      position: initial;
    }
  }
}

.cust-table {
  .statements-column-orderNo {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: #409eff;
      text-decoration: underline;
    }
  }
}

.statements-total {
  .til {
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 10px;
  }

  .summary {
    ::v-deep span {
      color: blue;
    }
  }

  .other-summary {
    ::v-deep span {
      color: #f5bb00;
    }
  }
}

.app-container-scheduling ::v-deep .el-select__tags {
  flex-wrap: inherit !important;
  overflow-x: auto !important;
}

.app-container-scheduling ::v-deep .el-form-item__content {
  position: relative;
}

.app-container-scheduling ::v-deep .el-form-item__content .query_clear {
  position: absolute;
  top: -15px;
  right: -10px;
  display: none;
  cursor: pointer;
  z-index: 99;
}

.app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
  display: block;
}
</style>