gypsy-crm-frontend-vu/pages/follow/subscribe-list.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Documentary.TundManagement.item45')" />
        <view class="content-container">

            <view class="info-card">
                <cwg-complex-search :fields="filterFields" v-model="searchParams" @search="handleSearch"
                    @reset="handleReset" />
                <cwg-tabel ref="tableRef" :columns="currentColumns" :immediate="false" :queryParams="search"
                    :api="listApi" :show-operation="true" :showPagination="true">
                    <!-- 账户类型列自定义渲染 -->
                    <template #followType="{ row }">

                        <text v-t="followTypeMap[row.followType || row.loginType]" />
                    </template>
                    <template #timeRange="{ row }">
                        <view class="sp-view-tab">
                            {{ row.startTime || '--' }}
                        </view>
                        <view class="sp-view-tab-b">
                            {{ row.endTime || '--' }}
                        </view>
                    </template>
                    <!-- 金额列格式化 -->
                    <template #balanceEquity="{ row }">
                        <view class="sp-view-tab">
                            {{ numberDecimal(row.followBalance || 0) }}
                        </view>
                        <view class="sp-view-tab-b">
                            {{ numberDecimal(row.followEquity || 0) }}
                        </view>
                    </template>
                </cwg-tabel>
            </view>
        </view>
        <!--取消订阅提示-->
        <cwg-popup v-model:visible="dialogSubscribeCancelTip" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item47')">
            <view class="dia-content">
                <view class="des1" style="font-size: 16px; line-height: 1.6; margin: 30px 0 50px">
                    {{ t('Documentary.TundManagement.item60') }}
                </view>
            </view>
            <template #footer>
                <button @click="ToUnSubscribeCancelTip">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="ToUnSubscribe">{{ t('Documentary.TundManagement.item47') }}</button>
            </template>
        </cwg-popup>
        <!-- 取消订阅设置 -->
        <cwg-popup v-model:visible="dialogSubscribeCancel" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item47')">
            <view class="dia-content">
                <uni-forms ref="dialogSubscribeDataCancelRef" :model="dialogSubscribeDataCancel" label-position="top">
                    <!-- 信号源账户信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item28') }}</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">{{ numberDesensitization(dialogSubscribeDataCancel.dealLogin)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.console.item3') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.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(dialogSubscribeDataCancel.dealBalance || '0')||'--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.AccountType') }}</text>
                                <text class="delete-value"
                                    v-t="followTypeMap[dialogSubscribeDataCancel.followType || dialogSubscribeDataCancel.loginType]" />
                            </view>
                        </view>
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.console.item6') }}</text>
                                <text class="delete-value">{{ numberFormat(dialogSubscribeDataCancel.dealEquity || 0)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item30') }}</text>
                                <text class="delete-value">
                                    <text v-if="dialogSubscribeDataCancel.distributionType == 1"
                                        v-t="'Documentary.TundManagement.item59'"></text>
                                    <text v-else>--</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(dialogSubscribeDataCancel.dealCredit || 0)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item31') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.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:{{ dialogSubscribeDataCancel.dealLeverage || '0' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item32') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.settlementCycle || '--'
                                    }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 跟随账户设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item33') }}</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">{{ dialogSubscribeDataCancel.followLogin || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.Leverage') }}</text>
                                <text class="delete-value">1:{{ dialogSubscribeDataCancel.followLeverage || '--'
                                    }}</text>
                            </view>
                        </view>
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item35') }}</text>
                                <text class="delete-value"
                                    v-t="followTypeMap[dialogSubscribeDataCancel.followType || dialogSubscribeDataCancel.loginType]" />
                            </view>
                            <view class="delete-item" v-if="dialogSubscribeDataCancel.followType == 1">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item119') }}</text>
                                <text class="delete-value">{{ (dialogSubscribeDataCancel.volume / 100) || '--' }}</text>
                            </view>
                            <view class="delete-item" v-if="dialogSubscribeDataCancel.followType == 2">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item36') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.ratio || '--' }}%</text>
                            </view>
                        </view>
                    </view>

                    <!-- 保护设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item37') }}</text>
                    </view>
                    <view class="delete-grid">
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item38') }}</text>
                                <text class="delete-value">
                                    <text v-if="dialogSubscribeDataCancel.protectType == 1"
                                        v-t="'Documentary.tradingCenter.item120'"></text>
                                    <text v-if="dialogSubscribeDataCancel.protectType == 2"
                                        v-t="'Documentary.tradingCenter.item121'"></text>
                                    <text v-if="!dialogSubscribeDataCancel.protectType">--</text>
                                </text>
                            </view>
                            <view class="delete-item" v-if="dialogSubscribeDataCancel.protectType == 1">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item39') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.protectAmount || '--'
                                    }}($)</text>
                            </view>
                            <view class="delete-item" v-if="dialogSubscribeDataCancel.protectType == 2">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item122') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.protectRatio || '--'
                                    }}(%)</text>
                            </view>
                        </view>
                    </view>

                    <!-- 订阅时间 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item50') }}</text>
                    </view>
                    <view class="delete-grid">
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item51') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.startTime || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item52') }}</text>
                                <text class="delete-value">{{ dialogSubscribeDataCancel.endTime || '--' }}</text>
                            </view>
                        </view>
                    </view>

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

            <template #footer>
                <button @click="ToUnSubscribeCancel">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="dialogSubscribeCancelTipOpen" :disabled="flag">{{ t('Btn.Confirm')
                    }}</button>
            </template>
        </cwg-popup>

        <!-- 跟单设置 -->
        <cwg-popup v-model:visible="dialogSubscribeFllow" type="center" :mask-click="false" :show-footers="true"
            :title="t('Documentary.TundManagement.item48')">
            <view class="dia-content">
                <uni-forms ref="dialogSubscribeFllowRef" :model="dialogSubscribeFllowDataSelect" :rules="rules"
                    label-position="top" :label-width="120">
                    <!-- 信号源账户信息 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item28') }}</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">{{ numberDesensitization(dialogSubscribeFllowData.dealLogin)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.console.item3') }}</text>
                                <text class="delete-value">{{ dialogSubscribeFllowData.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(dialogSubscribeFllowData.dealBalance||0)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.AccountType') }}</text>
                                <text class="delete-value">{{ accountTypeName[dialogSubscribeFllowData.dealLoginType]
                                    }}</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(dialogSubscribeFllowData.dealEquity||0)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item30') }}</text>
                                <text class="delete-value">
                                    <text v-if="dialogSubscribeFllowData.distributionType == 1"
                                        v-t="'Documentary.TundManagement.item59'"></text>
                                    <text v-else>--</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(dialogSubscribeFllowData.dealCredit||0)
                                    }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item31') }}</text>
                                <text class="delete-value">{{ dialogSubscribeFllowData.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:{{ dialogSubscribeFllowData.dealLeverage || '0' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.tradingCenter.item32') }}</text>
                                <text class="delete-value">{{ optObj[dialogSubscribeFllowData.settlementCycle] || '--' }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 跟随账户设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item33') }}</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">{{ dialogSubscribeFllowData.followLogin || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Label.Leverage') }}</text>
                                <text class="delete-value">1:{{ dialogSubscribeFllowData.followLeverage || '--'
                                    }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 可编辑的跟单设置 -->
                    <view class="form-row" style="margin-top: 20px;">
                        <view class="form-col">
                            <uni-forms-item name="followType" :label="t('Documentary.tradingCenter.item35') + ':'">
                                <cwg-combox v-model:value="dialogSubscribeFllowDataSelect.followType" :clearable="false"
                                    :options="[
                                        { text: t('Documentary.tradingCenter.item118'), value: 3 },
                                        { text: t('Documentary.tradingCenter.item117'), value: 2 },
                                        { text: t('Documentary.tradingCenter.item116'), value: 1 }
                                    ]" :placeholder="t('placeholder.choose')" />
                            </uni-forms-item>
                        </view>
                        <view class="form-col" v-if="dialogSubscribeFllowDataSelect.followType == 1">
                            <uni-forms-item name="volume" :label="t('Documentary.tradingCenter.item120') + ':'">
                                <uni-easyinput v-model="dialogSubscribeFllowDataSelect.volume"
                                    :placeholder="t('placeholder.input')" />
                            </uni-forms-item>
                        </view>
                        <view class="form-col" v-if="dialogSubscribeFllowDataSelect.followType == 2">
                            <uni-forms-item name="ratio" :label="t('Documentary.tradingCenter.item123') + '（%）'">
                                <uni-easyinput v-model="dialogSubscribeFllowDataSelect.ratio"
                                    :placeholder="t('placeholder.input')" />
                            </uni-forms-item>
                        </view>
                    </view>

                    <!-- 保护设置 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.tradingCenter.item37') }}</text>
                        <switch :checked="dialogSubscribeFllowDataSelect.protect === 1"
                            @change="e => dialogSubscribeFllowDataSelect.protect = e.detail.value ? 1 : 0"
                            color="#cf1322" />
                    </view>
                    <view class="form-item">

                    </view>

                    <view class="form-row" v-if="dialogSubscribeFllowDataSelect.protect">
                        <view class="form-col">
                            <uni-forms-item name="protectType" :label="t('Documentary.tradingCenter.item38') + ':'">
                                <cwg-combox v-model:value="dialogSubscribeFllowDataSelect.protectType"
                                    :clearable="false"
                                    :options="[{ text: t('Documentary.tradingCenter.item120'), value: 1 }]"
                                    :placeholder="t('placeholder.choose')" />
                            </uni-forms-item>
                        </view>
                        <view class="form-col" v-if="dialogSubscribeFllowDataSelect.protectType == 1">
                            <uni-forms-item name="protectAmount" :label="t('Documentary.tradingCenter.item39') + ':'">
                                <uni-easyinput v-model="dialogSubscribeFllowDataSelect.protectAmount"
                                    :placeholder="t('placeholder.input')">
                                    <template #suffix>($)</template>
                                </uni-easyinput>
                            </uni-forms-item>
                        </view>
                        <view class="form-col" v-if="dialogSubscribeFllowDataSelect.protectType == 2">
                            <uni-forms-item name="protectRatio" :label="t('Documentary.tradingCenter.item122') + ':'">
                                <uni-easyinput v-model="dialogSubscribeFllowDataSelect.protectRatio"
                                    :placeholder="t('placeholder.input')">
                                    <template #suffix>(%)</template>
                                </uni-easyinput>
                            </uni-forms-item>
                        </view>
                    </view>

                    <!-- 订阅时间 -->
                    <view class="fllow-title">
                        <text class="title">{{ t('Documentary.TundManagement.item50') }}</text>
                    </view>
                    <view class="delete-grid">
                        <view class="delete-row">
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item51') }}</text>
                                <text class="delete-value">{{ dialogSubscribeFllowData.startTime || '--' }}</text>
                            </view>
                            <view class="delete-item">
                                <text class="delete-label">{{ t('Documentary.TundManagement.item52') }}</text>
                                <text class="delete-value">{{ dialogSubscribeFllowData.endTime || '--' }}</text>
                            </view>
                        </view>
                    </view>

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

            <template #footer>
                <button @click="FllowSettingCancel">{{ t('Btn.Cancel') }}</button>
                <button type="primary" @click="FllowSetting">{{ 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 { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { documentaryApi } from '@/service/documentary';
import { useFilters } from '@/composables/useFilters'
import {useFollowEnum} from '@/pages/follow/const/enum'
const {optObj} =useFollowEnum()

const { numberFormat, numberDesensitization, numberDecimal } = useFilters()
const search = ref({
    status: 1,
    login: '',
    endTime: '',
    startTime: ''
})
const typeMap = [
    { value: 'MT4', text: 'MT4' },
    { value: 'MT5', text: 'MT5' }]
// 动态传入筛选字段配置
const filterFields = computed(() => [
    { key: 'followPlatform', type: 'select', label: t('Label.Platform'), placeholder: t('placeholder.choose'), options: typeMap },
    !isSubscribeLoading.value && { key: 'followLogin', type: 'select', label: t('Documentary.console.item28'), placeholder: t('placeholder.choose'), options: SubscribeDownData.value },
    { key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' }
])

const followTypeMap = {
    1: 'Documentary.tradingCenter.item116',
    2: 'Documentary.tradingCenter.item117',
    3: 'Documentary.tradingCenter.item118'
}
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 SubscribeDownData = ref([])
//获取客户跟单账户的下拉列表
const isSubscribeLoading = ref(false)
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.followLogin || '--',
            value: item.followLogin
        })) || []
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        })
    }
    isSubscribeLoading.value = false
}
const searchParams = ref({})
const tableRef = ref(null)
const handleSearch = (params) => {
    search.value = { ...search.value, ...params }
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}

const accountTypeName = computed(()=>{
  return {
    1:t('AccountType.ClassicAccount'),
    2:t('AccountType.SeniorAccount'),
    7:t('AccountType.StandardAccount'),
    8:t('AccountType.CentAccount'),
  }
})

const handleReset = (params) => {
    search.value = { ...search.value, ...params }
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}
const currentColumns = computed(() => [
    {
        prop: 'dealNickname',
        label: t('Documentary.tradingCenter.item1'),
        align: 'center',
        formatter: ({ row }) => row.dealNickname || '--'
    },
    {
        prop: 'dealLogin',
        label: t('Documentary.tradingCenter.item18'),
        align: 'center',
        formatter: ({ row }) => numberDesensitization(row.dealLogin) || '--'
    },
    {
        prop: 'followLogin',
        label: t('Documentary.console.item28'),
        align: 'center',
        formatter: ({ row }) => row.followLogin || '--'
    },
    {
        prop: 'followPlatform',
        label: t('Label.Platform'),
        align: 'center',
        formatter: ({ row }) => row.followPlatform || '--'
    },
    {
        prop: 'followLeverage',
        label: t('Label.Leverage'),
        align: 'center',
        formatter: ({ row }) => row.followLeverage ? `1:${row.followLeverage}` : '--'
    },
    {
        prop: 'followType',
        label: t('Documentary.TundManagement.item19'),
        align: 'center',
        slot: 'followType'
    },
    {
        prop: 'followValue',
        label: t('Documentary.TundManagement.item20'),
        align: 'center',
    },
    {
        prop: 'balanceEquity',
        label: t('Label.Balance') + '/' + t('Label.Equity'),
        align: 'center',
        slot: 'balanceEquity',
    },
    {
        prop: 'timeRange',
        label: t('Documentary.TundManagement.item26') + ' / ' + t('Documentary.TundManagement.item27'),
        align: 'center',
        slot: 'timeRange',
    },
    {
        prop: 'action',
        label: t('Label.Action'),
        type: 'action',
        align: 'center',
        menuList: [
            {
                label: t('Documentary.TundManagement.item47'),
                type: 'Unsubscribe',
                btnClick: (row) => handleMenuClick({ type: 'Unsubscribe', row }),
                show: true,
            },
            {
                label: t('Documentary.TundManagement.item48'),
                type: 'settings',
                btnClick: (row) => handleMenuClick({ type: 'settings', row }),
                show: true,
            }
        ],
    },
])


const dialogSubscribeFllow = ref(false)
const dialogSubscribeDataCancel = ref({})
const dialogSubscribeCancel = ref(false)
const dialogSubscribeFllowData = ref({})
const dialogSubscribeFllowDataSelect = ref({})
const dialogSubscribeFllowRef = ref(null)
const handleMenuClick = (item) => {
    if (item.type == "Unsubscribe") {
        dialogSubscribeDataCancel.value = item.row;
        dialogSubscribeCancel.value = true;
    } else if (item.type == "settings") {
        dialogSubscribeFllowData.value = item.row;
        dialogSubscribeFllowDataSelect.value = {
            protect: item.row.protect,
            protectType: item.row.protectType,
            protectAmount: item.row.protectAmount,
            protectRatio: item.row.protectRatio,
            followType: item.row.followType,
            volume: item.row.volume / 100,
            ratio: item.row.ratio,
        };
        dialogSubscribeFllow.value = true;
    }
}

const dialogSubscribeCancelTip = ref(false)
const dialogSubscribeDataCancelRef = ref(null)
//取消订阅
const ToUnSubscribe = async () => {
    try {
        if (flag.value) {
            return;
        } else {
            flag.value = true;
        }

        let res = await documentaryApi.followDealSubscribeUnsubscribe({
            id: dialogSubscribeDataCancel.value.id,
        });
        if (res.code == 200) {
            uni.showToast({
                title: t('Msg.Success'),
                icon: 'none'
            })
            ToUnSubscribeCancel();
            ToUnSubscribeCancelTip();
            tableRef.value.refreshTable()
            getSubscribeLoginDown();
            flag.value = false;
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            })
            flag.value = false;
        }
    } catch (error) {
        return false;
    }
}
const ToUnSubscribeCancel = () => {
    dialogSubscribeDataCancelRef?.value?.clearValidate()
    dialogSubscribeCancel.value = false;
}
const dialogSubscribeCancelTipOpen = () => {
    ToUnSubscribeCancel();
    dialogSubscribeCancelTip.value = true;
}
const ToUnSubscribeCancelTip = () => {
    ToUnSubscribeCancel();
    dialogSubscribeCancelTip.value = false;
}
//跟单设置
const FllowSetting = async () => {
    try {
        await dialogSubscribeFllowRef.value.validate()
        if (flag.value) {
            return;
        } else {
            flag.value = true;
        }

        let primary = {
            id: dialogSubscribeFllowData.value.id,
            protect: dialogSubscribeFllowDataSelect.value.protect,
            protectType: dialogSubscribeFllowDataSelect.value.protect
                ? dialogSubscribeFllowDataSelect.value.protectType
                : null,
            protectAmount:
                dialogSubscribeFllowDataSelect.value.protect &&
                    dialogSubscribeFllowDataSelect.value.protectType == 1
                    ? dialogSubscribeFllowDataSelect.value.protectAmount
                    : null,
            protectRatio:
                dialogSubscribeFllowDataSelect.value.protect &&
                    dialogSubscribeFllowDataSelect.value.protectType == 2
                    ? dialogSubscribeFllowDataSelect.value.protectRatio
                    : null,
            followType: dialogSubscribeFllowDataSelect.value.followType,
            volume:
                dialogSubscribeFllowDataSelect.value.followType == 1
                    ? dialogSubscribeFllowDataSelect.value.volume * 100
                    : null,
            ratio:
                dialogSubscribeFllowDataSelect.value.followType == 2
                    ? dialogSubscribeFllowDataSelect.value.ratio
                    : null,
        };

        let res = await documentaryApi.followDealSubscribeUpdate(primary);
        if (res.code == 200) {
            uni.showToast({
                title: t('Msg.Success'),
                icon: 'none'
            })
            FllowSettingCancel();
            tableRef.value.refreshTable()
            getSubscribeLoginDown();
            flag.value = false;
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            })
            flag.value = false;
        }
    } catch (error) {
        flag.value = false;
    }
}
const FllowSettingCancel = function () {
    dialogSubscribeFllowRef?.value?.clearValidate()
    dialogSubscribeFllow.value = false;
}


const flag = ref(false)
const listApi = ref(null)
onMounted(() => {
    getSubscribeLoginDown()
    listApi.value = documentaryApi.followDealSubscribeList
})

</script>

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

.sp-view-tab {
    border-bottom: 1px dashed #98989880;
    line-height: 2;
}

.sp-view-tab-b {
    line-height: 2;
}

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


.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(22);
    font-weight: 500;
    color: var(--bs-emphasis-color);
    background-color: rgba(255, 255, 255, 0);

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


        .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(26) 0;

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

.dia-content {
    padding: 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: px2rpx(10) 0 px2rpx(16);

        .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;
    }

    .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(26);
        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);

        .agree-text {
            font-size: px2rpx(14);
            color: var(--bs-body-color);
            line-height: 1.5;
            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);
    }

    .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>