gypsy-crm-frontend-vu/pages/ib/components/applyIbDialog.vue

<template>
  <cwg-popup :title="t('Ib.Report.Title5')" :visible="visible" @close="closeDia" @confirm="confirmDia">
    <view class="dia-content">
      <uni-forms ref="formRef" labelWidth="200">
        <uni-forms-item v-if="isFormApplyIb" :label="t('Ib.Custom.Manage3')+':'" prop="customerId">
          <cwg-combox v-model:value="addAgentForm.customerId" :options="customerList"
                      :placeholder="t('placeholder.choose')" filterable/>
        </uni-forms-item>
        <view class="commission-groups">
          <view v-for="(group, gIndex) in commissionTemplateTableData" :key="gIndex" class="group-card">
            <!-- 头部开关和标题 -->
            <view class="group-header" @click="toggleGroup(group)">
              <view class="group-title">
                <text class="title-text">{{ group.accountGroup }}</text>
              </view>
              <view class="group-switch" @click.stop>
                <switch :checked="group.isOpen" @change="(e) => onGroupSwitchChange(e, group)" color="#2b5aed" style="transform:scale(0.8)"/>
              </view>
            </view>

            <!-- 展开的内容区 -->
            <view v-show="group.isOpen" class="group-body">
              <view v-for="(item, iIndex) in group.items" :key="iIndex" class="item-row">
                <view class="item-title">
                  <text class="type-badge">{{ item.dataType === 'rebates' ? 'Rebates' : 'Commissions' }}</text>
                  <text class="type-text">{{ item.type }}</text>
                </view>
                
                <view class="item-fields">
                  <!-- METAL -->
                  <view class="field-col">
                    <text class="field-label">METAL</text>
                    <cwg-combox 
                      v-model:value="item.energy" 
                      :options="formatOptions(item.energyOptions)" 
                      :placeholder="t('placeholder.choose')" 
                    />
                  </view>
                  
                  <!-- FX -->
                  <view class="field-col">
                    <text class="field-label">FX</text>
                    <cwg-combox 
                      v-model:value="item.forex" 
                      :options="formatOptions(item.forexOptions)" 
                      :placeholder="t('placeholder.choose')" 
                    />
                  </view>
                  
                  <!-- ENERGY -->
                  <view class="field-col">
                    <text class="field-label">ENERGY</text>
                    <cwg-combox 
                      v-model:value="item.energy2" 
                      :options="formatOptions(item.energy2Options)" 
                      :placeholder="t('placeholder.choose')" 
                    />
                  </view>
                  
                  <!-- CFD -->
                  <view class="field-col">
                    <text class="field-label">CFD</text>
                    <cwg-combox 
                      v-model:value="item.index" 
                      :options="formatOptions(item.indexOptions)" 
                      :placeholder="t('placeholder.choose')" 
                    />
                  </view>
                  
                  <!-- INDEX -->
                  <view class="field-col">
                    <text class="field-label">INDEX</text>
                    <cwg-combox 
                      v-model:value="item.metal" 
                      :options="formatOptions(item.metalOptions)" 
                      :placeholder="t('placeholder.choose')" 
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </uni-forms>
    </view>
  </cwg-popup>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
  import { customApi } from '@/service/custom'
  import { financialApi } from '@/service/financial'
  import Config from '@/config/index'
  import { ibApi } from '@/service/ib'
  import useUserStore from '@/stores/use-user-store'
  import { lang } from '@/composables/config'

  const props = defineProps({
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    // 详情tableData
    detail: { type: Array, default: () => ([]) },
    isFormApplyIb: {
      type: Boolean,
      default: true,
    },
  })
  const { Code, Host80 } = Config
  const { t } = useI18n()
  const formRef = ref(null)
  const addAgentForm = ref({
    customerId: '',
  })
  const customerList = ref([])
  const commissionAccountTypeSettings = ref({
    ecn: { selectedIndex: null, selectedItem: null, loginType: '2' },
    standard: { selectedIndex: null, selectedItem: null, loginType: '7' },
    cent: { selectedIndex: null, selectedItem: null, loginType: '8' },
  })
  const commissionAccountTypeData = ref({
    ecn: [],
    standard: [],
    cent: [],
  })
  const commissionTemplateTableData = ref<any[]>([])
  const emit = defineEmits(['close', 'confirm'])

  onMounted(() => {
    initCommissionTemplateData(29634)
  })

  watch(() => props.detail, (val) => {
    if (val) {
      const { cId, id, comPoint1, hide1 } = val
      dialogForm.value = {
        cId, id, comPoint1, hide1,
      }
      initCommissionTemplateData(29634)
      // if (val.id) {
      //   initCommissionTemplateData(val.id)
      // }
    }
  })

  const getSpreadLabelCommission = (item) => {
    return item.groupName || ''
  }

  const handleCommissionAccountTypeChange = (type, loginType) => {
    const setting = commissionAccountTypeSettings.value[type]
    const availableSpreads = getAvailableSpreadsCommission(loginType)
    if (
      setting.selectedIndex !== null &&
      setting.selectedIndex !== undefined
    ) {
      setting.selectedItem = availableSpreads[setting.selectedIndex] || null
    } else {
      setting.selectedItem = null
    }
  }

  const generateOptions = (currentValue) => {
    const options = [];
    for (let i = 0; i <= currentValue; i++) {
      options.push(i);
    }
    return options;
  }

  // 格式化 options 为 combox 期望的格式
  const formatOptions = (opts) => {
    if (!opts || !Array.isArray(opts)) return []
    return opts.map(val => ({ text: String(val), value: val }))
  }

  const toggleGroup = (group) => {
    group.isOpen = !group.isOpen
  }

  const onGroupSwitchChange = (e, group) => {
    group.isOpen = e.detail.value
  }

  const initCommissionTemplateData = async (customId: string | number) => {
    try {
      const res = await ibApi.getVietnamPoints({ customId })

      if (res.code == Code.StatusOK && res.data && Array.isArray(res.data)) {
        const groupedData: Record<string, any[]> = {}

        res.data.forEach((group: any) => {
          const accountGroup = group.groupCategoryName || '--'
          const valid = group.valid !== undefined ? group.valid : 1
          
          if (!groupedData[accountGroup]) {
            groupedData[accountGroup] = []
          }

          const rebates = Array.isArray(group.rebates) ? group.rebates : []
          const superRebates = Array.isArray(group.superRebates) ? group.superRebates : []
          if (superRebates.length > 0) {
            const rebateRow: any = {
              accountGroup,
              groupCategoryId: group.groupCategoryId,
              dataType: 'rebates',
              type: group.rebateTypeName || 'Point',
              valid,
              forex: 0,
              index: 0,
              metal: 0,
              energy: 0,
              energy2: 0,
              energy2Max: 0,
              forex1: 0,
              index1: 0,
              metal1: 0,
              energy1: 0,
            }

            rebates.forEach((rebate: any) => {
              if (rebate.symbolCategory === 1) rebateRow.forex = rebate.point || 0
              else if (rebate.symbolCategory === 2) rebateRow.index = rebate.point || 0
              else if (rebate.symbolCategory === 3) rebateRow.metal = rebate.point || 0
              else if (rebate.symbolCategory === 4) rebateRow.energy = rebate.point || 0
              else if (rebate.symbolCategory === 5) rebateRow.energy2 = rebate.point || 0
            })

            superRebates.forEach((rebate: any) => {
              if (rebate.symbolCategory === 1) rebateRow.forex1 = rebate.point || 0
              else if (rebate.symbolCategory === 2) rebateRow.index1 = rebate.point || 0
              else if (rebate.symbolCategory === 3) rebateRow.metal1 = rebate.point || 0
              else if (rebate.symbolCategory === 4) rebateRow.energy1 = rebate.point || 0
              else if (rebate.symbolCategory === 5) rebateRow.energy2Max = rebate.point || 0
            })

            rebateRow.forexOptions = generateOptions(rebateRow.forex1)
            rebateRow.indexOptions = generateOptions(rebateRow.index1)
            rebateRow.metalOptions = generateOptions(rebateRow.metal1)
            rebateRow.energyOptions = generateOptions(rebateRow.energy1)
            rebateRow.energy2Options = generateOptions(rebateRow.energy2Max)

            groupedData[accountGroup].push(rebateRow)
          }

          const commissions = Array.isArray(group.commissions) ? group.commissions : []
          const superCommissions = Array.isArray(group.superCommissions) ? group.superCommissions : []
          if (superCommissions.length > 0) {
            const commissionRow: any = {
              accountGroup,
              groupCategoryId: group.groupCategoryId,
              dataType: 'commissions',
              type: group.commissionTypeName || 'Commission',
              valid,
              forex: 0,
              index: 0,
              metal: 0,
              energy: 0,
              energy2: 0,
              energy2Max: 0,
              forex1: 0,
              index1: 0,
              metal1: 0,
              energy1: 0,
            }

            commissions.forEach((comm: any) => {
              if (comm.symbolCategory === 1) commissionRow.forex = comm.point || 0
              else if (comm.symbolCategory === 2) commissionRow.index = comm.point || 0
              else if (comm.symbolCategory === 3) commissionRow.metal = comm.point || 0
              else if (comm.symbolCategory === 4) commissionRow.energy = comm.point || 0
              else if (comm.symbolCategory === 5) commissionRow.energy2 = comm.point || 0
            })

            superCommissions.forEach((comm: any) => {
              if (comm.symbolCategory === 1) commissionRow.forex1 = comm.point || 0
              else if (comm.symbolCategory === 2) commissionRow.index1 = comm.point || 0
              else if (comm.symbolCategory === 3) commissionRow.metal1 = comm.point || 0
              else if (comm.symbolCategory === 4) commissionRow.energy1 = comm.point || 0
              else if (comm.symbolCategory === 5) commissionRow.energy2Max = comm.point || 0
            })

            commissionRow.forexOptions = generateOptions(commissionRow.forex1)
            commissionRow.indexOptions = generateOptions(commissionRow.index1)
            commissionRow.metalOptions = generateOptions(commissionRow.metal1)
            commissionRow.energyOptions = generateOptions(commissionRow.energy1)
            commissionRow.energy2Options = generateOptions(commissionRow.energy2Max)

            groupedData[accountGroup].push(commissionRow)
          }
        })

        // 将按 accountGroup 聚合后的对象转换为包含 accountGroup 和 items 数组的结构
        const finalData = Object.keys(groupedData).map((accountGroup) => {
          return {
            accountGroup,
            isOpen: false, // 默认不展开
            items: groupedData[accountGroup],
          }
        })

        console.log('tableData',finalData)
        commissionTemplateTableData.value = finalData
        return
      }

      commissionTemplateTableData.value = []
      uni.showToast({
        title: res.msg || t('Ib.Custom.GetDataFailed'),
        icon: 'none',
      })
    } catch (error) {
      commissionTemplateTableData.value = []
      uni.showToast({ title: t('Ib.Custom.GetDataFailed'), icon: 'none' })
    }
  }

  const toVerified = () => {
    // 确认按钮点击事件
    emit('confirm')
  }

  const cancel = () => {
    // 取消按钮点击事件
    emit('close')
  }

  const closeDia = () => {
    emit('close')
  }

  const confirmDia = async () => {
    // 确认按钮点击事件
    const loginConfig = []
    Object.keys(commissionAccountTypeSettings.value).forEach((key) => {
      const setting = commissionAccountTypeSettings.value[key]
      if (setting.selectedItem) {
        loginConfig.push(setting.selectedItem)
      }
    })
    let res = await ibApi.customCommissionPoint({
      id: dialogForm.value.id,
      loginConfig,
    })
    if (res.code == Code.StatusOK) {
      uni.showToast({
        title: t('Msg.ModifySuccess'),
      })
      cancel()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
    emit('confirm')
  }
</script>
<style lang="scss" scoped>
  @import "@/uni.scss";

  .commission-groups {
    margin-top: px2rpx(10);
    padding-bottom: px2rpx(150); /* 预留底部空间，防止最下面的下拉框被截断或遮挡 */
  }

  .group-card {
    border: 1px solid #ebeef5;
    border-radius: px2rpx(6);
    margin-bottom: px2rpx(15);
    background-color: #fff;
    /* overflow: hidden; 移除此属性，防止下拉框被遮挡截断 */
  }

  .group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px2rpx(10) px2rpx(15);
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    border-top-left-radius: px2rpx(6);
    border-top-right-radius: px2rpx(6);
  }

  .group-title {
    font-size: px2rpx(14);
    font-weight: bold;
    color: #303133;
  }

  .group-body {
    padding: px2rpx(15);
  }

  .item-row {
    margin-bottom: px2rpx(15);
    padding-bottom: px2rpx(15);
    border-bottom: 1px dashed #ebeef5;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
  }

  .item-title {
    margin-bottom: px2rpx(10);
    display: flex;
    align-items: center;

    .type-badge {
      background-color: #e1f3d8;
      color: #67c23a;
      padding: px2rpx(2) px2rpx(8);
      border-radius: px2rpx(4);
      font-size: px2rpx(12);
      margin-right: px2rpx(8);
    }

    .type-text {
      font-size: px2rpx(13);
      color: #606266;
    }
  }

  .item-fields {
    display: flex;
    flex-wrap: wrap;
    gap: px2rpx(10);
    justify-content: flex-start;
  }

  .field-col {
    flex: 0 0 calc(20% - px2rpx(10));
    min-width: px2rpx(80);
    max-width: px2rpx(120);
    display: flex;
    flex-direction: column;

    .field-label {
      font-size: px2rpx(12);
      color: #909399;
      margin-bottom: px2rpx(5);
    }
  }

  .dialog-account-adjust-body {
    padding: 20rpx;
  }

  .account-adjust-cid-row {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .account-adjust-cid-label {
    color: #606266;
    margin-right: px2rpx(5);
  }

  .account-adjust-cid-value {
    font-weight: bold;
    color: #303133;
  }

  .form-section {
    margin-bottom: 20rpx;
  }

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: px2rpx(15);
    font-weight: bold;
    font-size: px2rpx(14);
  }

  .section-title i {
    margin-right: 10rpx;
  }

  .account-type-grid {
  }

  .account-type-card {
    display: flex;
    flex-direction: column;
    margin-bottom: px2rpx(20);
  }

  .account-type-label {
    margin-bottom: 10rpx;
    font-size: 14rpx;
  }

  .account-select {
    width: 100%;
  }

  .dialog-account-adjust-footer {
    padding: 20rpx;
  }

  .account-adjust-notes-panel {
    margin-bottom: 20rpx;
  }

  .account-adjust-notes-section {
    background-color: #f5f7fa;
    padding: 15rpx;
    border-radius: 8rpx;
  }

  .account-adjust-notes-title {
    display: flex;
    align-items: center;
    margin-bottom: px2rpx(10);
    font-weight: bold;
    font-size: px2rpx(13);
  }

  .account-adjust-notes-title-icon {
    margin-right: px2rpx(10);
  }

  .account-adjust-notes-list {
    margin-left: px2rpx(20);
    color: #606266;
    font-size: px2rpx(13);
  }

  .account-adjust-notes-list .list {
    margin-bottom: px2rpx(5);
    margin-left: px2rpx(10);
  }

  .account-adjust-footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15rpx;
  }

  .account-adjust-footer-buttons button {
    min-width: 120rpx;
  }
</style>