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

<template>
  <cwg-popup :title="t(title)" :visible="visible" @close="closeDia" @confirm="confirmDia" :width="'900px'">
    <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')" @change="changeCustomer" style="max-width: 280px" />
        </uni-forms-item>
        <uni-loading v-if="laoding" />
        <view v-else class="commission-table-container" v-if="addAgentForm.customerId">
          <table class="commission-table">
            <thead>
              <tr>
                <th class="status-col">{{ t('Ib.Custom.Status') }}</th>
                <th class="group-col"></th>
                <th class="type-col"></th>
                <th class="value-col" v-for="(item, index) in tableData" :key="index">{{ item }}</th>
                <!-- <th class="value-col">FX（{{ t('vu.tradingCenter.item72') }}）</th>
                <th class="value-col">ENERGY（{{ t('vu.tradingCenter.item73') }}）</th>
                <th class="value-col">CFD（{{ t('vu.tradingCenter.item74') }}）</th>
                <th class="value-col">INDEX（{{ t('vu.tradingCenter.item75') }}）</th> -->
                <!-- <th class="value-col">CRYPTO（{{ t('vu.tradingCenter.item76') }}）</th> -->
              </tr>
            </thead>
            <tbody v-for="(group, gIndex) in commissionTemplateTableData" :key="gIndex">
              <tr v-for="(item, iIndex) in group.items" :key="iIndex">
                <td v-if="iIndex === 0" :rowspan="group.items.length" class="center-td">
                  <switch :checked="group.isOpen" @change="(e) => onGroupSwitchChange(e, group)" color="#2b5aed"
                    style="transform:scale(0.7)" />
                </td>
                <td v-if="iIndex === 0" :rowspan="group.items.length" class="center-td group-name-td">
                  {{ group.accountGroup }}
                </td>
                <td class="center-td type-td">
                  {{ item.type }}
                </td>
                <td class="value-col">
                  <!-- {{ formatOptions(item.energyOptions) }} -->
                  <cwg-combox v-model:value="item.energy" :options="formatOptions(item.energyOptions)"
                    :placeholder="t('placeholder.choose')" />
                </td>
                <td class="value-col">
                  <cwg-combox v-model:value="item.forex" :options="formatOptions(item.forexOptions)"
                    :placeholder="t('placeholder.choose')" />
                </td>
                <td class="value-col">
                  <cwg-combox v-model:value="item.energy2" :options="formatOptions(item.energy2Options)"
                    :placeholder="t('placeholder.choose')" />
                </td>
                <td class="value-col">
                  <cwg-combox v-model:value="item.index" :options="formatOptions(item.indexOptions)"
                    :placeholder="t('placeholder.choose')" />
                </td>
                <td class="value-col">
                  <cwg-combox v-model:value="item.metal" :options="formatOptions(item.metalOptions)"
                    :placeholder="t('placeholder.choose')" />
                </td>
                <!--              <td>-->
                <!--                <cwg-combox v-model:value="item.crypto" :options="formatOptions(item.cryptoOptions)"-->
                <!--                            :placeholder="t('placeholder.choose')" />-->
                <!--              </td>-->
              </tr>
            </tbody>
          </table>
        </view>
        <!--        <view v-else style="height: 50px"/>-->
      </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({
  paramsType: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: 'Ib.Report.Title5',
  },
  // 是否显示弹窗
  visible: {
    type: Boolean,
    default: false,
  },
  // 详情tableData
  detail: { type: Object, default: () => ({}) },
  // 是否需要选择客户
  isFormApplyIb: {
    type: Boolean,
    default: false,
  },
})
const { Code, Host80 } = Config
const { t, locale } = useI18n()
const formRef = ref(null)
const addAgentForm = ref({
  customerId: '',
})
const tableData = computed(() => locale.value != 'cn' ? ['FX',
  'ENERGY',
  'CFD',
  'INDEX',
  'METAL',
  // 'CRYPTO'
] : [
  t('vu.tradingCenter.item71'),
  t('vu.tradingCenter.item72'),
  t('vu.tradingCenter.item73'),
  t('vu.tradingCenter.item74'),
  t('vu.tradingCenter.item75'),
  //  t('vu.tradingCenter.item76')
])
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'])
const laoding = ref(false)
onMounted(() => {
  // initCommissionTemplateData(29634)
})

watch(() => props.visible, async (val) => {
  if (val) {
    laoding.value = true
    if (props.isFormApplyIb) {
      await loadCustomerList()
    }
    if (props.detail.id) {
      let params = {
        customId: props.detail.id,
      }
      addAgentForm.value = {
        customerId: props.detail.id,
      }
      if (props.paramsType == 'vietnam') {
        params = {
          agentId: props.detail.id,
        }
      }
      await initCommissionTemplateData(params)
    }
    laoding.value = false
  }
})

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 (params) => {
  try {
    const res = await ibApi.getVietnamPoints(params)

    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 isOpen = 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',
            isOpen,
            forex: 0,
            index: 0,
            metal: 0,
            energy: 0,
            energy2: 0,
            energy2Max: 0,
            forex1: 0,
            index1: 0,
            metal1: 0,
            energy1: 0,
            // crypto: 0,
            // crypto1: 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
            // else if (rebate.symbolCategory === 6) rebateRow.crypto = 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
            // else if (rebate.symbolCategory === 6) rebateRow.crypto1 = 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)
          // rebateRow.cryptoOptions = generateOptions(rebateRow.crypto1)

          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',
            isOpen,
            forex: 0,
            index: 0,
            metal: 0,
            energy: 0,
            energy2: 0,
            energy2Max: 0,
            forex1: 0,
            index1: 0,
            metal1: 0,
            energy1: 0,
            // crypto: 0,
            // crypto1: 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
            // else if (comm.symbolCategory === 6) commissionRow.crypto = 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
            // else if (comm.symbolCategory === 6) commissionRow.crypto1 = 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)
          // commissionRow.cryptoOptions = generateOptions(commissionRow.crypto1)

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

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

      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 loadCustomerList = async () => {
  try {
    let res = await ibApi.customerSubsList({
      ibStatus: 1,
    })
    if (res.code == Code.StatusOK) {
      customerList.value = res.data.map(item => ({
        text: `${item.name || ''}-${item.cId}`,
        value: item.id || '',
        cId: item.cId, // 保存 cId 供后续提交使用
      })) || []
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
      customerList.value = []
    }
  } catch (error) {
    console.error('加载客户列表失败:', error)
    customerList.value = []
  } finally {
  }
}

// 客户选择改变时触发
const changeCustomer = async (val) => {
  if (val) {
    laoding.value = true
    await initCommissionTemplateData({ customId: val })
    laoding.value = false
  } else {
    commissionTemplateTableData.value = []
  }
}

// 构建佣金模板points数据
const buildCommissionTemplatePoints = () => {
  const points: any[] = []
  const groupedData: Record<string, any> = {}

  // 由于现在的 commissionTemplateTableData 是 { accountGroup, isOpen, items } 嵌套结构，需要双层遍历提取
  commissionTemplateTableData.value.forEach((groupObj) => {
    groupObj.items.forEach((row: any) => {
      const groupId = row.groupCategoryId
      if (!groupedData[groupId]) {
        groupedData[groupId] = {
          groupCategoryId: groupId,
          commissions: [],
          rebates: [],
          valid: groupObj.isOpen ? 1 : 0,
        }
      }

      // 根据dataType添加到对应的数组
      const pointList = row.dataType === 'commissions'
        ? groupedData[groupId].commissions
        : groupedData[groupId].rebates

      // 添加各个symbolCategory的数据
      if (row.forex !== undefined && row.forex !== null) {
        pointList.push({ symbolCategory: 1, point: row.forex }) // FX
      }
      if (row.index !== undefined && row.index !== null) {
        pointList.push({ symbolCategory: 2, point: row.index }) // CFD
      }
      if (row.metal !== undefined && row.metal !== null) {
        pointList.push({ symbolCategory: 3, point: row.metal }) // INDEX
      }
      if (row.energy !== undefined && row.energy !== null) {
        pointList.push({ symbolCategory: 4, point: row.energy }) // METAL
      }
      if (row.energy2 !== undefined && row.energy2 !== null) {
        pointList.push({ symbolCategory: 5, point: row.energy2 }) // Energy
      }
      // if (row.crypto !== undefined && row.crypto !== null) {
      //   pointList.push({ symbolCategory: 6, point: row.crypto }) // Crypto
      // }

    })
  })

  // 转换为数组格式
  Object.keys(groupedData).forEach((groupId) => {
    const group = groupedData[groupId]
    if (group.commissions.length > 0 || group.rebates.length > 0) {
      points.push({
        groupCategoryId: group.groupCategoryId,
        commissions: group.commissions.length > 0 ? group.commissions : undefined,
        rebates: group.rebates.length > 0 ? group.rebates : undefined,
        valid: group.valid,
      })
    }
  })

  return points
}

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

const closeDia = () => {
  addAgentForm.value = {
    customerId: '',
  }
  commissionTemplateTableData.value = []
  emit('close')
}

const confirmDia = async () => {
  //  越南分配也用，看怎么调整提交接口
  let customId, cId

  // 越南佣金分配不用判断customId
  if (props.paramsType !== 'vietnam') {
    if (!props.isFormApplyIb) {
      if (!props.detail.id) {
        uni.showToast({ title: t('Ib.Custom.CustomerNotExist'), icon: 'none' })
        return
      }
      const applyIbRowData: any = props.detail || {}
      customId = applyIbRowData.id
      cId = applyIbRowData.cId
    } else {
      // 从其他地方打开，需要选择客户
      if (!addAgentForm.value.customerId) {
        uni.showToast({ title: t('placeholder.choose'), icon: 'none' })
        return
      }

      // 从客户列表中找到选中的客户对象
      const selectedCustomer: any = customerList.value.find(
        (item: any) => item.value === addAgentForm.value.customerId,
      )
      if (!selectedCustomer) {
        uni.showToast({ title: t('Ib.Custom.CustomerNotFound'), icon: 'none' })
        return
      }
      customId = selectedCustomer.value
      cId = selectedCustomer.cId
    }
  }

  try {
    // 构建points数据
    const points = buildCommissionTemplatePoints()
    // console.log(points)
    // 调用新增代理申请接口
    let params = {
      customId: customId,
      cId: cId,
      points: points,
    }
    if (props.paramsType === 'vietnam') {
      params = {
        agentId: props.detail.id,
        points: points,
      }
    }

    // 越南分配和新增代理
    const res = props.paramsType === 'vietnam' ? await ibApi.saveVietnamPoints(params) : await ibApi.agentApplyAddPoint(params)

    if (res.code == Code.StatusOK) {
      uni.showToast({
        title: res.msg || props.paramsType ? t('Ib.Custom.SaveSuccess') : t('Ib.Custom.SubmitSuccess'),
        icon: 'success',
      })
      closeDia()
      emit('confirm')

    } else {
      uni.showToast({
        title: res.msg || props.paramsType ? t('Ib.Custom.SaveFailed') : t('Ib.Custom.SubmitFailed'),
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('新增代理失败或保存越南分配数据失败:', error)
    uni.showToast({ title: props.paramsType ? t('Ib.Custom.SaveFailed') : t('Ib.Custom.SubmitFailed'), icon: 'none' })
  }
}
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

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

.commission-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: px2rpx(14);
  color: var(--bs-emphasis-color);
  border: 1px solid #ebeef5;

  .status-col {
    width: 60px;
  }

  .group-col {
    min-width: px2rpx(150);
  }

  .type-col {
    min-width: px2rpx(150);
  }

  .value-col {
    width: calc((100% - 295px) / 5);
    min-width: px2rpx(100);
    padding: px2rpx(4);
    box-sizing: border-box;
    // overflow: hidden;

    :deep(.cwg-combox) {
      width: 100%;
      display: block;

      :deep(.uni-select) {
        width: 100%;
        min-height: px2rpx(32);
        box-sizing: border-box;
      }

      :deep(.uni-select__input-box) {
        flex: 1;
        width: 0;
        min-width: 0;
      }

      :deep(.uni-select__input-text) {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  thead {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  }

  th {
    padding: px2rpx(12) px2rpx(5);
    text-align: center;
    font-weight: bold;
    color: var(--bs-emphasis-color);
    border: 1px solid #ebeef5;
    font-size: px2rpx(13);
    white-space: nowrap;
  }

  td {
    padding: px2rpx(8) px2rpx(7);
    border: 1px solid #ebeef5;
    vertical-align: middle;
  }

  .center-td {
    text-align: center;
  }

  .group-name-td {
    color: var(--bs-emphasis-color);
    font-weight: 500;
  }

  .type-td {
    color: var(--bs-emphasis-color);
  }
}

@media screen and (max-width: 768px) {
  .commission-table {
    table-layout: auto !important;
  }
}


.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: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  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>