<template>
  <!-- 添加或修改对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="平台" prop="platformCode">
        <el-select v-model="form.platformCode" placeholder="请选择平台">
          <el-option v-for="dict in platformCodeOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-input v-model="form.account" prop="account" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="平台key" prop="apiKey">
        <el-input v-model="form.apiKey" placeholder="平台key" show-password />
      </el-form-item>
      <el-form-item label="平台私钥" prop="apiSecret">
        <el-input v-model="form.apiSecret" placeholder="平台私钥" show-password />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in statusOptions" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addSmsPlatformKey, updateSmsPlatformKey } from '@/api/admin/sms-platform-key'

export default {
  name: 'SmsPlatformKeyDialog',
  props: {
    // 控制对话框显示状态
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框标题
    title: {
      type: String,
      default: ''
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => ({})
    },
    // 平台选项
    platformCodeOptions: {
      type: Array,
      default: () => []
    },
    // 状态选项
    statusOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        id: undefined,
        account: undefined,
        platformCode: undefined,
        apiKey: undefined,
        apiSecret: undefined,
        status: undefined,
        remark: undefined
      },
      // 表单校验规则
      rules: {
        account: [{ required: true, message: '账户不能为空', trigger: 'blur' }],
        platformCode: [{ required: true, message: '平台不能为空', trigger: 'blur' }],
        apiKey: [{ required: true, message: '平台key不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 监听表单数据变化，同步到内部form
    formData: {
      handler(newVal) {
        if (newVal) {
          this.form = { ...newVal }
        }
      },
      deep: true,
      immediate: true
    },
    // 监听visible变化，重置表单
    visible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          if (this.$refs.form) {
            this.$refs.form.clearValidate()
          }
        })
      }
    }
  },
  methods: {
    /**
     * 处理对话框关闭事件
     */
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    /**
     * 处理取消按钮点击事件
     */
    handleCancel() {
      this.handleClose()
    },

    /**
     * 处理确定按钮点击事件
     */
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitForm()
        }
      })
    },

    /**
     * 提交表单数据
     */
    async submitForm() {
      try {
        const formData = { ...this.form }
        let response

        if (formData.id !== undefined) {
          // 更新操作
          response = await updateSmsPlatformKey(formData)
        } else {
          // 新增操作
          response = await addSmsPlatformKey(formData)
        }

        if (response.code === 200) {
          this.$message.success(response.msg)
          this.handleClose()
          // 通知父组件刷新列表
          this.$emit('success')
        } else {
          this.$message.error(response.msg)
        }
      } catch (error) {
        console.error('提交失败:', error)
        // this.$message.error('操作失败，请重试')
      }
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.form = {
        id: undefined,
        account: undefined,
        platformCode: undefined,
        apiKey: undefined,
        apiSecret: undefined,
        status: undefined,
        remark: undefined
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>