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

<template>
  <cwg-popup :title="t(title)" :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 @change="changeCustomer" />
        </uni-forms-item>
        <uni-loading v-if="laoding"/>
        <view v-else 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({
    paramsType: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: 'Ib.Report.Title5',
    },
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    // 详情tableData
    detail: { type: Array, default: () => ({}) },
    // 是否需要选择客户
    isFormApplyIb: {
      type: Boolean,
      default: false,
    },
  })
  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'])
  const laoding = ref(false)
  onMounted(() => {
    // initCommissionTemplateData(29634)
  })

  watch(() => props.visible, (val) => {
    if (val) {
      loadCustomerList()
      if (props.detail.id) {
        let params = {
          customId: props.detail.id,
        }
        if (props.paramsType == 'vietnam') {
          params = {
            agentId: props.detail.id,
          }
        }
        initCommissionTemplateData(params)
      }
    }
  })

  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,
            }

            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',
              isOpen,
              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: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
        }
      })
    })

    // 转换为数组格式
    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 = () => {
    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-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>