<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="thetopbox">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'会员编号'">
              <el-input v-model="queryParams.memberCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'">
              <el-input v-model="queryParams.memberName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'体系名称'">
              <el-select
                v-model="queryParams.vertexId"
                clearable
                
                :placeholder="'请输入体系名称'"
              >
                <el-option
                  v-for="item in vertexList"
                  :key="item.pkId"
                  :label="item.vertexName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'团队名称'">
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.teamId"
              >
                <el-option
                  v-for="item in memberTeamList"
                  :key="item.pkId"
                  :label="item.teamName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item :label="'币种'">
              <el-checkbox-group @change="changeAccounts" v-model="queryParams.pkAccounts">
                <el-checkbox
                class="check-s"
                  v-for="item in pkAccountsList"
                  :key="item.fieldValue"
                  :label="item.fieldValue"
                  >{{ item.accountName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="searchbox">
              <el-button class="my_search" @click="getSearch">
                {{ '搜索' }}</el-button
              >
              <el-button class="my_reset" @click="reChongzhi">
                {{ '重置' }}</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            size="mini"
            @click="handleExport"
            style="background: #ffad41; border-color: #ffad41"
            class="addBtn"
            >{{ '导出' }}</el-button
          >
        </div>
      </div>
      <div class="maintable">
        <el-table
          ref="multipleTable"
          :data="tableData"
          height="670px"
          style="width: 100%;height: 670px;"
          :header-cell-style="{ background: '#EEEEEE' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column align="center" prop="memberCode" :label="'会员编号'">
          </el-table-column>
          <el-table-column align="center" prop="memberName" :label="'会员姓名'">
          </el-table-column>
          <el-table-column align="center" prop="vertexName" :label="'体系名称'">
          </el-table-column>
          <el-table-column align="center" prop="teamName" :label="'团队名称'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="account1"
            :label="'消费余额'+`(${isLocalSymbol()})`"
            v-if="showData.account1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount1"
            :label="'可用消费'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount1"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount1"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account2"
            :label="'现金余额'+`(${isLocalSymbol()})`"
            v-if="showData.account2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount2"
            :label="'可用现金'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount2"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount2"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account3"
            :label="'政策余额'+`(${isLocalSymbol()})`"
            v-if="showData.account3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount3"
            :label="'可用政策'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount3"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount3"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account4"
            :label="'奖金余额'+`(${isLocalSymbol()})`"
            v-if="showData.account4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount4"
            :label="'可用奖金'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="submitAccount4"
            :label="'可提奖金'+`(${isLocalSymbol()})`"
            v-if="showData.submitAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount4"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount4"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockWithdrawAccount4"
            :label="'禁止提现'+`(${isLocalSymbol()})`"
            v-if="showData.lockWithdrawAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account5"
            :label="'重消余额'+`(${isLocalSymbol()})`"
            v-if="showData.account5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount5"
            :label="'可用重消'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount5"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount5"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account6"
            :label="'积分余额'+`(${isLocalSymbol()})`"
            v-if="showData.account6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount6"
            :label="'可用积分'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount6"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount6"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account7"
            :label="'鼓励余额'+`(${isLocalSymbol()})`"
            v-if="showData.account7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount7"
            :label="'可用鼓励'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount7"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount7"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account8"
            :label="'复购券余额'+`(${isLocalSymbol()})`"
            v-if="showData.account8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount8"
            :label="'可用复购券'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount8"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount8"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account9"
            :label="'全球积分余额'+`(${isLocalSymbol()})`"
            v-if="showData.account9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount9"
            :label="'可用全球积分'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount9"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount9"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account10"
            :label="'车奖积分余额'+`(${isLocalSymbol()})`"
            v-if="showData.account10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="availableAccount10"
            :label="'可用车奖积分'+`(${isLocalSymbol()})`"
            v-if="showData.availableAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockAccount10"
            :label="'禁止消费'+`(${isLocalSymbol()})`"
            v-if="showData.lockAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="lockTransferAccount10"
            :label="'禁止转账'+`(${isLocalSymbol()})`"
            v-if="showData.lockTransferAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account11"
            :label="'直播代金券余额'+`(${isLocalSymbol()})`"
            v-if="showData.account11"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="account12"
            :label="'乐学代金券余额'+`(${isLocalSymbol()})`"
            v-if="showData.account12"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount1"
            :label="'消费余额'+`(${isLocals()})`"
            v-if="showData.settleAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount1"
            :label="'可用消费'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount1"
              :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount2"
            :label="'现金余额'+`(${isLocals()})`"
            v-if="showData.settleAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount2"
            :label="'可用现金'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount2"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount2"
            :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount2"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount3"
            :label="'政策余额'+`(${isLocals()})`"
            v-if="showData.settleAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount3"
            :label="'可用政策'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount3"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount3"
            :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount3"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount4"
            :label="'奖金余额'+`(${isLocals()})`"
            v-if="showData.settleAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount4"
            :label="'可用奖金'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount4"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount4"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockWithdrawAccount4"
            :label="'禁止提现'+`(${isLocals()})`"
            v-if="showData.settleLockWithdrawAccount4"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount5"
            :label="'重消余额'+`(${isLocals()})`"
            v-if="showData.settleAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount5"
            :label="'可用重消'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount5"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount5"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount5"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount6"
            :label="'积分余额'+`(${isLocals()})`"
            v-if="showData.settleAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount6"
            :label="'可用积分'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount6"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount6"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount6"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount7"
            :label="'鼓励余额'+`(${isLocals()})`"
            v-if="showData.settleAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount7"
            :label="'可用鼓励'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount7"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount7"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount7"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount8"
            :label="'复购券余额'+`(${isLocals()})`"
            v-if="showData.settleAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount8"
            :label="'可用复购券'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount8"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount8"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount8"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount9"
            :label="'全球积分余额'+`(${isLocals()})`"
            v-if="showData.settleAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount9"
            :label="'可用全球积分'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount9"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount9"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount9"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount10"
            :label="'车奖积分余额'+`(${isLocals()})`"
            v-if="showData.settleAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAvailableAccount10"
            :label="'可用车奖积分'+`(${isLocals()})`"
            v-if="showData.settleAvailableAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockAccount10"
            :label="'禁止消费'+`(${isLocals()})`"
            v-if="showData.settleLockAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleLockTransferAccount10"
             :label="'禁止转账'+`(${isLocals()})`"
            v-if="showData.settleLockTransferAccount10"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount11"
            :label="'直播代金券余额'+`(${isLocals()})`"
            v-if="showData.settleAccount11"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="settleAccount12"
            :label="'乐学代金券余额'+`(${isLocals()})`"
            v-if="showData.settleAccount12"
          >
          </el-table-column>
          
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getSearch"
    />
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import * as fin from "@/api/financial.js";
import { getVartexList } from "@/api/affiliatedteam";
import { getmemberTeamList } from "@/api/member";
import { isLocals, isLocalSymbol } from "@/utils/numberToCurrency";
export default {
  name: "DetailSummary",
  components: {
    topBar,
  },
  data() {
    return {
      moren: "detailSummary",
      topList: [
        {
          name: '余额汇总',
          path: "detailSummary",
        },
      ],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        pkAccounts: [1],
      },
      total: 0,
      multipleSelection: [],
      showData: {},
      vertexList: [],
      memberTeamList: [],
      pkAccountsList: [],
    };
  },
  created() {
    this.queryParams.createTime = this.$route.query.createTime;
    this.getOthers();
    this.getSearch();
  },
  methods: {
    isLocals,
    isLocalSymbol,
    changeAccounts(val){
     this.getSearch()
    },
    //导出
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        this.download(
          "/member/manager/account-detail/detail-export",
          { ...this.queryParams },
          `余额汇总-${new Date().getTime()}.xlsx`
        );
      });
    },
    getOthers() {
    
      fin.getenumsAccount().then((res) => {
        this.pkAccountsList = res.rows;
      });
      getVartexList().then((res) => {
        this.vertexList = res.data;
      });
      getmemberTeamList().then((res) => {
        this.memberTeamList = res.rows;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        pkAccounts: [1],
      };
      this.getSearch();
    },
    getSearch() {
      fin.getBalanceSummaryDetailList(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
      fin.getBalanceSummaryDetailField({selectedPkAccounts:this.queryParams.pkAccounts.join()}).then((res) => {
        const obj = {};
        res.data.forEach((ele) => {
          obj[ele] = true;
        });
        this.showData = obj;
      });
     
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .check-s .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  height: 570px !important;
}
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}
::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    padding: 15px 20px 15px 0;
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .searchtitle {
      margin-right: 10px;
    }
    .searchbtn {
      background: #08143f;
      color: #ffffff;
    }
  }
  .main {
    //margin-top: 20px;
    background: #f9f9f9;
    //border-radius: 8px;
    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      // padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: #48b2fd;
        }
        .thebtn2 {
          color: #ffffff;
          background: #ffad41;
        }
      }
    }
  }
}
</style>
