<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div slot="header">
        <span>前端配置</span>
      </div>
      <el-form ref="form" :model="form" label-width="200px">
        <!-- 存储桶配置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header"><span>存储桶配置</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="OBS Access Key ID" prop="obsAccessKeyId">
                <el-input v-model="form.obsAccessKeyId" type="password" show-password placeholder="请输入Access Key ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="OBS Secret Access Key" prop="obsSecretAccessKey">
                <el-input v-model="form.obsSecretAccessKey" type="password" show-password placeholder="请输入Secret Access Key" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="OBS服务器地址" prop="obsServer">
                <el-input v-model="form.obsServer" placeholder="请输入OBS服务器地址">
                  <template slot="prepend">https://</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="OBS存储桶" prop="obsBucket">
                <el-input v-model="form.obsBucket" placeholder="请输入OBS存储桶名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="COS存储桶" prop="cosBucket">
                <el-input v-model="form.cosBucket" placeholder="请输入COS存储桶名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="COS存储区域" prop="cosRegion">
                <el-input v-model="form.cosRegion" placeholder="请输入COS存储区域" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 视频线路配置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header"><span>视频线路配置</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="线路一地址" prop="videoLinePrimary">
                <el-input v-model="form.videoLinePrimary" placeholder="请输入线路一地址">
                  <template slot="prepend">https://</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线路二地址" prop="videoLineSecondary">
                <el-input v-model="form.videoLineSecondary" placeholder="请输入线路二地址">
                  <template slot="prepend">https://</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="直播解码路径" prop="livePath">
                <el-input v-model="form.livePath" placeholder="请输入直播解码路径">
                  <template slot="prepend">/</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 火山云配置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header"><span>火山云配置</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="火山云视频地址" prop="volcanoVideoDomain">
                <el-input v-model="form.volcanoVideoDomain" placeholder="请输入火山云视频地址">
                  <template slot="prepend">https://</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点播空间名称" prop="volcanoVodSpace">
                <el-input v-model="form.volcanoVodSpace" placeholder="请输入点播空间名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 直播配置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header"><span>直播配置</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="WebSocket地址" prop="liveWebSocketUrl">
                <el-input v-model="form.liveWebSocketUrl" placeholder="请输入WebSocket地址">
                  <template slot="prepend">wss://</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 业务配置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header"><span>业务配置</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="默认课程类型" prop="courseDefaultType">
                <el-radio-group v-model="form.courseDefaultType">
                  <el-radio label="1">会员</el-radio>
                  <el-radio label="2">企微</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

      </el-form>
      <div style="text-align: center; margin-top: 20px; padding-bottom: 20px;">
        <el-button type="primary" size="medium" @click="submitForm" :loading="submitLoading">保存配置</el-button>
      </div>
    </el-card>
  </div>
</template>

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

export default {
  name: 'AdminFrontConfig',
  data() {
    return {
      loading: false,
      submitLoading: false,
      configId: null,
      configKey: 'his.adminUi.config',
      form: {
        obsAccessKeyId: '',
        obsSecretAccessKey: '',
        obsServer: '',
        obsBucket: '',
        cosBucket: '',
        cosRegion: '',
        videoLinePrimary: '',
        videoLineSecondary: '',
        livePath: '',
        volcanoVideoDomain: '',
        volcanoVodSpace: '',
        liveWebSocketUrl: '',
        courseDefaultType: '1'
      }
    }
  },
  created() {
    this.loadConfig()
  },
  methods: {
    loadConfig() {
      this.loading = true
      getConfigByKey(this.configKey).then(response => {
        if (response.data) {
          this.configId = response.data.configId
          try {
            const parsed = JSON.parse(response.data.configValue)
            this.form = { ...this.form, ...parsed }
          } catch (e) {
            // 使用默认值
          }
        } else {
          this.configId = null
        }
      }).finally(() => {
        this.loading = false
      })
    },
    submitForm() {
      this.submitLoading = true
      const param = {
        configId: this.configId,
        configName: '前端配置',
        configKey: this.configKey,
        configValue: JSON.stringify(this.form)
      }
      updateConfigByKey(param).then(response => {
        if (response.code === 200) {
          this.msgSuccess('修改成功')
        }
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>

<style scoped>
.section-card {
  margin-bottom: 20px;
}

</style>
