boursecu_admin/src/pages/menuPages/sms/index.vue

<template>
  <div>
    <BasicMainCard>
      <div class="flex w-full h-full">
        <tbl ref="table" class="w-full h-full" @add="add" />
      </div>
    </BasicMainCard>

    <BasicActionSheet
      v-model:visible="addSMSVisible"
      title="ارسال پیامک"
      modal-width="80vw"
      drawer-height="90vh"
      :loading="loading"
      :showButton="true"
      :showCancel="true"
      :showOk="true"
      ok-text="شروع ارسال"
      cancel-text="انصراف"
      @ok="ok"
      @close="closeSmsSheet"
      @cancel="closeSmsSheet"
    >
      <div v-if="isMobile" class="mb-3 text-base font-700">ارسال پیامک</div>
      <a-alert
        class="mb-3"
        type="warning"
        show-icon
        message="ارسال ۱۰تایی انجام می‌شود. تا پایان کار پنل را نبندید و صفحه را رفرش نکنید."
      />
      <SmsEditorFormBody ref="smsEditorRef" :form="form" :group-items="groupItems" :loading="loading" />
    </BasicActionSheet>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import tbl from './components/table.vue'
import type { FormInstance } from 'ant-design-vue'
import BasicActionSheet from '@/components/BasicActionSheet.vue'
import SmsEditorFormBody from './components/SmsEditorFormBody.vue'
import { message } from 'ant-design-vue/es'
import type { FunctionItem } from '@/model/Item'
import { getGroupsList } from '@/api/sms'
import type { Sms } from '@/model/sms'
import { isMobile } from '@core/utils/is'
import { groupSmsEnabledSetting, initWalletSettingsFromApi } from '@/utils/config'
import { useGroupSmsSendStore } from '@/store/groupSmsSendStore'

const loading = ref<boolean>(false)
const groupItems = ref<FunctionItem[]>()
const table = ref<null | { fetch: () => void }>(null)
const smsEditorRef = ref<{
  validateFields?: () => ReturnType<NonNullable<FormInstance['validateFields']>>
  resetAll?: () => void
}>()
const sendStore = useGroupSmsSendStore()

const form = ref<Sms>({
  message: '',
  numbers: []
})

const addSMSVisible = ref<boolean>(false)

onMounted(() => {
  void initWalletSettingsFromApi()
  getGroups()
})

watch(
  () => sendStore.finished,
  (finished) => {
    if (finished) refreshTable()
  }
)

async function getGroups() {
  try {
    loading.value = true
    groupItems.value = await getGroupsList()
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

function refreshTable() {
  table.value?.fetch()
}

function closeSmsSheet() {
  if (loading.value) return
  addSMSVisible.value = false
}

async function add() {
  if (!groupSmsEnabledSetting.value) {
    message.warning('ارسال پیامک گروهی غیرفعال است')
    return
  }
  if (sendStore.active) {
    message.info('یک ارسال گروهی در حال انجام است')
    sendStore.expand()
    return
  }
  addSMSVisible.value = true
  resetData()
}

function resetData() {
  form.value = {
    message: '',
    numbers: []
  }
  smsEditorRef.value?.resetAll?.()
}

function uniqueNumbers(list: string[]): string[] {
  return Array.from(new Set(list.map((n) => String(n).trim()).filter(Boolean)))
}

function ok() {
  if (sendStore.active) {
    message.warning('ارسال قبلی هنوز تمام نشده است')
    return
  }

  smsEditorRef.value?.validateFields?.().then(async () => {
    const numbers = uniqueNumbers([...(form.value.numbers ?? [])])
    if (!numbers.length) {
      message.warning('حداقل یک مشتری از لیست انتخاب کنید')
      return
    }
    if (!form.value.message?.trim()) {
      message.warning('متن پیامک خالی است')
      return
    }

    const text = form.value.message
    addSMSVisible.value = false
    resetData()
    await sendStore.start(numbers, text)
  })
}
</script>