gypsy-crm-frontend-vu/pages/follow/trading-management.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="container">
            <view class="row">
                <view class="col-12">
                    <view class="border-0 card-header">
                        <view class="d-flex flex-wrap gap-3 align-items-center justify-content-between mb-3">
                            <h3 class="mb-0" style="align-self: flex-start" v-t="'Documentary.TundManagement.item11'">
                            </h3>
                            <button class="btn btn-secondary btn-shadow waves-effect" @click="getCustomLoginDownLogin">
                                <view class="d-flex align-items-center">
                                    <cwg-icon icon="crm-plus" :size="16" color="#fff" />
                                    <text v-t="'Documentary.TundManagement.item12'" />
                                </view>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content-container list-content-empty" v-if="accountDataLoading || accountData.length > 0">
            <uni-loading v-if="accountDataLoading" />
            <view class="field-container" v-else>
                <view class="account-l-con" v-for="(item, index) in accountData" :key="index">
                    <view class="tit">
                        <view>
                            <i class="el-icon-success green-icon"></i><text class="tit-tit"
                                v-t="'Documentary.TundManagement.item13'"></text>
                            - {{ item.dealLogin || "--" }}
                        </view>
                        <view class="caozuo">
                            <cwg-icon class="cwg-cursor" @click="dialogFllowDele(item)" name="crm-trash-can" />
                            <cwg-icon class="cwg-cursor" @click="dialogFllowUpdate(item)" name="cog-outline" />
                        </view>
                    </view>
                    <view class="account-grid">
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.TradingAccount'"></view>
                            <view class="num">{{ item.dealLogin || "--" }}</view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.PlatformType'"></view>
                            <view class="num">{{ item.dealPlatform || "--" }}</view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.AccountType'"></view>
                            <view class="num">
                                <text>{{ groupTypeName(item.dealLoginType) }}</text>
                            </view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.Leverage'"></view>
                            <view class="num">
                                <text v-if="item.dealLeverage">1:{{ item.dealLeverage }}</text>
                                <text v-else>{{ "--" }}</text>
                            </view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.Balance'"></view>
                            <view class="num">
                                {{ numberFormat(item.dealBalance || 0) }}
                            </view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Label.Equity'"></view>
                            <view class="num">{{ numberFormat(item.dealEquity || 0) }}</view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Documentary.TundManagement.item14'"></view>
                            <view class="num">{{ optObj[item.settlementCycle] || "--" }}</view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Documentary.TundManagement.item15'"></view>
                            <view class="num">
                                <text v-if="item.distributionType == 1"
                                    v-t="'Documentary.TundManagement.item59'"></text>
                            </view>
                        </view>
                        <view class="account-grid-item">
                            <view class="sub" v-t="'Documentary.TundManagement.item16'"></view>
                            <view class="num">{{ item.distributionRatio || "0" }}%</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="content-container list-content-empty">
            <view class="list-empty-state">
                <cwg-empty-state />
            </view>
        </view>
        <!-- 删除信号源 -->
        <cwg-popup v-model:visible="dialogFllowDelete" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item28')">
            <view class="dia-content">
                <view class="fllow-title delete-title">
                    <text class="title">{{ t('Documentary.TundManagement.item29') }}</text>
                </view>

                <view class="delete-grid">
                    <view class="delete-row">
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.tradingCenter.item29') }}</text>
                            <text class="delete-value">{{ dialogFllowDataDelete.dealLogin || '--' }}</text>
                        </view>
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.console.item3') }}</text>
                            <text class="delete-value">{{ dialogFllowDataDelete.dealPlatform || '--' }}</text>
                        </view>
                    </view>
                    <view class="delete-row">
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.console.item7') }}</text>
                            <text class="delete-value">{{ numberFormat(dialogFllowDataDelete.dealBalance || 0) }}</text>
                        </view>
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Label.AccountType') }}</text>
                            <text class="delete-value">
                                <text> {{ groupTypeName(dialogFllowDataDelete.dealLoginType) }}</text>
                            </text>
                        </view>
                    </view>
                    <view class="delete-row">
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.console.item6') }}</text>
                            <text class="delete-value">{{ numberFormat(dialogFllowDataDelete.dealEquity) }}</text>
                        </view>
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.tradingCenter.item30') }}</text>
                            <text class="delete-value">
                                <text v-if="dialogFllowDataDelete.distributionType == 1"
                                    v-t="'Documentary.TundManagement.item59'"></text>
                            </text>
                        </view>
                    </view>
                    <view class="delete-row">
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Label.Credit') }}</text>
                            <text class="delete-value">{{ numberFormat(dialogFllowDataDelete.dealCredit || 0) }}</text>
                        </view>
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.tradingCenter.item31') }}</text>
                            <text class="delete-value">{{ dialogFllowDataDelete.distributionRatio || '0' }}%</text>
                        </view>
                    </view>
                    <view class="delete-row">
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Label.Leverage') }}</text>
                            <text class="delete-value">1:{{ dialogFllowDataDelete.dealLeverage || '0' }}</text>
                        </view>
                        <view class="delete-item">
                            <text class="delete-label">{{ t('Documentary.tradingCenter.item32') }}</text>
                            <text class="delete-value">{{ optObj[dialogFllowDataDelete.settlementCycle] || '--' }}</text>
                        </view>
                    </view>
                </view>

                <view class="delete-tip">
                    <text v-t="'Documentary.TundManagement.item30'"></text>
                </view>
            </view>

            <template #footer>
                <button @click="FllowDeleCancel">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="FllowDele">{{ t('Btn.Confirm') }}</button>
            </template>
        </cwg-popup>
        <!-- 信号源设置 -->
        <cwg-popup v-model:visible="dialogFllow" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item31')" width="650px">
            <uni-forms ref="formRef" :model="dialogFllowData" :rules="rules" label-position="top">
                <!-- 名片信息 -->
                <view class="dia-content">
                    <!-- 名片信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item126') }}</text>
                    </view>

                    <view class="form-item">
                        <uni-forms-item name="nickname" :label="t('Documentary.console.item20')">
                            <uni-easyinput v-model="dialogFllowData.nickname" :placeholder="t('placeholder.input')"
                                @blur="validateAmount" />
                        </uni-forms-item>
                    </view>

                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="personalSignature" :label="t('Documentary.console.item21')">
                                    <uni-easyinput v-model="dialogFllowData.personalSignature"
                                        :placeholder="t('placeholder.input')" type="textarea"
                                        @input="filterChineseEnglishOnlyForApply('personalSignature', $event, 1)" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="traderStrategy" :label="t('Documentary.console.item22')">
                                    <uni-easyinput v-model="dialogFllowData.traderStrategy"
                                        :placeholder="t('placeholder.input')" type="textarea"
                                        @input="filterChineseEnglishOnlyForApply('traderStrategy', $event, 1)" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>

                    <view class="tip-red">
                        <text v-t="'Documentary.console.item37'"></text>
                    </view>

                    <!-- 账户信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item29') }}</text>
                    </view>
                    <view class="delete-grid">
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.console.item3') }}</text>
                                <text class="delete-value">{{ dialogFllowData.dealPlatform || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item29') }}</text>
                                <text class="delete-value">{{ dialogFllowData.dealLogin || '--' }}</text>
                            </view>

                        </view>
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.AccountType') }}</text>
                                <text class="delete-value">
                                    <text> {{ groupTypeName(dialogFllowData.dealLoginType) }}</text>
                                </text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.Leverage') }}</text>
                                <text class="delete-value">1:{{ dialogFllowData.dealLeverage || '0' }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 展示设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item32') }}</text>
                    </view>
                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="historyShow" :label="t('Documentary.TundManagement.item34')">
                                    <cwg-combox v-model:value="dialogFllowData.historyShow" :clearable="false"
                                        :options="[{ text: t('Btn.item6'), value: 1 }, { text: t('Btn.item7'), value: 0 }]"
                                        :placeholder="t('placeholder.choose')" />

                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="historyTime" :label="t('Documentary.TundManagement.item35')">
                                    <uni-datetime-picker v-model="dialogFllowData.historyTime" type="date"
                                        :placeholder="t('placeholder.input')" @change="handleDateChange" />
                                    <!-- <uni-date-picker type="date" v-model="dialogFllowData.historyTime" /> -->
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <uni-forms-item name="introduceShow" :label="t('Documentary.TundManagement.item36')">
                            <cwg-combox v-model:value="dialogFllowData.historyShow" :clearable="false"
                                :options="[{ text: t('Btn.item6'), value: 1 }, { text: t('Btn.item7'), value: 0 }]"
                                :placeholder="t('placeholder.choose')" />
                        </uni-forms-item>
                    </view>

                    <!-- 分润设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item33') }}</text>
                    </view>

                    <!-- 已有订阅 → 只读 -->
                    <view v-if="dialogFllowData.followCount" class="delete-grid">
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item38') }}</text>
                                <text class="delete-value">{{ dialogFllowData.distributionType || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item32') }}</text>
                                <text class="delete-value">{{ dialogFllowData.settlementCycle || '--' }}</text>
                            </view>
                        </view>
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item39') }}</text>
                                <text class="delete-value">{{ dialogFllowData.distributionRatio || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item32') }}</text>
                                <text class="delete-value">{{ dialogFllowData.settlementCycle || '--' }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 无订阅 → 可编辑 -->
                    <view v-else class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="distributionType" :label="t('Documentary.TundManagement.item38')">
                                    <cwg-combox v-model:value="dialogFllowData.distributionType" :clearable="false"
                                        :options="[{ text: t('Documentary.TundManagement.item59'), value: 1 }]"
                                        :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="distributionRatio"
                                    :label="t('Documentary.TundManagement.item39') + '（%）'">
                                    <uni-easyinput v-model="dialogFllowData.distributionRatio"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="settlementCycle" :label="t('Documentary.tradingCenter.item32')">
                                    <cwg-combox v-model:value="dialogFllowData.settlementCycle" :clearable="false"
                                        :options="optList1" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                </view>
            </uni-forms>

            <template #footer>

                <button @click="FllowUpdateCancel">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="FllowUpdate">{{ t('Btn.Confirm') }}</button>
            </template>
        </cwg-popup>

        <!--申请成为信号源-->
        <cwg-popup v-model:visible="dialogFllowApply" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item41')" width="650px">
            <uni-forms ref="applyRef" :model="dialogFllowDataApply" :rules="rules" label-position="top"
                label-width="200px">
                <!-- 名片信息 -->
                <view class="dia-content">
                    <!-- 名片信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item126') }}</text>
                    </view>

                    <view class="form-item">
                        <uni-forms-item name="nickname" :label="t('Documentary.console.item20')">
                            <uni-easyinput v-model="dialogFllowDataApply.nickname" :placeholder="t('placeholder.input')"
                                @blur="validateAmount" />
                        </uni-forms-item>
                    </view>

                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="personalSignature" :label="t('Documentary.console.item21')">
                                    <uni-easyinput v-model="dialogFllowDataApply.personalSignature"
                                        :placeholder="t('placeholder.input')" type="textarea"
                                        @input="filterChineseEnglishOnlyForApply('personalSignature', $event, 2)" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="traderStrategy" :label="t('Documentary.console.item22')">
                                    <uni-easyinput v-model="dialogFllowDataApply.traderStrategy"
                                        :placeholder="t('placeholder.input')" type="textarea"
                                        @input="filterChineseEnglishOnlyForApply('traderStrategy', $event, 2)" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>

                    <view class="tip-red">
                        <text v-t="'Documentary.console.item37'"></text>
                    </view>

                    <!-- 账户信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item29') }}{{ fundRequirementText }}</text>
                    </view>
                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="dealLogin" :label="t('Label.TradingAccount')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.dealLogin" :clearable="false"
                                        :options="loginOptions" :placeholder="t('placeholder.choose')"
                                        @change="selectLoginDeal" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="platform" :label="t('Label.PlatformType')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.platform" :clearable="false"
                                        :options="[{ text: 'MT4', value: 'MT4' }, { text: 'MT5', value: 'MT5' }]"
                                        :placeholder="t('placeholder.choose')" :disabled="true" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="loginType" :label="t('Label.AccountType')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.loginType" :clearable="false"
                                        :options="[
                                            { text: t('AccountType.ClassicAccount'), value: 1 },
                                            { text: t('AccountType.SeniorAccount'), value: 2 },
                                            { text: t('AccountType.SpeedAccount'), value: 5 },
                                            { text: t('AccountType.SpeedAccount'), value: 6 },
                                            { text: t('AccountType.StandardAccount'), value: 7 },
                                            { text: t('AccountType.CentAccount'), value: 8 }
                                        ]" :placeholder="t('placeholder.choose')" :disabled="true" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="leverage" :label="t('Label.Leverage')">
                                    <uni-easyinput v-model="dialogFllowDataApply.leverage"
                                        :placeholder="t('placeholder.input')" :disabled="true" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>

                    <!-- 展示设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item32') }}</text>
                    </view>
                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="historyShow" :label="t('Documentary.TundManagement.item34')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.historyShow" :clearable="false"
                                        :options="[{ text: t('Btn.item6'), value: 1 }, { text: t('Btn.item7'), value: 0 }]"
                                        :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="historyTime" :label="t('Documentary.TundManagement.item35')">
                                    <uni-datetime-picker v-model="dialogFllowDataApply.historyTime" type="date"
                                        :placeholder="t('Documentary.TundManagement.item37')" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <uni-forms-item name="introduceShow" :label="t('Documentary.TundManagement.item36')">
                            <cwg-combox v-model:value="dialogFllowDataApply.introduceShow" :clearable="false"
                                :options="[{ text: t('Btn.item6'), value: 1 }, { text: t('Btn.item7'), value: 0 }]"
                                :placeholder="t('placeholder.choose')" />
                        </uni-forms-item>
                    </view>

                    <!-- 分润设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item33') }}</text>
                    </view>

                    <view class="form-row">
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="distributionType" :label="t('Documentary.TundManagement.item38')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.distributionType" :clearable="false"
                                        :options="[{ text: t('Documentary.TundManagement.item59'), value: 1 }]"
                                        :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="distributionRatio"
                                    :label="t('Documentary.TundManagement.item39') + '（%）'">
                                    <uni-easyinput v-model="dialogFllowDataApply.distributionRatio"
                                        :placeholder="t('placeholder.input')" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="form-col">
                            <view class="form-item">
                                <uni-forms-item name="settlementCycle" :label="t('Documentary.tradingCenter.item32')">
                                    <cwg-combox v-model:value="dialogFllowDataApply.settlementCycle" :clearable="false"
                                        :options="optList1" :placeholder="t('placeholder.choose')" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>

                    <uni-forms-item class="agree" name="agree">
                        <checkbox-group :value="dialogFllowDataApply.agree ? ['1'] : []" @change="onAgreeChange">
                            <label class="checkbox-agree">
                                <checkbox value="1" :checked="dialogFllowDataApply.agree" />
                                <text class="agree-text">
                                    {{ t('Documentary.TundManagement.item42') }}
                                    <cwg-link type="pdf" style="text-decoration: underline;" class="a"
                                        :url="isZh ? 'pdf/CopyTradeUserAgreementcn.pdf' : 'pdf/CopyTradeUserAgreement.pdf'"
                                        target="_blank" title="Documentary.TundManagement.item43" />
                                    {{ t('Documentary.TundManagement.item42_2') }}
                                </text>
                            </label>
                        </checkbox-group>
                    </uni-forms-item>

                </view>
            </uni-forms>

            <template #footer>
                <button @click="ApplyFllowCancel">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="ApplyFllow">{{ t('Btn.Confirm') }}</button>
            </template>
        </cwg-popup>

    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick, onMounted, reactive, watch } from 'vue';
import { isAfterJuly28 } from '@/utils/dateUtils'
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { documentaryApi } from '@/service/documentary';
import useUserStore from "@/stores/use-user-store";
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
import { useFilters } from '@/composables/useFilters'
const { numberFormat, numberDecimal } = useFilters()
import { useFollowEnum } from '@/pages/follow/const/enum'
const { optObj, optList1 } = useFollowEnum()

const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));

const formRef = ref(null)
const rules = computed(() => ({
    password: {
        rules: [
            {
                required: true,
                validateFunction: (rule, value, data, callback) => {
                    if (Config.Pattern.Password.test(value)) {
                        callback()
                    } else {
                        callback(t('vaildate.password.format'))
                    }
                    return true
                }
            }
        ]
    },
    agree: {
        rules: [
            {
                validateFunction: (rule, value, data, callback) => {
                    if (value) {
                        callback()
                    } else {
                        callback(t('vaildate.agree.empty'))
                    }
                    return true
                }
            }
        ]
    },
    platform: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    currency: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    leverage: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    loginType: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    dealLogin: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    distributionType: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    distributionRatio: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (value >= 0 && value <= 50) {
                        callback()
                    } else {
                        callback('0-50')
                    }
                    return true
                }
            }
        ]
    },
    settlementCycle: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            }
        ]
    },
    historyShow: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    historyTime: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    introduceShow: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    protectAmount: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            }
        ]
    },
    protectRatio: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            }
        ]
    },
    nickname: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (value && /^[0-9a-zA-Z]{1,24}$/.test(value)) {
                        callback()
                    } else {
                        callback(t('Msg.nickname'))
                    }
                    return true
                }
            }
        ]
    },
    personalSignature: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (!value || /^[\u4e00-\u9fa5a-zA-Z\s]*$/.test(value)) {
                        callback()
                    } else {
                        callback(t('Documentary.console.item38'))
                    }
                    return true
                }
            }
        ]
    },
    traderStrategy: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (!value || /^[\u4e00-\u9fa5a-zA-Z\s]*$/.test(value)) {
                        callback()
                    } else {
                        callback(t('Documentary.console.item38'))
                    }
                    return true
                }
            }
        ]
    },
    followType: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            }
        ]
    },
    volume: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            }
        ]
    },
    ratio: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty')
            }
        ]
    }
}));

watch(locale, () => {
    formRef.value?.clearValidate()
})

const filterChineseEnglishOnlyForApply = (field, value, type) => {
    // 只保留中文、英文和空格
    const filtered = value.replace(/[^\u4e00-\u9fa5a-zA-Z\s]/g, '');
    // 去掉前后空格，如果没有正文内容（全是空格）就设置为空字符串
    const trimmed = filtered.trim();
    if (type == 1) {
        nextTick(() => {
            dialogFllowData.value[field] = trimmed;
        })
    } else {
        nextTick(() => {
            dialogFllowDataApply[field] = trimmed;
        })
    }
}
//获取客户跟单账户的下拉列表
const isSubscribeLoading = ref(false)
const SubscribeDownData = ref([])
const getSubscribeLoginDown = async () => {
    isSubscribeLoading.value = true
    let res = await documentaryApi.followDealSubscribeLoginList({
        platform: "",
        page: null,
    });
    if (res.code == 200) {
        SubscribeDownData.value = res.data?.map(item => ({
            text: t('Documentary.console.item28') + '-' + item.dealLogin || '--',
            value: item.dealLogin
        })) || []
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        })
    }
    isSubscribeLoading.value = false
}
const onAgreeChange = (e) => {
    dialogFllowDataApply.agree = e.detail.value.length > 0
}

// 单位类型
function groupCurrency(type) {
    const map = { GBP: ': £', USD: ': $', EUR: ': €', USC: ': ￠' }
    return map[type] || ': $'
}

// 账户类型
function groupTypeName(type) {
    const typeMap = {
        '1': t('AccountType.ClassicAccount'),
        '2': t('AccountType.SeniorAccount'),
        '3': isAfterJuly28() ? '--' : t('AccountType.AgencyAccount'),
        '5': t('AccountType.SpeedAccount'),
        '6': t('AccountType.SpeedAccount'),
        '7': t('AccountType.StandardAccount'),
        '8': t('AccountType.CentAccount')
    }
    return typeMap[type] || ''
}

const loginOptions = computed(() => loginOptionsLogin.value.map(item => ({
    text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance || 0}`,
    value: item.login,
    disable: item.balance < 1000
})))

const selectLoginDeal = () => {
    loginOptionsLogin.value.forEach((item) => {
        if (item.login == dialogFllowDataApply.dealLogin) {
            dialogFllowDataApply.leverage = "1:" + item.leverage;
            dialogFllowDataApply.loginType = item.type;
            dialogFllowDataApply.platform = item.platform;
        }
    });
}

const applyRef = ref(null)
const dialogFllowDataApply = reactive({
    dealLogin: '',
    leverage: '',
    loginType: '',
    platform: '',
    currency: '',
    leverageStatus: '',
    withdrawStatus: '',
    depositStatus: '',
    accountStatus: '',
    status: '',
    note: '',
    followType: '',
    volume: '',
    ratio: '',
    traderStrategy: '',
    personalSignature: '',
    nickname: '',
    protectAmount: '',
    protectRatio: '',
    introduceShow: '',
    historyShow: '',
    historyTime: '',
    settlementCycle: '',
    distributionType: '',
    distributionRatio: '',
    withdrawCurrency: '',
    withdrawAmount: '',
    depositCurrency: '',
    depositAmount: '',
    withdrawLogin: '',
    depositLogin: '',
    addTime: '',
    title: '',
})
const loginOptionsLogin = ref([])
const dialogFllowApply = ref(false)
//获取申请信号源交易账户下拉
const getCustomLoginDownLogin = async () => {
    if (flag.value) {
        return;
    } else {
        flag.value = true;
    }
    let res = await documentaryApi.CustomDropdownData({
        platform: "",
    });
    if (res.code == 200) {
        loginOptionsLogin.value = res.data;
        dialogFllowApply.value = true;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }
    flag.value = false;
}
watch(() => dialogFllowDataApply.dealLogin, (newVal, oldVal) => {
    if (newVal !== oldVal) {
        selectLoginDeal();
    }
})

//申请信号源
const ApplyFllow = async () => {
    try {
        await applyRef.value.validate()
        if (flag.value) {
            return;
        } else {
            flag.value = true;
        }
        let res = await documentaryApi.followDealApply({
            ...dialogFllowDataApply,
        });
        if (res.code == 200) {
            uni.showToast({
                title: t("Msg.Success"),
                icon: 'none'
            });
            ApplyFllowCancel();
            getDealLogin();
            flag.value = false;
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            });
            flag.value = false;
        }
    } catch (error) {
        uni.showToast({title:error.msg, icon: 'none'});
    } finally {
        flag.value = false;
    }
}
const ApplyFllowCancel = () => {
    applyRef.value &&
        applyRef.value.clearValidate();
    dialogFllowApply.value = false;
}

//获取客户信号源账户
const accountDataLoading = ref(false)
const accountData = ref([])
const accountPager = ref({
    current: 1,
    row: 10,
    rowTotal: 0,
    pageTotal: 0
})
const getDealLogin = async () => {
    accountDataLoading.value = true;
    let res = await documentaryApi.followDealList({
        platform: null,
        status: 2,
        page: {
            current: accountPager.value.current,
            row: accountPager.value.row,
        },
    });
    if (res.code == 200) {
        accountData.value = res.data || []
        accountPager.value.rowTotal = res.page.rowTotal;
        accountPager.value.pageTotal = res.page.pageTotal;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }
    accountDataLoading.value = false;

}
//修改信号源
const dialogFllowData = ref({})
const dialogFllow = ref(false)
const dialogFllowDataDelete = ref({})
const dialogFllowDelete = ref(false)
const flag = ref(false)
const dialogFllowUpdate = (item) => {
    dialogFllowData.value = item;
    dialogFllow.value = true;
}
const FllowUpdate = async () => {
    try {
        await formRef.value.validate()
        if (flag.value) {
            return;
        } else {
            flag.value = true;
        }

        let res = await documentaryApi.followDealUpdate({
            ...dialogFllowData.value,
        });
        if (res.code == 200) {
            uni.showToast({
                title: t("Msg.Success"),
                icon: 'none'
            });
            FllowUpdateCancel();
            tableRef.value.refreshTable()
            getDealLogin();
            getSubscribeLoginDown()
            flag.value = false;
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            });
            flag.value = false;
        }
    } catch (error) {
        flag.value = false;
    }
}
const FllowUpdateCancel = () => {
    formRef.value && formRef.value.clearValidate();

    dialogFllow.value = false;
}
//删除信号源
const dialogFllowDele = (item) => {
    dialogFllowDataDelete.value = item;
    dialogFllowDelete.value = true;
}
const FllowDele = async () => {
    if (flag.value) {
        return;
    } else {
        flag.value = true;
    }

    let res = await documentaryApi.followDealDelete({
        ids: [dialogFllowDataDelete.value.id],
    });
    if (res.code == 200) {
        uni.showToast({
            title: t("Msg.Success"),
            icon: 'none'
        });
        FllowDeleCancel();
        tableRef.value.refreshTable()
        getDealLogin();
        getSubscribeLoginDown()
        flag.value = false;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
        flag.value = false;
    }
}
const FllowDeleCancel = () => {
    dialogFllowDelete.value = false;
}
const listApi = ref(null)
onMounted(() => {
    getDealLogin()
    getSubscribeLoginDown()
    listApi.value = documentaryApi.followDealSubscribeDealList
})


</script>

<style scoped lang="scss">
@import "@/uni.scss";

.btn {
    margin: 0;
}

.content-container {
    .field-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: px2rpx(16);
        min-width: 0;
        overflow: hidden;

        @media (max-width: 991px) {
            grid-template-columns: 1fr;
        }

        .account-l-con {
            background-color: transparent;
            border-radius: px2rpx(8);
            padding: px2rpx(20);
            margin-bottom: px2rpx(16);
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 100%;
            border: 1px solid var(--bs-border-color);
            box-sizing: border-box;

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            .tit {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: px2rpx(20);
                padding-bottom: px2rpx(12);
                border-bottom: 1px solid var(--bs-border-color);

                view:first-child {
                    display: flex;
                    align-items: center;
                    gap: px2rpx(8);

                    .green-icon {
                        color: #28a745;
                        font-size: px2rpx(16);
                    }

                    .tit-tit {
                        font-size: px2rpx(16);
                        font-weight: 600;
                        color: var(--bs-emphasis-color);
                    }

                    text:last-child {
                        font-size: px2rpx(14);
                        font-weight: 500;
                        color: var(--bs-body-color);
                    }
                }

                .caozuo {
                    display: flex;
                    gap: px2rpx(12);

                    i {
                        font-size: px2rpx(18);
                        color: var(--bs-body-color);
                        transition: all 0.2s ease;

                        &:hover {
                            color: #eb3f57;
                            cursor: pointer;
                        }

                        &:active {
                            transform: scale(0.9);
                        }
                    }
                }
            }

            .account-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: px2rpx(16);
                width: 100%;
                box-sizing: border-box;

                @media (max-width: 480px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                .account-grid-item {
                    /* 🔥 核心修复 3：去掉强制最小宽度，避免超宽 */
                    /* min-width: px2rpx(200); */
                    margin-bottom: px2rpx(16);

                    .sub {
                        font-size: px2rpx(12);
                        font-weight: 500;
                        color: var(--bs-body-color);
                        margin-bottom: px2rpx(4);
                        text-transform: uppercase;
                        letter-spacing: px2rpx(0.5);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .num {
                        font-size: px2rpx(14);
                        font-weight: 400;
                        color: var(--bs-emphasis-color);
                        line-height: 1.4;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

}

.avatar {
    width: px2rpx(60);
    height: px2rpx(60);
    border-radius: 4px;
}


.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content-title-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);
        margin-bottom: px2rpx(24);


        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: #fff;
            padding: 0 px2rpx(12);
            border: none;
            font-size: px2rpx(14);
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(8);
        }

        .btn-primary1 {
            background-color: #cf1322;
            ;
        }

        .btn-primary2 {
            background-color: var(--color-secondary-focus);
        }
    }
}

.operation-btn {
    :deep(text) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(4);
        cursor: pointer;
        background-color: var(--color-slate-150);
        padding: px2rpx(8) 0;
    }
}

.operation-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.search-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: px2rpx(16);
    margin: px2rpx(16) 0;

    .cwg-combox,
    .uni-easyinput,
    .uni-date {
        width: px2rpx(240) !important;
        flex: none;
    }
}

.dia-content {
    padding: px2rpx(20) px2rpx(20) px2rpx(100) px2rpx(20);

    .uni-forms-item {
        width: 100%;
    }

    .grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: px2rpx(20);
        margin: px2rpx(24) 0;
        padding: px2rpx(20);
        background-color: transparent;
        border-radius: px2rpx(8);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }



    .fllow-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 10px;

        .title {
            font-weight: bold;
            color: var(--bs-heading-color);
            padding-left: 8px;
            border-left: 4px solid #eb3f57;
            font-size: 16px;
        }
    }

    .delete-grid {
        margin: px2rpx(16) 0;
    }

    .delete-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: px2rpx(12);

        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .delete-item {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rpx(12) 0;
        border-bottom: 1px dashed #e9ecef;

        &:first-child {
            padding-right: px2rpx(16);
        }

        &:last-child {
            padding-left: px2rpx(16);
        }
    }

    .delete-label {
        font-size: px2rpx(14);
        color: var(--bs-body-color);
    }

    .delete-value {
        font-size: px2rpx(14);
        color: var(--bs-emphasis-color);
        font-weight: 400;
    }

    .delete-tip {
        margin-top: px2rpx(16);
        font-size: px2rpx(14);
        color: var(--bs-emphasis-color);
        line-height: 1.5;
        padding-top: px2rpx(16);
    }

    .tip-star {
        color: #dc3545;
        margin-right: px2rpx(4);
    }

    .agree {
        margin-top: px2rpx(20);
    }

    .checkbox-agree {
        display: flex;
        align-items: flex-start;
        gap: px2rpx(8);

        :deep(.uni-checkbox-input) {
            width: px2rpx(18);
            height: px2rpx(18);
        }

        .agree-text {
            font-size: px2rpx(14);
            color: var(--bs-emphasis-color);
            line-height: 1.3;
            font-weight: normal;
            width: 100%;
            white-space: wrap;

            .a {
                color: #007bff;
                text-decoration: underline;
                margin: 0 px2rpx(4);

                &:hover {
                    color: #0056b3;
                }
            }
        }
    }

    .fllow-content {
        margin-bottom: px2rpx(16);

        .tit {
            font-size: px2rpx(14);
            font-weight: 500;
            color: var(--bs-body-color);
            margin-bottom: px2rpx(6);
            text-transform: uppercase;
            letter-spacing: px2rpx(0.5);
        }

        .con {
            font-size: px2rpx(16);
            font-weight: 400;
            color: var(--bs-emphasis-color);
            line-height: 1.4;
        }
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: px2rpx(20);
        margin-top: px2rpx(16);

        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .form-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        text {
            font-size: px2rpx(14);
            font-weight: 500;
            color: var(--bs-body-color);
            margin-bottom: px2rpx(8);
            white-space: nowrap;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: px2rpx(10);
            border: 1px solid #ced4da;
            border-radius: px2rpx(4);
            font-size: px2rpx(14);
            transition: all 0.2s ease;

            &:focus {
                outline: none;
                border-color: #4dabf7;
                box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);
            }
        }

        textarea {
            resize: vertical;
            min-height: px2rpx(100);
        }
    }

    .tip-red {
        color: #dc3545;
        font-size: px2rpx(14);
        margin: px2rpx(12) 0 px2rpx(24) 0;
    }

    .tip-text {
        margin-top: px2rpx(24);
        font-size: px2rpx(14);
        color: var(--bs-body-color);
        line-height: 1.5;
        padding: px2rpx(16);
        background-color: #e7f3ff;
        border-radius: px2rpx(4);
        border-left: 4px solid #4dabf7;
    }
}

/* 弹窗按钮样式 */
:deep(.cwg-popup__footer) {
    display: flex;
    gap: px2rpx(20);
    padding: px2rpx(20);
    border-top: 1px solid #e9ecef;

    button {
        flex: 1;
        padding: px2rpx(12) 0;
        border-radius: px2rpx(4);
        font-size: px2rpx(14);
        font-weight: 500;
        transition: all 0.2s ease;

        &:first-child {
            background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
            color: #495057;
            border: 1px solid #ced4da;

            &:hover {
                background-color: transparent;
                border-color: #adb5bd;
            }

            &:active {
                transform: scale(0.98);
            }
        }

        &:last-child {
            background-color: #dc3545;
            color: white;
            border: 1px solid #dc3545;

            &:hover {
                background-color: #c82333;
                border-color: #bd2130;
            }

            &:active {
                transform: scale(0.98);
            }
        }
    }
}
</style>