<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="150px" v-loading="loading">
    <el-form-item label="短信服务商" prop="type">
      <el-radio-group v-model="form.type">
        <el-radio label="rf">重庆润芳</el-radio>
        <el-radio label="dh">重庆大汉</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳通知账号" prop="rfAccount1">
      <el-input   v-model="form.rfAccount1"  label="请输入润芳通知账号"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳通知code" prop="rfCode1">
      <el-input   v-model="form.rfCode1"  label="请输入润芳通知code"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳通知密码" prop="rfPassword1">
      <el-input   v-model="form.rfPassword1"  label="请输入润芳通知密码"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type ==='rf'" label="润芳通知地址" prop="rfUrl1">
      <el-input   v-model="form.rfUrl1"  label="请输入润芳通知地址"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳营销账号" prop="rfAccount2">
      <el-input   v-model="form.rfAccount2"  label="请输入润芳营销账号"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳营销code" prop="rfCode2">
      <el-input   v-model="form.rfCode2"  label="请输入润芳营销code"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳通知密码" prop="rfPassword2">
      <el-input   v-model="form.rfPassword2"  label="请输入润芳通知密码"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳通知地址" prop="rfUrl2">
      <el-input   v-model="form.rfUrl2"  label="请输入润芳营销地址"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'rf'" label="润芳签名" prop="rfSign">
      <el-input   v-model="form.rfSign"  label="请输入润芳签名"></el-input>
    </el-form-item>

    <el-form-item  v-if="form.type === 'dh'" label="大汉通知账号" prop="dhAccount1">
      <el-input   v-model="form.dhAccount1"  label="请输入大汉通知账号"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'dh'" label="大汉通知密码" prop="dhPassword1">
      <el-input   v-model="form.dhPassword1"  label="请输入大汉通知密码"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'dh'" label="大汉营销账号" prop="dhAccount2">
      <el-input   v-model="form.dhAccount2"  label="请输入大汉营销账号"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'dh'" label="大汉通知密码" prop="dhPassword2">
      <el-input   v-model="form.dhPassword2"  label="请输入大汉通知密码"></el-input>
    </el-form-item>
    <el-form-item  v-if="form.type === 'dh'" label="大汉签名" prop="dhSign">
      <el-input   v-model="form.dhSign"  label="请输入大汉签名"></el-input>
    </el-form-item>
    <div class="footer">
      <el-button type="primary" :disabled="submitting" @click="submitForm">提  交</el-button>
    </div>
  </el-form>
</template>

<script>
import { addConfig, getConfigByKey, updateConfigByKey } from '@/api/system/config'

export default {
  name: 'StreamerSms',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      configId: null,
      configKey: null,
      configName: null,
      form: {
        type: null,
        rfAccount1: null,
        rfCode1: null,
        rfPassword1: null,
        rfUrl1: null,
        rfAccount2: null,
        rfCode2: null,
        rfPassword2: null,
        rfUrl2: null,
        rfSign: null,
        dhAccount1: null,
        dhPassword1: null,
        dhAccount2: null,
        dhPassword2: null,
        dhSign: null
      },
      rules: {}
    }
  },
  watch: {
    isActive: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getConfigByKey("his.sms")
        }
      }
    }
  },
  methods: {
    getConfigByKey(key){
      this.loading = true
      getConfigByKey(key).then(response => {
        const data = response?.data || {}

        this.configId = data.configId ?? null
        this.configKey = data.configKey ?? key
        this.configName = data.configName ?? '主播短信配置'
        this.form = this.safeParseJson(data.configValue, {})
        this.loading = false
      })
    },
    safeParseJson(value, defaultValue = {}) {
      if (!value || typeof value !== 'string') {
        return defaultValue
      }
      try {
        return JSON.parse(value)
      } catch (e) {
        console.warn('JSON parse failed:', value)
        return defaultValue
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.submitting) {
            return
          }
          this.submitting = true

          const param = {
            configId: this.configId,
            configKey: this.configKey,
            configName: this.configName,
            configValue: JSON.stringify(this.form)
          }

          if (this.configId) {
            updateConfigByKey(param).then(response => {
              const {code} = response
              if (code === 200) {
                this.msgSuccess("修改成功");
              }
              this.submitting = false
            });
          } else {
            addConfig(param).then(response => {
              const {code} = response
              if (code === 200) {
                this.msgSuccess("添加成功");
              }
              this.submitting = false
            })
          }
        }
      });
    },
  }
}
</script>

<style scoped>
.footer{
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
</style>
