<template>
   <table-search-card  :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
     <template #left>
      <select-input-form ref="selectInputFormRef" :width="[150, 170]" :queryParamsList="queryParamsList" :queryParams="queryParams"
         @handleQuery="handleQuery">
      </select-input-form>
      <el-form-item prop="currency">
         <checkbox-select style="width: 230px;" collapse-tags collapse-tags-tooltip v-model="queryParams.currency" :options="currencySelectArr" :placeholder="t('币种')"></checkbox-select>
      </el-form-item>
      <el-form-item prop="supportedFeatures">
         <checkbox-select style="width: 230px;" collapse-tags collapse-tags-tooltip v-model="queryParams.supportedFeatures" :options="supportedFeaturesSelectArr" :placeholder="t('支持功能')"></checkbox-select>
      </el-form-item>
     </template>
     <template #right>

     </template>
   </table-search-card>

  <el-table v-loading="loading" class="c-table-main" :data="agentList" border>
     <el-table-column :label="t('接入时间')" min-width="100" sortable align="center" prop="createTime" >
       <template #default="{row}">
          {{ parseTime(row.createTime) }}
       </template>
     </el-table-column>
     <el-table-column :label="t('币种')" min-width="100" align="center" prop="currency" >
         <template v-slot="{row}">
          {{ row.currency }}
       </template>
     </el-table-column>
     <el-table-column :label="t('三方ID')" min-width="100" align="center" prop="thirdPartyId" >
         <template v-slot="{row}">
         {{ row.thirdPartyId }}
       </template>
     </el-table-column>
     <el-table-column :label="t('三方支付名称')" min-width="100" align="center" prop="thirdPartyName" >
         <template v-slot="{row}">
          {{ row.thirdPartyName }}
       </template>
     </el-table-column>
     <el-table-column :label="t('支持功能')" min-width="100" align="center" prop="supportedFeatures" >
       <template #default="{row}">
          <span v-if="row.supportedFeatures == 0">{{ t('代收') }}</span>
          <span v-if="row.supportedFeatures == 1">{{ t('代付') }}</span>
       </template>
       </el-table-column>
     <el-table-column :label="t('缴纳保证金')" min-width="70" align="center" prop="depositAmount" >
       <template #default="{row}">
         {{ row.depositAmount }}
       </template>
       </el-table-column>
     <el-table-column :label="t('联系方式')" min-width="180" align="center" prop="contactInfo" />
     <el-table-column :label="t('三方费率')" align="center" min-width="160" prop="thirdPartyFeeRate">
        <template #default="scope">{{ scope.row.thirdPartyFeeRate||'--' }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日充值次数')" sortable align="center" min-width="160" prop="yesterdayRechargeCount">
        <template #default="scope">{{ scope.row.yesterdayRechargeCount ==null?'--':scope.row.yesterdayRechargeCount }}</template>
     </el-table-column>
     <el-table-column :label="t('累计充值次数')" sortable align="center" min-width="160" prop="totalRechargeCount">
        <template #default="scope">{{ scope.row.totalRechargeCount ==null?'--':scope.row.totalRechargeCount }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日累计充值成功次数')" sortable align="center" min-width="160" prop="yesterdayRechargeSucCount">
        <template #default="scope">{{ scope.row.yesterdayRechargeSucCount ==null?'--':scope.row.yesterdayRechargeSucCount }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日充值金额')" sortable align="center" min-width="160" prop="yesterdayRechargeAmount">
        <template #default="scope">{{ scope.row.yesterdayRechargeAmount ==null?'--':scope.row.yesterdayRechargeAmount }}</template>
     </el-table-column>
     <el-table-column :label="t('累计充值金额')" sortable align="center" min-width="160" prop="totalRechargeAmount">
        <template #default="scope">{{ scope.row.totalRechargeAmount ==null?'--':scope.row.totalRechargeAmount }}</template>
     </el-table-column>
     <el-table-column :label="t('充值总成功率')" sortable align="center" min-width="160" prop="totalRechargeSuccessRate">
        <template #default="scope">{{ scope.row.totalRechargeSuccessRate ==null?'--':scope.row.totalRechargeSuccessRate }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日充值成功率')" sortable align="center" min-width="160" prop="yesterdayRechargeSuccessRate">
        <template #default="scope">{{ scope.row.yesterdayRechargeSuccessRate ==null?'--':scope.row.yesterdayRechargeSuccessRate }}</template>
     </el-table-column>
     <el-table-column :label="t('总平均入款时间')" sortable align="center" min-width="160" prop="totalAvgDepositTime">
        <template #default="scope">{{ scope.row.totalAvgDepositTime ==null?'--':scope.row.totalAvgDepositTime }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日平均入款时间')" sortable align="center" min-width="160" prop="yesterdayAvgDepositTime">
        <template #default="scope">{{ scope.row.yesterdayAvgDepositTime ==null?'--':scope.row.yesterdayAvgDepositTime }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日提现次数')" sortable align="center" min-width="160" prop="yesterdayWithdrawCount">
        <template #default="scope">{{ scope.row.yesterdayWithdrawCount ==null?'--':scope.row.yesterdayWithdrawCount }}</template>
     </el-table-column>
     <el-table-column :label="t('累计提现次数')" sortable align="center" min-width="160" prop="totalWithdrawCount">
        <template #default="scope">{{ scope.row.totalWithdrawCount ==null?'--':scope.row.totalWithdrawCount }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日提现金额')" sortable align="center" min-width="160" prop="yesterdayWithdrawAmount">
        <template #default="scope">{{ scope.row.yesterdayWithdrawAmount ==null?'--':scope.row.yesterdayWithdrawAmount }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日提现成功次数')" sortable align="center" min-width="160" prop="yesterdayWithdrawSucCount">
        <template #default="scope">{{ scope.row.yesterdayWithdrawSucCount ==null?'--':scope.row.yesterdayWithdrawSucCount }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日提现成功时间')" sortable align="center" min-width="160" prop="yesterdayWithdrawAmount">
        <template #default="scope">{{ parseTime(scope.row.yesterdayWithdrawIncomeTimeSum) }}</template>
     </el-table-column>
     <el-table-column :label="t('累计提现金额')" sortable align="center" min-width="160" prop="totalWithdrawAmount">
        <template #default="scope">{{ scope.row.totalWithdrawAmount ==null?'--':scope.row.totalWithdrawAmount }}</template>
     </el-table-column>
     <el-table-column :label="t('提现总成功率')" sortable align="center" min-width="160" prop="totalWithdrawSuccessRate">
        <template #default="scope">{{ scope.row.totalWithdrawSuccessRate ==null?'--':scope.row.totalWithdrawSuccessRate }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日提现成功率')" sortable align="center" min-width="160" prop="yesterdayWithdrawSuccessRate">
        <template #default="scope">{{ scope.row.yesterdayWithdrawSuccessRate ==null?'--':scope.row.yesterdayWithdrawSuccessRate }}</template>
     </el-table-column>
     <el-table-column :label="t('总平均出款时间')" sortable align="center" min-width="160" prop="totalAvgWithdrawTime">
        <template #default="scope">{{ scope.row.totalAvgWithdrawTime ==null?'--':scope.row.totalAvgWithdrawTime }}</template>
     </el-table-column>
     <el-table-column :label="t('昨日平均出款时间')" sortable align="center" min-width="160" prop="yesterdayAvgWithdrawTime">
        <template #default="scope">{{ scope.row.yesterdayAvgWithdrawTime ==null?'--':scope.row.yesterdayAvgWithdrawTime }}</template>
     </el-table-column>
     <el-table-column :label="t('更新日期')" sortable align="center" min-width="160" prop="balanceAfter">
        <template #default="scope">{{ parseTime(scope.row.updateTime) }}</template>

     </el-table-column>
     
  </el-table>

  <pagination
     v-show="total > 0"
     :total="total"
     v-model:page="queryParams.pageNum"
     v-model:limit="queryParams.pageSize"
     @pagination="getList"
  />
        <!-- 新增站点 -->

</template>

<script setup name="Agent">
import {getPayRankingList} from "@/api/finance";
import CheckboxSelect from "@/components/CheckboxSelect"; // 多选框
import { getLocalStorage } from "@/utils/auth";
import Crontab from '@/components/Crontab'
import { parseTime } from '@/utils/ruoyi'; // 时间格式化
import { ref } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const agentList = ref([]);
const loading = ref(true);
const total = ref(0);
const openView = ref(false);
const supportedFeaturesSelectArr = ref([
   { label: proxy.t('代收'), value: 0 },
   { label: proxy.t('代付'), value: 1 },
])
const currencySelectArr = getLocalStorage('currencySelect')?.map(item => {
    return {
        label: `${item.currencyName}(${item.currencyCode})`,
        value: item.currencyCode
    };
}); 
const queryParamsList = ref([{
   label: proxy.t('三方支付名称'),
   value: 'thirdPartyName',
},{
   label: proxy.t('三方ID'),
   value: 'thirdPartyId',
}]);
const data = reactive({
form: {},
queryParams: {
   pageNum: 1,
    pageSize: 10,
    thirdPartyStatus:1,
    currency:['VND'],
    supportedFeatures:[],
    searchType: 'thirdPartyName',
    orderByColumn:'totalRechargeCount',
    isAsc:'desc',
}
});

const { queryParams } = toRefs(data);
 // 新增按钮操作
 const addEditStatus = ref('add'), isShowDialog = ref(false), editDataId = ref(''),modifyDate = ref({});
/** 查询列表 */
function getList() {
loading.value = true;
let params = {
   ...queryParams.value,
   currency: queryParams.value.currency.join(','),
   supportedFeatures: queryParams.value.supportedFeatures.join(','),

}
getPayRankingList(params).then(response => {
agentList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}

/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}

/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
queryParams.value.currency = ['VND'];
handleQuery();
}
onMounted(() => { 
  getList();
});
</script>

<style scoped lang="scss">
.label-scoreRatio{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
span{
  width: 120px;
  text-align: right;
  font-weight: 700;
  padding-right: 12px;
}
}
.scoreRatioTable{
width: calc(100% - 120px);
margin-left: 120px;
}
</style>
