<template>
  <div class="p-4">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">{{ t('textin.title') }}</span>
          <span class="card-subtitle">{{ t('textin.subtitle') }}</span>
        </div>
      </template>

      <el-form ref="textinFormRef" :model="form" :rules="rules" label-width="150px" class="textin-form" v-loading="loading">
        <el-form-item :label="t('textin.form.appId')" prop="appId">
          <el-input v-model="form.appId" :placeholder="t('textin.form.appIdPlaceholder')" clearable maxlength="100" show-word-limit />
          <div class="form-tip">{{ t('textin.form.appIdTip') }}</div>
        </el-form-item>

        <el-form-item :label="t('textin.form.secretCode')" prop="secretCode">
          <el-input
            v-model="form.secretCode"
            :placeholder="t('textin.form.secretCodePlaceholder')"
            clearable
            maxlength="100"
            show-word-limit
            type="password"
            show-password
          />
          <div class="form-tip">{{ t('textin.form.secretCodeTip') }}</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="saving" v-hasPermi="['setting:textin:edit']">
            <el-icon><Check /></el-icon>
            {{ t('textin.button.save') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="Textin" lang="ts">
import { getTextinConfig, updateTextinConfig } from '@/api/setting/textin';
import { TextinForm } from '@/api/setting/textin/types';
import { Check } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const textinFormRef = ref<ElFormInstance>();
const loading = ref(false);
const saving = ref(false);

const initFormData: TextinForm = {
  id: undefined,
  appId: undefined,
  secretCode: undefined
};

const form = ref<TextinForm>({ ...initFormData });

const rules = reactive({
  appId: [{ required: true, message: t('textin.rule.appIdRequired'), trigger: 'blur' }],
  secretCode: [{ required: true, message: t('textin.rule.secretCodeRequired'), trigger: 'blur' }]
});

/** 获取配置 */
const getConfig = async () => {
  loading.value = true;
  try {
    const res = await getTextinConfig();
    form.value = { ...res.data };
  } catch (error) {
    console.error('获取配置失败:', error);
    proxy?.$modal.msgError(t('textin.message.getConfigFailed'));
  } finally {
    loading.value = false;
  }
};

/** 保存配置 */
const handleSave = () => {
  textinFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      saving.value = true;
      try {
        await updateTextinConfig(form.value);
        proxy?.$modal.msgSuccess(t('textin.message.saveSuccess'));
      } catch (error) {
        console.error('保存失败:', error);
        proxy?.$modal.msgError(t('textin.message.saveFailed'));
      } finally {
        saving.value = false;
      }
    }
  });
};

onMounted(() => {
  getConfig();
});
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .card-subtitle {
    font-size: 13px;
    color: #909399;
  }
}

.textin-form {
  max-width: 800px;
  margin-top: 20px;

  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.5;
  }

  :deep(.el-form-item__content) {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
