<template>
<div class="app-container home">
    <kyc-tip-bar v-model:status="kycStatus" />
    <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
    <div class="page-content">
      <div class="title-bar">
        <span class="title">{{ t('capital.pageTitle') }}</span>
      </div>
      <div class="mt-tabs">
        <div class="tab-items">
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'goldin'}]" @click="tabClick('goldin')">{{ t('home.goldin') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'goldout'}]" @click="tabClick('goldout')">{{ t('home.goldout') }}</div>
          <div :class="['tab-item', { 'tab-item-active': activeMtName === 'transfer'}]" @click="tabClick('transfer')">{{ t('home.transfer') }}</div>
          <div v-if="userInfo.user_type == 1" :class="['tab-item', { 'tab-item-active': activeMtName === 'fundout'}]" @click="tabClick('fundout')">{{ t('home.fundout') }}</div>
          <div v-if="userInfo.user_type == 1" :class="['tab-item', { 'tab-item-active': activeMtName === 'fundTransfer'}]" @click="tabClick('fundTransfer')">{{ t('home.fundtrans') }}</div>
        </div>
        <div class="tab-active-bar"></div>
      </div>
      <div class="report" v-if="activeMtName == 'goldin'" >
        <el-alert v-if="ioPowerMap!=null && !isEmpty(ioPowerMap.gold_in) && ioPowerMap.gold_in==1" :title="t('capital.goldInNoPowerContactService')" type="error" :closable="false" />
        <pay-channel v-model:channelList="goldInChannelList" type="goldIn" :ioPowerMap="ioPowerMap" 
        :mtLogin="mtLogin" :mtServer="serverId"
        :actId="actId" :actMtServer="actMtServer" :actMtLogin="actMtLogin" :actMtServerName="actMtServerName" />
        <el-form :model="queryGoldInParams" autocapitalize="off" :inline="true" label-position="top" size="large" v-if="permissionStore.powerList.includes('applyGoldIn')" >
          <el-form-item :label="t('form.mtAccount.label')">
            <el-select
                v-model="queryMtAccountIndex"
               :placeholder="t('common.selectChoose')"
               clearable
               @clear="queryMtAccountIndex = null"
               style="width: 270px"
            >
              <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.status.label')" prop="status">
            <el-select
               v-model="queryGoldInParams.status"
               :placeholder="t('common.selectChoose')"
               clearable
               style="width: 270px"
            >
              <el-option v-for="(item, key, index) in goldIn" :key="index" :label="t(item)" :value="key" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.applyTime.label')">
            <el-date-picker
               v-model="goldinDateRange" size="large" style="width: 270px;"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               :start-placeholder="t('form.applyTime.start')"
               :end-placeholder="t('form.applyTime.end')"
               :shortcuts="shortcuts"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="&emsp;" class="btn-right">
              <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
              <el-button :loading="exportGoldInLoading"  class="btn2" @click="handleExport">{{ t('form.export') }}
                <template #icon>
                  <svg-icon  icon-class="export"></svg-icon>
                </template>
                <template #loading>
                  <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
              </el-button>
          </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingGoldin" :data="goldinList" style="width: 100%;" v-if="permissionStore.powerList.includes('applyGoldIn')" >
          <el-table-column v-for="(item,index) in goldinCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
            <template #default="scope">
              <template v-if="item.field == 'status'">
                <el-tag type="primary" effect="light" v-if="scope.row.status == 0" > {{ t(goldIn['0']) }} </el-tag>
                <el-tag type="success" effect="light" v-if="scope.row.status == 1" > {{ t(goldIn['1']) }} </el-tag>
                <el-tag type="danger" effect="light" v-if="scope.row.status == 2" > {{ t(goldIn['2']) }} </el-tag>
                <el-tag type="warning" effect="light" v-if="scope.row.status == -1" > {{ t(goldIn['-1']) }} </el-tag>
                <el-tag type="info" effect="light" v-if="scope.row.status == -2" > {{ t(goldIn['-2']) }} </el-tag>
              </template>
              <template v-else-if="item.field == 'user_type'" >
                <div v-html="getUserTypeHtml(scope.row[item.field])"></div>
              </template>
              <template v-else-if="item.field == 'mt4_server'" >
                {{ scope.row['mt4_server_name'] }}
              </template>
              <template v-else-if="item.field == 'pay_type'" >
                <div v-html="getPayTypeHtml(scope.row[item.field])"></div>
              </template>
              <template v-else-if="item.field == 'pay_ordid'" >
                {{ scope.row[item.field] }}
              </template>
              <template v-else-if="item.field == 'usd_amount' || item.field == 'currency_amount' || item.field == 'audit_amount'" >
                {{ returnFloat(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'subsidy'" >
                {{ getSubsidyHtml(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'subsidy_amount'" >
                {{ getSubsidyAmountHtml(scope.row[item.field]) }}
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="permissionStore.powerList.includes('applyGoldIn')" v-show="goldinTotal > 0" :total="goldinTotal" :autoScroll="false"
         v-model:page="queryGoldInParams.curr_page"
         v-model:limit="queryGoldInParams.page_size"
         @pagination="getList" />
      </div>
      <div class="report" v-if="activeMtName == 'goldout'" >
        <el-alert v-if="ioPowerMap!=null && (ioPowerMap.out_flag == false || ioPowerMap.out_flag == 'false')" :title="t('capital.dontOutTransfer')" type="error" :closable="false" />
        <el-alert v-if="ioPowerMap!=null && !isEmpty(ioPowerMap.gold_out) && ioPowerMap.gold_out==1" :title="t('capital.goldOutNoPowerContactService')" type="error" :closable="false" />
        <mt-gold-out :ioPowerMap="ioPowerMap" :mtLogin="mtLogin" :mtServer="serverId" />
        <el-form :model="queryGoldOutParams" autocapitalize="off" :inline="true" label-position="top" size="large" v-if="permissionStore.powerList.includes('applyGoldOut')" >
          <el-form-item :label="t('form.mtAccount.label')">
            <el-select
                v-model="queryMtAccountIndex"
               :placeholder="t('common.selectChoose')"
               clearable
               @clear="queryMtAccountIndex = null"
               style="width: 270px"
            >
              <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.status.label')" prop="status">
            <el-select
               v-model="queryGoldOutParams.status"
               :placeholder="t('common.selectChoose')"
               clearable
               style="width: 270px"
            >
              <el-option v-for="(item, key, index) in goldOut" :key="index" :label="t(item)" :value="key" ></el-option>
            </el-select>
         </el-form-item>
          <el-form-item :label="t('form.applyTime.label')">
            <el-date-picker
               v-model="goldoutDateRange" size="large" style="width: 270px;"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               :start-placeholder="t('form.applyTime.start')"
               :end-placeholder="t('form.applyTime.end')"
               :shortcuts="shortcuts"
            ></el-date-picker>
         </el-form-item>
         <el-form-item label="&emsp;" class="btn-right">
            <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
            <el-button :loading="exportGoldOutLoading"  class="btn2" @click="handleExport">{{ t('form.export') }}
              <template #icon>
                <svg-icon  icon-class="export"></svg-icon>
              </template>
                <template #loading>
                  <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
              </el-button>
         </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingGoldout" :data="goldoutList" style="width: 100%;" v-if="permissionStore.powerList.includes('applyGoldOut')" >
          <el-table-column v-for="(item,index) in goldoutCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
            <template #default="scope">
              <template v-if="item.field == 'status'">
                <el-tag type="primary" effect="light" v-if="scope.row.status == 0" > {{ t(goldOut['0']) }} </el-tag>
                <el-tag type="success" effect="light" v-if="scope.row.status == 1" > {{ t(goldOut['1']) }} </el-tag>
                <el-tag type="danger" effect="light" v-if="scope.row.status == 2" > {{ t(goldOut['2']) }} </el-tag>
                <el-tag type="danger"  effect="dark" v-if="scope.row.status == 3" > {{ t(goldOut['3']) }} </el-tag>
                <el-tag type="warning" effect="light" v-if="scope.row.status == -1" > {{ t(goldOut['-1']) }} </el-tag>
                <el-tag type="info" effect="light" v-if="scope.row.status == -2" > {{ t(goldOut['-2']) }} </el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.status == -3" > {{ t(goldOut['-3']) }} </el-tag>
              </template>
              <template v-else-if="item.field == 'currency_type'" >
                {{ scope.row['currency_type_text'] }}
              </template>
              <template v-else-if="item.field == 'user_type'" >
                <div v-html="getUserTypeHtml(scope.row[item.field])"></div>
              </template>
              <template v-else-if="item.field == 'mt4_server'" >
                {{ scope.row['mt4_server_name'] }}
              </template>
              <template v-else-if="item.field == 'usd_amount' || item.field == 'currency_amount' || item.field == 'audit_amount'" >
                {{ returnFloat(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'operate'" >
                <el-button :loading="loadingCancelMtGoldOut"
                v-if="scope.row.status == 0" @click="cancelMtGoldOut(scope.row)" >{{ t('common.cancelText') }}
                  <template #loading>
                    <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                  </template>
                </el-button>
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="permissionStore.powerList.includes('applyGoldOut')" v-show="goldoutTotal > 0" :total="goldoutTotal" :autoScroll="false"
         v-model:page="queryGoldOutParams.curr_page"
         v-model:limit="queryGoldOutParams.page_size"
         @pagination="getList" />
      </div>
      <div class="report" v-if="activeMtName == 'transfer'">
        <el-alert v-if="ioPowerMap!=null && (ioPowerMap.out_flag == false || ioPowerMap.out_flag == 'false')" :title="t('capital.dontOutTransfer')" type="error" :closable="false" />
        <el-alert v-if="ioPowerMap!=null && !isEmpty(ioPowerMap.gold_transfer_own) && ioPowerMap.gold_transfer_own==1 && !isEmpty(ioPowerMap.gold_transfer_out) && ioPowerMap.gold_transfer_out==1" :title="t('capital.goldTransferNoPowerContactService')" type="error" :closable="false" />
        <mt-trans :ioPowerMap="ioPowerMap" :mtLogin="mtLogin" :mtServer="serverId" />
        <el-form :model="queryTransferParams" autocapitalize="off" :inline="true" label-position="top" size="large" v-if="permissionStore.powerList.includes('applyGoldTransfer')" >
          <el-form-item :label="t('form.mtAccount.labelOut')">
            <el-select
                v-model="queryMtAccountIndex"
               :placeholder="t('common.selectChoose')"
               clearable
               @clear="queryMtAccountIndex = null"
               style="width: 270px"
            >
              <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.mtAccount.labelIn')">
            <el-select
                v-model="queryMtAccountIndex2"
               :placeholder="t('common.selectChoose')"
               clearable
               @clear="queryMtAccountIndex2 = null"
               style="width: 270px"
            >
              <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.status.label')" prop="status">
            <el-select
               v-model="queryTransferParams.status"
               :placeholder="t('common.selectChoose')"
               clearable
               style="width: 270px"
            >
              <el-option v-for="(item, key, index) in transfer" :key="index" :label="t(item)" :value="key" ></el-option>
            </el-select>
         </el-form-item>
          <el-form-item :label="t('form.applyTime.label')">
            <el-date-picker
               v-model="transferDateRange" size="large" style="width: 270px;"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               :start-placeholder="t('form.applyTime.start')"
               :end-placeholder="t('form.applyTime.end')"
               :shortcuts="shortcuts"
            ></el-date-picker>
         </el-form-item>
         <el-form-item label="&emsp;" class="btn-right">
            <el-button type="primary" icon="Search"  @click="handleQuery">{{ t('form.search') }}</el-button>
            <el-button :loading="exportTransLoading" class="btn2" @click="handleExport">{{ t('form.export') }}
              <template #icon>
                <svg-icon  icon-class="export"></svg-icon>
              </template>
                <template #loading>
                  <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
              </el-button>
         </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingTransfer" :data="transferList" style="width: 100%;" v-if="permissionStore.powerList.includes('applyGoldTransfer')" >
          <el-table-column v-for="(item,index) in transferCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
            <template #default="scope">
              <template v-if="item.field == 'status'">
                <el-tag type="primary" effect="light" v-if="scope.row.status == 0" > {{ t(transfer['0']) }} </el-tag>
                <el-tag type="success" effect="light" v-if="scope.row.status == 1" > {{ t(transfer['1']) }} </el-tag>
                <el-tag type="danger" effect="light" v-if="scope.row.status == 2" > {{ t(transfer['2']) }} </el-tag>
                <el-tag type="danger"  effect="dark" v-if="scope.row.status == 3" > {{ t(transfer['3']) }} </el-tag>
                <el-tag type="info" effect="light" v-if="scope.row.status == -2" > {{ t(transfer['-2']) }} </el-tag>
              </template>
              <template v-else-if="item.field == 'mt4_server_out'" >
                {{ scope.row['mt4_server_out_name'] }}
              </template>
              <template v-else-if="item.field == 'mt4_server_in'" >
                {{ scope.row['mt4_server_in_name'] }}
              </template>
              <template v-else-if="item.field == 'transfer_type'" >
                <div v-html="getTransferTypeHtml(scope.row[item.field], scope.row)"></div>
              </template>
              <template v-else-if="item.field == 'usd_amount'" >
                {{ returnFloat(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'user_type'" >
                <div v-html="getUserTypeHtml(scope.row[item.field])"></div>
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="permissionStore.powerList.includes('applyGoldTransfer')" v-show="transferTotal > 0" :total="transferTotal" :autoScroll="false"
         v-model:page="queryTransferParams.curr_page"
         v-model:limit="queryTransferParams.page_size"
         @pagination="getList" />
      </div>
      <div class="report" v-if="activeMtName == 'fundout'" >
        <el-alert v-if="ioPowerMap!=null && (ioPowerMap.out_flag == false || ioPowerMap.out_flag == 'false')" :title="t('capital.dontOutTransfer')" type="error" :closable="false" />
        <el-alert v-if="ioPowerMap!=null && !isEmpty(ioPowerMap.fund_out) && ioPowerMap.fund_out==1" :title="t('capital.fundOutNoPowerContactService')" type="error" :closable="false" />
        <fund-gold-out :ioPowerMap="ioPowerMap" />
        <el-form :model="queryFundOutParams" autocapitalize="off" :inline="true" label-position="top" size="large" v-if="permissionStore.powerList.includes('applyFundOut')" >
          <el-form-item :label="t('form.status.label')" prop="status">
            <el-select
                v-model="queryFundOutParams.status"
                :placeholder="t('common.selectChoose')"
                clearable
                style="width: 270px"
            >
              <el-option v-for="(item, key, index) in fundOut" :key="index" :label="t(item)" :value="key" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.applyTime.label')">
            <el-date-picker
                v-model="fundoutDateRange" size="large" style="width: 270px;"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                :start-placeholder="t('form.applyTime.start')"
                :end-placeholder="t('form.applyTime.end')"
                :shortcuts="shortcuts"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="&emsp;" class="btn-right">
            <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
            <el-button :loading="exportFundOutLoading" class="btn2" @click="handleExport">{{ t('form.export') }}
              <template #icon>
                <svg-icon  icon-class="export"></svg-icon>
              </template>
                <template #loading>
                  <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
              </el-button>
          </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingFundout" :data="fundoutList" style="width: 100%;" v-if="permissionStore.powerList.includes('applyFundOut')" >
          <el-table-column v-for="(item,index) in fundoutCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
            <template #default="scope">
              <template v-if="item.field == 'status'">
                <el-tag type="primary" effect="light" v-if="scope.row.status == 0" > {{ t(fundOut['0']) }} </el-tag>
                <el-tag type="success" effect="light" v-if="scope.row.status == 1" > {{ t(fundOut['1']) }} </el-tag>
                <el-tag type="danger" effect="light" v-if="scope.row.status == 2" > {{ t(fundOut['2']) }} </el-tag>
                <el-tag type="danger"  effect="dark" v-if="scope.row.status == 3" > {{ t(fundOut['3']) }} </el-tag>
                <el-tag type="warning" effect="light" v-if="scope.row.status == -1" > {{ t(fundOut['-1']) }} </el-tag>
                <el-tag type="info" effect="light" v-if="scope.row.status == -2" > {{ t(fundOut['-2']) }} </el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.status == -3" > {{ t(fundOut['-3']) }} </el-tag>
              </template>
              <template v-else-if="item.field == 'currency_type'" >
                {{ scope.row['currency_type_text'] }}
              </template>
              <template v-else-if="item.field == 'user_balance' || item.field == 'usd_amount'" >
                {{ returnFloat3(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'currency_amount'" >
                {{ returnFloat(scope.row[item.field]) }}
              </template>
              <template v-else-if="item.field == 'operate'" >
                <el-button :loading="loadingCancelFundOut"
                v-if="scope.row.status == 0" @click="cancelFundOut(scope.row)" >{{ t('common.cancelText') }}
                  <template #loading>
                    <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                  </template>
                </el-button>
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="permissionStore.powerList.includes('applyFundOut')" v-show="fundoutTotal > 0" :total="fundoutTotal" :autoScroll="false"
          v-model:page="queryFundOutParams.curr_page"
          v-model:limit="queryFundOutParams.page_size"
          @pagination="getList" />
      </div>
      <div class="report" v-if="activeMtName == 'fundTransfer'">
        <el-alert v-if="ioPowerMap!=null && (ioPowerMap.out_flag == false || ioPowerMap.out_flag == 'false')" :title="t('capital.dontOutTransfer')" type="error" :closable="false" />
        <el-alert v-if="ioPowerMap!=null && !isEmpty(ioPowerMap.fund_transfer_own) && ioPowerMap.fund_transfer_own==1 && !isEmpty(ioPowerMap.fund_transfer_out) && ioPowerMap.fund_transfer_out==1" :title="t('capital.fundTransferNoPowerContactService')" type="error" :closable="false" />
        <fund-trans :ioPowerMap="ioPowerMap" />
        <el-form :model="queryFundTransferParams" autocapitalize="off" :inline="true" label-position="top" size="large" v-if="permissionStore.powerList.includes('applyFundTransfer')" >
          <el-form-item :label="t('form.mtAccount.labelIn')">
            <el-select
                v-model="queryMtAccountIndex2"
               :placeholder="t('common.selectChoose')"
               clearable
               @clear="queryMtAccountIndex2 = null"
               style="width: 270px"
            >
              <el-option v-for="(item, index) in mtAccountList" :key="index" :label="item.mt4_server_name + ' ' + item.mt4_login" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('form.status.label')" prop="status">
            <el-select
               v-model="queryFundTransferParams.status"
               :placeholder="t('common.selectChoose')"
               clearable
               style="width: 270px"
            >
              <el-option v-for="(item, key, index) in fundTransfer" :key="index" :label="t(item)" :value="key" ></el-option>
            </el-select>
         </el-form-item>
          <el-form-item :label="t('form.applyTime.label')">
            <el-date-picker
               v-model="fundTransferDateRange" size="large" style="width: 270px;"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               :start-placeholder="t('form.applyTime.start')"
               :end-placeholder="t('form.applyTime.end')"
               :shortcuts="shortcuts"
            ></el-date-picker>
         </el-form-item>
         <el-form-item label="&emsp;" class="btn-right">
            <el-button type="primary" icon="Search" @click="handleQuery">{{ t('form.search') }}</el-button>
            <el-button :loading="exportFundTransLoading" class="btn2" @click="handleExport">{{ t('form.export') }}
              <template #icon>
                <svg-icon  icon-class="export"></svg-icon>
              </template>
                <template #loading>
                  <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="rgb(41, 187, 228)" style="margin-right: 17px;" ></l-ring-2>
                </template>
              </el-button>
         </el-form-item>
        </el-form>
        <el-table v-htfx-loading="loadingFundTransfer" :data="fundTransferList" style="width: 100%;" v-if="permissionStore.powerList.includes('applyFundTransfer')" >
          <el-table-column v-for="(item,index) in fundTransferCols" :key="index" :label="item.title" :align="item.align" 
          :prop="item.field" :width="(item.field.endsWith('Time') || item.field.endsWith('time'))?160:'120'" >
            <template #default="scope">
              <template v-if="item.field == 'status'">
                <el-tag type="primary" effect="light" v-if="scope.row.status == 0" > {{ t(fundTransfer['0']) }} </el-tag>
                <el-tag type="success" effect="light" v-if="scope.row.status == 1" > {{ t(fundTransfer['1']) }} </el-tag>
                <el-tag type="danger" effect="light" v-if="scope.row.status == 2" > {{ t(fundTransfer['2']) }} </el-tag>
                <el-tag type="danger"  effect="dark" v-if="scope.row.status == 3" > {{ t(fundTransfer['3']) }} </el-tag>
                <el-tag type="warning" effect="light" v-if="scope.row.status == -1" > {{ t(fundTransfer['-1']) }} </el-tag>
                <el-tag type="info" effect="light" v-if="scope.row.status == -2" > {{ t(fundTransfer['-2']) }} </el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.status == -3" > {{ t(fundTransfer['-3']) }} </el-tag>
              </template>
              <template v-else-if="item.field == 'user_type'" >
                <div v-html="getUserTypeHtml(scope.row[item.field])"></div>
              </template>
              <template v-else-if="item.field == 'mt4_server'" >
                {{ scope.row['mt4_server_name'] }}
              </template>
              <template v-else-if="item.field == 'transfer_type'" >
                <div v-html="getTransferTypeHtml(scope.row[item.field], scope.row)"></div>
              </template>
              <template v-else-if="item.field == 'usd_amount' || item.field == 'user_balance'" >
                {{ returnFloat3(scope.row[item.field]) }}
              </template>
              <template v-else>
                {{ scope.row[item.field] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="permissionStore.powerList.includes('applyFundTransfer')" v-show="fundTransferTotal > 0" :total="fundTransferTotal" :autoScroll="false"
         v-model:page="queryFundTransferParams.curr_page"
         v-model:limit="queryFundTransferParams.page_size"
         @pagination="getList" />
      </div>
  </div>
</div>

</template>

<script setup name="Capital">
import KycTipBar from "@/components/KycTipBar"
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import usePermissionStore from '@/store/modules/permission'
import { inject, ref } from "vue";
import { queryBannerList, getMtTableInfo, getIfOTParams } from '@/api/common'
import { queryMyGoldInList, getPayChannel as getGoldInChannel } from '@/api/goldin'
import { queryMyGoldOutList, cancelGoldOut } from '@/api/goldout'
import { queryMyTransferList } from '@/api/transfer'
import { queryMyFundOutList, cancelFundGoldOut } from '@/api/fundout'
import { queryMyFundTransferList } from '@/api/fundtransfer'
import { getActInfo } from '@/api/activity'
import { serverLang } from '@/utils/i18n'
import { getUserTypeHtml, getPayTypeHtml, returnFloat, returnFloat3, getSubsidyHtml, getSubsidyAmountHtml, getTransferTypeHtml, isEmpty } from '@/utils/htfx'
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { goldIn, goldOut, transfer, fundOut, fundTransfer } from '@/views/capital/applyStatus'
import { generateShortcuts } from '@/utils/shortcutsUtils';
import dayjs from 'dayjs'
import PayChannel from './payChannel'
import MtGoldOut from "./mtGoldOut.vue"
import MtTrans from "./mtTrans.vue";
import FundTrans from "./ibTrans.vue";
import FundGoldOut from "./ibGoldOut.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";

const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)
const ioPowerMap = ref({})

const openMsg = inject('openMsg')

const { t } = useLocale()
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const { proxy } = getCurrentInstance();
const route = useRoute();

const kycStatus = ref(false)

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const mtAccountList = ref([])
const queryMtAccountIndex = ref(null)
const queryMtAccountIndex2 = ref(null)

const activeMtName = ref(route.params.type?route.params.type:'goldin')

const actId = ref(route.params.actId?route.params.actId: null)
const actMtLogin = ref(null)
const actMtServer = ref(null)
const actMtServerName = ref(null)
const serverId = ref(route.params.serverId?route.params.serverId: null)
const mtLogin = ref(route.params.mtLogin?route.params.mtLogin: null)

if(actId.value) {
  getActInfo({actId: actId.value, qcc_language: serverLang()}).then(resp => {
    actMtLogin.value = resp.data.actMtLogin
    actMtServer.value = resp.data.actMtServer
    actMtServerName.value = resp.data.actMtServerName
  })
}

const loadingGoldin = ref(false);
const loadingGoldout = ref(false);
const loadingTransfer = ref(false);
const loadingFundout = ref(false);
const loadingFundTransfer = ref(false);

const loadingCancelMtGoldOut = ref(false);
const loadingCancelFundOut = ref(false);

const goldinList = ref([])
const goldoutList = ref([])
const transferList = ref([])
const fundoutList = ref([])
const fundTransferList = ref([])
const goldinCols = ref([])
const goldoutCols = ref([])
const transferCols = ref([])
const fundoutCols = ref([])
const fundTransferCols = ref([])
const goldinTotal = ref(0)
const goldoutTotal = ref(0)
const transferTotal = ref(0)
const fundoutTotal = ref(0)
const fundTransferTotal = ref(0)

const shortcuts = ref(generateShortcuts(t))

const data = reactive({
  queryGoldInParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    status: undefined
  },
  queryGoldOutParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    status: undefined
  },
  queryTransferParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    status: undefined
  },
  queryFundOutParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    status: undefined
  },
  queryFundTransferParams: {
    curr_page: 1,
    page_size: 10,
    qcc_language: serverLang(),
    status: undefined
  },
  goldinDateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
  goldoutDateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
  transferDateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
  fundoutDateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
  fundTransferDateRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
});

const { queryGoldInParams, queryGoldOutParams, queryTransferParams, queryFundOutParams, queryFundTransferParams,
  goldinDateRange, goldoutDateRange, transferDateRange, fundoutDateRange, fundTransferDateRange } = toRefs(data);

watch(queryMtAccountIndex, (n, o) => {
  if(n == null || n < 0 || !mtAccountList.value || !mtAccountList.value.length) {
    queryGoldInParams.value.mt4_server = undefined
    queryGoldInParams.value.mt4_login = undefined
    queryGoldOutParams.value.mt4_server = undefined
    queryGoldOutParams.value.mt4_login = undefined
    queryTransferParams.value.mt4_server_out = undefined
    queryTransferParams.value.mt4_login_out = undefined
  } else {
    const { mt4_login, mt4_server } = mtAccountList.value[queryMtAccountIndex.value]
    queryGoldInParams.value.mt4_server = mt4_server
    queryGoldInParams.value.mt4_login = mt4_login
    queryGoldOutParams.value.mt4_server = mt4_server
    queryGoldOutParams.value.mt4_login = mt4_login
    queryTransferParams.value.mt4_server_out = mt4_server
    queryTransferParams.value.mt4_login_out = mt4_login
  }
})

watch(queryMtAccountIndex2, (n, o) => {
  if(n == null || n < 0 || !mtAccountList.value || !mtAccountList.value.length) {
    queryTransferParams.value.mt4_server_in = undefined
    queryTransferParams.value.mt4_login_in = undefined
    queryFundTransferParams.value.mt4_server = undefined
    queryFundTransferParams.value.mt4_login_in = undefined
  } else {
    const { mt4_login, mt4_server } = mtAccountList.value[queryMtAccountIndex2.value]
    queryTransferParams.value.mt4_server_in = mt4_server
    queryTransferParams.value.mt4_login_in = mt4_login
    queryFundTransferParams.value.mt4_server = mt4_server
    queryFundTransferParams.value.mt4_login_in = mt4_login
  }
})

function tabClick(data) {
  if (data == activeMtName.value) {
    return
  }
  activeMtName.value = data
  getList()
}

function closeBanner() {
  showBanner.value = false
  appStore.setShowBanner('0')
}

function loadBannerList() {
  queryBannerList({
    qcc_language: serverLang(),
    position: 1,
    type: 2
  }).then(resp => {
    if (resp.data) {
      bannerList.value = resp.data
    }
  })
}

function loadMtAccountList() {
  getMtTableInfo({
    mt4_server: '',
    language: serverLang(),
    server_type: ''
  }).then(resp => {
    if (resp.data) {
      mtAccountList.value = resp.data
    }
  })
}

const goldInChannelList = ref([])

function queryGoldInChannel() {
  getGoldInChannel({
    qcc_language: serverLang()
  }).then(resp => {
    goldInChannelList.value = resp.data
  })
}

function getList() {
  if (activeMtName.value == 'goldin' && permissionStore.powerList.includes('applyGoldIn')) {
    queryGoldInChannel()
    queryGoldin()
  } else if (activeMtName.value == 'goldout' && permissionStore.powerList.includes('applyGoldOut')) {
    queryGoldout()
  } else if (activeMtName.value == 'transfer' && permissionStore.powerList.includes('applyGoldTransfer')) {
    queryTransfer()
  } else if (activeMtName.value == 'fundout' && permissionStore.powerList.includes('applyFundOut')) {
    queryFundout()
  } else if (activeMtName.value == 'fundTransfer' && permissionStore.powerList.includes('applyFundTransfer')) {
    queryFundTransfer()
  }
}

function queryGoldin() {
  loadingGoldin.value = true;
  if (goldinDateRange.value && goldinDateRange.value.length) {
    queryGoldInParams.value.date_1_start = goldinDateRange.value[0]
    queryGoldInParams.value.date_1_end = goldinDateRange.value[1]
  } else {
    queryGoldInParams.value.date_1_start = undefined
    queryGoldInParams.value.date_1_end = undefined
  }
  queryMyGoldInList(queryGoldInParams.value).then(response => {
    goldinList.value = response.data.records;
    goldinCols.value = response.data.columns;
    goldinTotal.value = response.data.totalRecords;
    loadingGoldin.value = false;
  })
}

function queryGoldout() {
  loadingGoldout.value = true;
  if (goldoutDateRange.value && goldoutDateRange.value.length) {
    queryGoldOutParams.value.date_1_start = goldoutDateRange.value[0]
    queryGoldOutParams.value.date_1_end = goldoutDateRange.value[1]
  } else {
    queryGoldOutParams.value.date_1_start = undefined
    queryGoldOutParams.value.date_1_end = undefined
  }
  queryMyGoldOutList(queryGoldOutParams.value).then(response => {
    goldoutList.value = response.data.records;
    goldoutCols.value = response.data.columns;
    goldoutTotal.value = response.data.totalRecords;
    loadingGoldout.value = false;
  })
}

function queryTransfer() {
  loadingTransfer.value = true;
  if (transferDateRange.value && transferDateRange.value.length) {
    queryTransferParams.value.date_1_start = transferDateRange.value[0]
    queryTransferParams.value.date_1_end = transferDateRange.value[1]
  } else {
    queryTransferParams.value.date_1_start = undefined
    queryTransferParams.value.date_1_end = undefined
  }
  queryMyTransferList(queryTransferParams.value).then(response => {
    transferList.value = response.data.records;
    transferCols.value = response.data.columns;
    transferTotal.value = response.data.totalRecords;
    loadingTransfer.value = false;
  })
}

function queryFundout() {
  loadingFundout.value = true;
  if (fundoutDateRange.value && fundoutDateRange.value.length) {
    queryFundOutParams.value.date_1_start = fundoutDateRange.value[0]
    queryFundOutParams.value.date_1_end = fundoutDateRange.value[1]
  } else {
    queryFundOutParams.value.date_1_start = undefined
    queryFundOutParams.value.date_1_end = undefined
  }
  queryMyFundOutList(queryFundOutParams.value).then(response => {
    fundoutList.value = response.data.records;
    fundoutCols.value = response.data.columns;
    fundoutTotal.value = response.data.totalRecords;
    loadingFundout.value = false;
  })
}

function queryFundTransfer() {
  loadingFundTransfer.value = true;
  if (fundTransferDateRange.value && fundTransferDateRange.value.length) {
    queryFundTransferParams.value.date_1_start = fundTransferDateRange.value[0]
    queryFundTransferParams.value.date_1_end = fundTransferDateRange.value[1]
  } else {
    queryFundTransferParams.value.date_1_start = undefined
    queryFundTransferParams.value.date_1_end = undefined
  }
  queryMyFundTransferList(queryFundTransferParams.value).then(response => {
    fundTransferList.value = response.data.records;
    fundTransferCols.value = response.data.columns;
    fundTransferTotal.value = response.data.totalRecords;
    loadingFundTransfer.value = false;
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  if (activeMtName.value == 'goldin') {
    queryGoldInParams.value.curr_page = 1;
    getList();
  } else if (activeMtName.value == 'goldout') {
    queryGoldOutParams.value.curr_page = 1;
    getList();
  } else if (activeMtName.value == 'transfer') {
    queryTransferParams.value.curr_page = 1;
    getList();
  } else if (activeMtName.value == 'fundout') {
    queryFundOutParams.value.curr_page = 1;
    getList();
  } else if (activeMtName.value == 'fundTransfer') {
    queryFundTransferParams.value.curr_page = 1;
    getList();
  }
}

const exportGoldInLoading = ref(false)
const exportGoldOutLoading = ref(false)
const exportTransLoading = ref(false)
const exportFundOutLoading = ref(false)
const exportFundTransLoading = ref(false)

function handleExport() {
  if (activeMtName.value == 'goldin') {
    exportGoldInLoading.value = true
    proxy.download("/app/capital/queryMyGoldInListExport", {
      ...queryGoldInParams.value
    }, `export.xlsx`,null , () => {
      exportGoldInLoading.value = false
    });
  } else if (activeMtName.value == 'goldout') {
    exportGoldOutLoading.value = true
    proxy.download("/app/capital/queryMyGoldOutListExport", {
      ...queryGoldOutParams.value
    }, `export.xlsx`,null , () => {
      exportGoldOutLoading.value = false
    });
  } else if (activeMtName.value == 'transfer') {
    exportTransLoading.value = true
    proxy.download("/app/capital/queryMyTransferListExport", {
      ...queryTransferParams.value
    }, `export.xlsx`,null , () => {
      exportTransLoading.value = false
    });
  } else if (activeMtName.value == 'fundout') {
    exportFundOutLoading.value = true
    proxy.download("/app/capital/queryMyFundOutListExport", {
      ...queryFundOutParams.value
    }, `export.xlsx`,null , () => {
      exportFundOutLoading.value = false
    });
  } else if (activeMtName.value == 'fundTransfer') {
    exportFundTransLoading.value = true
    proxy.download("/app/capital/queryMyFundTransferListExport", {
      ...queryFundTransferParams.value
    }, `export.xlsx`,null , () => {
      exportFundTransLoading.value = false
    });
  }
}

/**
 * 取消MT出金
 */
function cancelMtGoldOut(data) {
  openMsg({
    title: t('capital.cancelGoldOut'),
    width: '600',
    status: 'warning',
    btn: {
      cancel: {
        text: t('common.cancelText')
      },
      ok: {
        text: t('common.okText')
      }
    }
  }).then(() => {
    loadingCancelMtGoldOut.value = true
    proxy.loading.show()
    cancelGoldOut({
      qcc_language: serverLang(),
      id: data.id
    }).then(resp => {
      loadingCancelMtGoldOut.value = false
      proxy.loading.hide()
      window.showTip({
          title: t('common.success.action'),
          status: 'success'
      })
      getList()
    }).catch(() => {
      loadingCancelMtGoldOut.value = false
      proxy.loading.hide()
    })
  }).catch(()=> {})
}

function cancelFundOut(data) {
  openMsg({
    title: t('capital.cancelGoldOut'),
    width: '600',
    status: 'warning',
    btn: {
      cancel: {
        text: t('common.cancelText')
      },
      ok: {
        text: t('common.okText')
      }
    }
  }).then(() => {
    loadingCancelFundOut.value = true
    proxy.loading.show()
    cancelFundGoldOut({
      qcc_language: serverLang(),
      id: data.id
    }).then(resp => {
      loadingCancelFundOut.value = false
      proxy.loading.hide()
      window.showTip({
          title: t('common.success.action'),
          status: 'success'
      })
      getList()
    }).catch(() => {
      loadingCancelFundOut.value = false
      proxy.loading.hide()
    })
  }).catch(()=> {})
}

function loadPageData() {
  loadBannerList();
  loadMtAccountList();
  getList();
  getIfOTParams().then(resp => {
      ioPowerMap.value = resp.data
  })
}

loadPageData()
</script>

<style lang="scss" scoped>
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }
}


.mt-tabs {
  overflow-x: auto;
  width: 100%;
  .tab-items {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    height: 40px;
    color: rgba(102, 102, 102, 1);
    user-select: none;

    .tab-item {
      padding: 0 50px;
      min-width: 170px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      white-space: nowrap;
    }

    .tab-item-active {
      color: rgba(51, 51, 51, 1);
      font-weight: 700;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        height: 4px;
        width: 100%;
        background-color: rgba(51, 51, 51, 1);
      }
    }
  }

  .tab-active-bar {
    width: 100%;
    height: 4px;
    border-bottom: 1px solid rgba(236, 236, 236, 1);
  }
}

.report {
  width: 100%;
  margin-top: 20px;

  :deep(.el-form-item__label) {
    font-size: 18px;
    color: #333333;
  }

  :deep(.el-table__header-wrapper) {
    border-top: 2px solid rgb(41, 187, 228);
  }
}

.btn-right{
  flex: 1;
  margin-right:0px;

  .btn2{
    background: rgba(243, 245, 247, 1);
    border: none;
    color: rgba(41, 187, 228, 1);
  }

  :deep(.el-form-item__content){
    justify-content: space-between;
  }

  :deep(.el-button--primary.el-button--large){

  }
}
</style>