<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px" v-loading="loading">
    <el-form-item label="主播协议" prop="userAgreement">
      <editor ref="editor1" @on-text-change="updateUserAgreement" />
    </el-form-item>
    <el-form-item label="隐私协议" prop="privacyPolicy">
      <editor ref="editor2" @on-text-change="updatePrivacyPolicy" />
    </el-form-item>
    <div class="footer">
      <el-button type="primary" :disabled="submitting" @click="submitForm">提  交</el-button>
    </div>
  </el-form>
</template>

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

export default {
  name: 'StreamerAgreement',
  components: {
    Editor
  },
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      configId: null,
      configKey: null,
      configName: null,
      form: {
        userAgreement: '',
        privacyPolicy: ''
      },
      rules: {}
    }
  },
  watch: {
    isActive: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getConfigByKey("liveStreamer.agreement")
        }
      }
    }
  },
  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.$refs.editor1.setText(this.form.userAgreement);
        this.$refs.editor2.setText(this.form.privacyPolicy);
        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
            })
          }
        }
      });
    },
    updateUserAgreement(text) {
      this.form.userAgreement = text;
    },
    updatePrivacyPolicy(text) {
      this.form.privacyPolicy = text;
    }
  }
}
</script>

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