<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'会员编号'" prop="teamCode">
              <el-input
                v-model="queryParams.memberCode"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'" prop="teamCode">
              <el-input
                v-model="queryParams.memberName"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'隶属体系'">
              <el-select v-model="queryParams.pkVertex" clearable placeholder="">
                <el-option
                  v-for="item in vertexList"
                  :key="item.value"
                  :label="item.vertexName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="4">
            <el-form-item :label="'交款方式'" prop="teamCode">
              <el-select
                v-model="queryParams.paymentMethod"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in paymentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'审核状态'" prop="teamCode">
              <el-select
                v-model="queryParams.approveState"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in shStateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'钱包类型'" prop="teamCode">
              <el-select
                v-model="queryParams.pkAccount"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in accountList"
                  :key="item.pkId"
                  :label="item.accountName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'操作人'" prop="teamCode">
              <el-select v-model="queryParams.creator" clearable placeholder="">
                <el-option
                  v-for="item in creatorList"
                  :key="item.pkCreator"
                  :label="item.memberName"
                  :value="item.pkCreator"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'操作备注'" prop="teamCode">
              <el-input
                v-model="queryParams.remarks"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'充值日期'" prop="teamCode">
              <el-date-picker
                v-model="czsj"
                value-format="yyyy-MM-dd"
                type="daterange"
                :range-separator="'至'"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                @change="changeCzsj"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'审核日期'" prop="teamCode">
              <el-date-picker
                v-model="shsj"
                value-format="yyyy-MM-dd"
                type="daterange"
                :range-separator="'至'"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                @change="changeShsj"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-left: 20px">
          <el-col :span="4">
            <div class="searchbox">
              <el-button
                v-has-buttons="['RechargeSearch']"
                class="my_search"
                @click="research()"
              >
                {{ '搜索' }}</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
            v-has-buttons="['RechargeDetailExport']"
            size="small"
            class="thebtn1"
            @click="handleExport"
          >
            {{ '导出' }}</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600px"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
        :span-method="objectSpanMethod"
        :show-summary="true"
        :summary-method="summaryMethod"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column
          v-if="listColumnVisible('memberCode')"
          min-width="120px"
          align="center"
          prop="memberCode"
          :label="'会员编号'"
        />
        <el-table-column
          v-if="listColumnVisible('memberName')"
          align="center"
          prop="memberName"
          :label="'会员姓名'"
        />
        <el-table-column
          align="center"
          prop="vertexName"
          label="隶属体系"
          min-width="120px"
        />
        <el-table-column
          v-if="listColumnVisible('pkAccountVal')"
          align="center"
          prop="pkAccountVal"
          :label="'钱包类型'"
          min-width="120px"
        />

        <el-table-column
          v-if="listColumnVisible('paymentMethodVal')"
          align="center"
          prop="paymentMethodVal"
          :label="'交款方式'"
        />
        <el-table-column
          v-if="listColumnVisible('paymentBeforeBalance')"
          align="center"
          prop="paymentBeforeBalance"
          :label="'充前余额' + `(${isLocalSymbol()})`"
          width="120px"
          :formatter="stateFormat"
        />
        <el-table-column
          v-if="listColumnVisible('paymentAmount')"
          align="center"
          prop="paymentAmount"
          :label="'充值金额' + `(${isLocalSymbol()})`"
          width="120px"
          :formatter="stateFormat"
        />
        <el-table-column
          v-if="listColumnVisible('paymentBalance')"
          align="center"
          prop="paymentBalance"
          :label="'当前余额' + `(${isLocalSymbol()})`"
          width="120px"
          :formatter="stateFormat"
        />
        <el-table-column
          v-if="listColumnVisible('exchangeRate')"
          align="center"
          prop="exchangeRate"
          :label="'汇率'"
        />
        <el-table-column
          v-if="listColumnVisible('rechargeCode')"
          align="center"
          min-width="180px"
          prop="rechargeCode"
          :label="'单据编号'"
        />
        <!-- <el-table-column
          v-if="dataList[11].key"
          align="center"
          min-width="180px"
          prop="batch"
          :label="'充值批次'"
        /> -->
        <el-table-column
          v-if="listColumnVisible('creator')"
          align="center"
          prop="creator"
          :label="'操作人'"
        />
        <el-table-column
          v-if="listColumnVisible('creationTime')"
          align="center"
          prop="creationTime"
          :label="'充值日期'"
          width="200"
        />
        <el-table-column
          v-if="listColumnVisible('remarks')"
          align="center"
          prop="remarks"
          :label="'操作备注'"
        />
        <el-table-column
          v-if="listColumnVisible('approverName')"
          align="center"
          prop="approverName"
          :label="'审核人'"
        />
        <el-table-column
          v-if="listColumnVisible('approveTime')"
          align="center"
          prop="approveTime"
          :label="'审核日期'"
          width="200"
        />
        <el-table-column
          v-if="listColumnVisible('approveStateVal')"
          align="center"
          prop="approveStateVal"
          label="审核状态"
          fixed="right"
        >
          <template #default="scope">
            <!--approveStateVal= 审核通过 绿色，=审核驳回 红色 =待审核 正常展示 -->
            <span
              :class="{
                'success-text': scope.row.approveStateVal == '审核通过',
                'error-text': scope.row.approveStateVal == '审核驳回',
                'normal-text': scope.row.approveStateVal == '待审核'
              }"
            >
              {{ scope.row.approveStateVal }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="research"
    />
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import { userCountryList } from '@/api/user'
import { isLocalSymbol } from '@/utils/numberToCurrency'
import {
  getenumsAccount,
  getpaymentType,
  getApproveStatus,
  getrechageList,
  getCreatorList
} from '@/api/financial'
import { mapGetters } from 'vuex'
import { stateFormat, numberToCurrencyNo } from '@/utils/numberToCurrency'
import { getRoleMenu } from '@/api/notice'
import { getvertexValue } from '@/api/member'
export default {
  name: 'Czmx',
  components: {
    topBar
  },
  data() {
    return {
      moren: 'czmx',
      topList: [
        {
          name: '充值明细',
          path: 'czmx'
        }
      ],
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        memberCode: '', // 会员编号
        memberName: '', // 会员姓名
        pkAccount: '', // 钱包类型
        paymentMethod: '', // 交款方式
        approveState: '', // 审核状态
        batch: '', // 充值批次
        creator: '', // 操作人
        remarks: '', // 备注
        startDate: '', // 充值开始时间
        endDate: '', // 充值结束时间
        startApproveTime: '', // 审核开始时间
        endApproveTime: '' // 审核结束时间
      },
      accountList: [], // 钱包类型
      paymentList: [], // 交款方式
      shStateList: [], // 审核状态
      creatorList: [], // 操作人列表
      tableData: [],
      loading: false,
      czsj: '', // 充值时间
      shsj: '', // 审核时间
      total: 0,
      countryList: [],
      vertexList: [], // 隶属体系
      dataList: [
        {
          name: 'pkCountryName',
          key: ''
        },
        {
          name: 'memberCode',
          key: ''
        },
        {
          name: 'memberName',
          key: ''
        },
        {
          name: 'pkAccountVal',
          key: ''
        },
        {
          name: 'paymentMethodVal',
          key: ''
        },
        {
          name: 'paymentBeforeBalance',
          key: ''
        },
        {
          name: 'paymentAmount',
          key: ''
        },
        {
          name: 'paymentBalance',
          key: ''
        },
        {
          name: 'settlePaymentAmount',
          key: ''
        },
        {
          name: 'exchangeRate',
          key: ''
        },
        {
          name: 'rechargeCode',
          key: ''
        },
        {
          name: 'batch',
          key: ''
        },
        {
          name: 'creator',
          key: ''
        },
        {
          name: 'creationTime',
          key: ''
        },
        {
          name: 'remarks',
          key: ''
        },
        {
          name: 'approverName',
          key: ''
        },
        {
          name: 'approveTime',
          key: ''
        },
        {
          name: 'approveStateVal',
          key: ''
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['getUser'])
  },
  created() {
    this.research()
    this.getOthers()
    this.getCountry()
    this.getUserRole()
  },
  methods: {
    isLocalSymbol,
    listColumnVisible(roleName) {
      return this.dataList.includes(roleName)
    },
    getUserRole() {
      getRoleMenu('RechargeDetail').then((res) => {
        this.dataList = res.data || []
        // this.dataList.forEach((item) => {
        //   res.data.forEach((items) => {
        //     if (item.name == items) {
        //       item.key = items
        //     }
        //     // this.flag = true
        //   })
        // })
      })
    },
    stateFormat,
    getCountry() {
      userCountryList().then((res) => {
        this.countryList = res.data
      })
    },
    changeCzsj(val) {
      this.queryParams.startDate = val[0]
      this.queryParams.endDate = val[1]
    },
    changeShsj(val) {
      this.queryParams.startApproveTime = val[0]
      this.queryParams.endApproveTime = val[1]
    },

    getOthers() {
      // 钱包类型
      getenumsAccount().then((res) => {
        this.accountList = res.rows
      })
      // 交款方式
      getpaymentType().then((res) => {
        this.paymentList = res.data
      })
      // 审核状态
      getApproveStatus().then((res) => {
        this.shStateList = res.data
      })
      getCreatorList().then((res) => {
        this.creatorList = res.data
      })
      getvertexValue().then((res) => {
        this.vertexList = res.data || []
      })
    },

    research() {
      this.loading = true
      // console.log('🌈',this.getUser)
      getrechageList(this.queryParams).then((res) => {
        res.rows.forEach((item) => {
          item.pkCountryName = this.getUser.country.shortName
          item.pkCountryIcon = this.getUser.country.nationalFlag2
        })
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        memberCode: '', // 会员编号
        memberName: '', // 会员姓名
        pkAccount: '', // 钱包类型
        paymentMethod: '', // 交款方式
        approveState: '', // 审核状态
        batch: '', // 充值批次
        creator: '', // 操作人
        remarks: '', // 备注
        startDate: '', // 充值开始时间
        endDate: '', // 充值结束时间
        startApproveTime: '', // 审核开始时间
        endApproveTime: '' // 审核结束时间
      }
      this.shsj = []
      this.czsj = []
      this.research()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/member/manager/recharge/export',
          { ...this.queryParams },
          `${'充值明细'}${new Date().getTime()}.xlsx`
        )
      })
    },
    // 合计行
    summaryMethod({ columns, data }) {
      const sums = []
      // 遍历所有列
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计'
          return
        }
        if (column.property === 'paymentAmount') {
          const lastIndex1 = data.length - 1
          sums[index] = data[lastIndex1]
            ? numberToCurrencyNo(data[lastIndex1].paymentAmount)
            : ''
        } else if (column.property === 'settlePaymentAmount') {
          const lastIndex2 = data.length - 1
          sums[index] = data[lastIndex2]
            ? numberToCurrencyNo(data[lastIndex2].settlePaymentAmount)
            : ''
        } else {
          sums[index] = ''
        }
      })
      console.log('🌈numberToCurrencyNo', sums)
      return sums
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

  <style lang="scss" scoped>
::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}
::v-deep .el-table-column--selection .cell {
  padding-right: 0;
}
::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.tem {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 28px;
    height: 20px;
    margin-right: 3px;
  }
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding-top: 10px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }
  .main {
    .maintop {
      display: flex;
      padding: 0px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: #ffad41;
          width: 68px;
          height: 32px;
        }
      }
    }
  }
}
</style>
