<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
import { platformService } from '#/api/service/auth/platform'
import { mj_form_input, mj_form_radio_group } from '#/components/mj/mj-table'
import hud from '#/utils/hud'
import obj from '#/utils/obj'

defineOptions({ name: 'SmsCfg' })
const props = withDefaults(
  defineProps<{
    modelValue?: boolean
    platform: any
  }>(),
  {
    modelValue: false,
  },
)

const emits = defineEmits(['update:modelValue', 'success'])
const type_tencent = '1'
const type_ali = '2'
const typeOptions = [
  {
    label: '腾讯云',
    value: type_tencent,
  },
  {
    label: '阿里云',
    value: type_ali,
  },
]

const show = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)

    const defaultData = {
      type: type_tencent,
      'ali.domain': 'dysmsapi.aliyuncs.com',
      'ali.regionId': 'cn-hangzhou',
      'ali.version': '2017-05-25',
      'ali.sendAction': 'SendSms',
    }
    if (newVal) {
      formRef.value?.setData(
        obj.toNestedToFlattenJSON(props.platform.smsCfg) || defaultData,
      )
    } else {
      formRef.value?.setData(defaultData)
    }
  },
})

const title = computed(() => {
  return `【${props.platform?.name}】短信配置`
})

const tencentItems = [
  {
    required: true,
    span: 12,
    field: 'tencent.secretId',
    title: 'SecretID',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.secretKey',
    title: 'SecretKey',
    itemRender: {
      name: mj_form_input,
      props: {
        type: 'password',
      },
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.regionId',
    title: '区域ID',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.sdkAppId',
    title: 'SdkAppId',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.sign',
    title: '签名',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.signMethod',
    title: '签名方法',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'tencent.templateId',
    title: '模板ID',
    itemRender: {
      name: mj_form_input,
    },
  },
]
const tencentFields = tencentItems.map((item) => item.field)

const aliItems = [
  {
    required: true,
    span: 12,
    field: 'ali.accessKeyId',
    title: 'AccessKey Id',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.accessKeySecret',
    title: 'AccessKey Secret',
    itemRender: {
      name: mj_form_input,
      props: {
        type: 'password',
      },
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.sign',
    title: '签名',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.templateId',
    title: '模板ID',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.regionId',
    title: '区域ID',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.domain',
    title: 'Domain',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.version',
    title: 'Version',
    itemRender: {
      name: mj_form_input,
    },
  },
  {
    required: true,
    span: 12,
    field: 'ali.sendAction',
    title: 'SendAction',
    itemRender: {
      name: mj_form_input,
    },
  },
]
const aliFields = aliItems.map((item) => item.field)

const formRef = ref()
const form = {
  titleWidth: 120,
  items: [
    {
      required: true,
      span: 24,
      field: 'type',
      title: '类型',
      itemRender: {
        name: mj_form_radio_group,
        options: typeOptions,
      },
    },
    ...tencentItems,
    ...aliItems,
  ],
} as any

// 编辑表单事件
const submit = () => {
  hud.load({
    task: async () => {
      await platformService.saveOrUpdate({
        id: props.platform.id,
        smsCfg: obj.toFlattenToNestedJSONString(formRef.value?.getData()),
      })
      emits('success')
      emits('update:modelValue', false)
    },
    option: '保存',
    hideSuccess: false,
  })
}

// 调整item
const adjustItems = () => {
  const data = formRef.value?.getData()
  if (!data) return
  if (data.type === type_tencent) {
    formRef.value?.hideItems(aliFields)
    formRef.value?.showItems(tencentFields)
  } else if (data.type === type_ali) {
    formRef.value?.hideItems(tencentFields)
    formRef.value?.showItems(aliFields)
  }
}

watch(
  () => formRef.value?.getData().type,
  () => {
    adjustItems()
  },
  {
    deep: true,
  },
)
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title,
      width: 1200,
    }"
  >
    <mj-form ref="formRef" :options="form" @submit="submit" />
  </mj-modal>
</template>

<style lang="scss" scoped></style>
