<template>
  <div class="main-wrapper">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12 col-md-10">
          <div class="card shadow-sm">
            <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
              <div>
                <h5 class="mb-0">系统设置</h5>
                <p class="mb-0 small">在此页面中配置系统的基本参数</p>
              </div>
              <button class="btn btn-outline-light btn-sm" @click="submit">
                <i class="fa fa-save"></i> 保存设置
              </button>
            </div>
            <div class="card-body">
              <form>
                <div class="row">
                  <!-- 系统名称 -->
                  <div class="col-md-6 mb-4">
                    <label for="systemName" class="form-label font-weight-bold">系统名称</label>
                    <input
                      type="text"
                      class="form-control"
                      id="systemName"
                      v-model="systemName"
                      placeholder="请输入系统名称"
                    />
                  </div>

                  <!-- 管理员邮箱 -->
                  <div class="col-md-6 mb-4">
                    <label for="adminEmail" class="form-label font-weight-bold">管理员邮箱</label>
                    <input
                      type="email"
                      class="form-control"
                      id="adminEmail"
                      v-model="systemEmail"
                      placeholder="admin@example.com"
                    />
                    <small class="form-text text-muted">我们将在网站显示此邮箱。</small>
                  </div>

                  <!-- 管理员手机号 -->
                  <div class="col-md-6 mb-4">
                    <label for="adminPhone" class="form-label font-weight-bold">管理员手机号</label>
                    <input
                      type="text"
                      class="form-control"
                      id="adminPhone"
                      v-model="systemPhone"
                      placeholder="13800000000"
                    />
                    <small class="form-text text-muted">我们将在网站显示此手机号。</small>
                  </div>

                  <!-- 系统描述 -->
                  <div class="col-md-6 mb-4">
                    <label for="adminDescription" class="form-label font-weight-bold">系统描述</label>
                    <textarea
                      class="form-control"
                      id="adminDescription"
                      rows="3"
                      v-model="systemDescription"
                    ></textarea>
                  </div>

                  <!-- 网站LOGO -->
                  <div class="col-md-6 mb-4">
                    <label for="logoFile" class="form-label font-weight-bold">网站 LOGO</label>
                    <div class="d-flex align-items-center">
                      <input
                        class="form-control-file"
                        type="file"
                        id="logoFile"
                        accept="image/*"
                        @change="onLogoChange"
                      />
                      <div v-if="logoPreview" class="ml-3">
                        <img :src="logoPreview" alt="logo" class="img-thumbnail" style="height:40px" />
                      </div>
                    </div>
                  </div>

                  <!-- 网站 Favorite -->
                  <div class="col-md-6 mb-4">
                    <label for="faviconFile" class="form-label font-weight-bold">网站 Favorite</label>
                    <div class="d-flex align-items-center">
                      <input
                        class="form-control-file"
                        type="file"
                        id="faviconFile"
                        accept="image/*"
                        @change="onFaviconChange"
                      />
                      <div v-if="faviconPreview" class="ml-3">
                        <img :src="faviconPreview" alt="favicon" class="img-thumbnail" style="height:24px" />
                      </div>
                    </div>
                  </div>

                  <!-- 启用用户注册 -->
                  <div class="col-md-6 mb-3 form-check">
                    <input
                      type="checkbox"
                      class="form-check-input"
                      id="enableRegistration"
                      v-model="enableSystemRegister"
                    />
                    <label class="form-check-label" for="enableRegistration">
                      启用用户注册功能
                    </label>
                  </div>

                  <!-- 启用注册邮箱验证 -->
                  <div class="col-md-6 mb-3 form-check">
                    <input
                      type="checkbox"
                      class="form-check-input"
                      id="enableRegistrationValidate"
                      v-model="enableSystemRegisterEmailValidate"
                    />
                    <label class="form-check-label" for="enableRegistrationValidate">
                      启用注册邮箱验证
                    </label>
                  </div>
                </div>
              </form>
            </div>
            <div class="card-footer text-right">
              <button class="btn btn-primary" @click="submit">
                <i class="fa fa-check-circle"></i> 保存设置
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    name: "SystemConfig",
    data() {
        return {
            systemConfig: [],
            logoFile: null,
            favicon: null
        }
    },
    methods: {
        async submit() {
            for (const item of this.systemConfig) {
                const configName = item.configName
                const configBody = item.configBody
                try {
                    const res = await this.$api.updateSystemConfig(configName, configBody)
                    if (res.code != 1000) this.$alert(res.message, 'danger')
                } catch (err) {
                    this.$alert('更新配置失败', 'danger')
                    console.error(`更新 ${configName} 失败`, err)
                }
            }

            // 全部成功后提示
            this.$alert('系统配置已保存', 'success')
        },
        async onLogoChange(event) {
            const file = event.target.files[0]; // 只选一个文件
            if (!file) return;
            let formdata = new FormData()
            formdata.append('file',file)
            try{
                const res = await this.$api.uploadLogo(formdata)
                if(res.code != 1000){
                    this.$alert(res.message,'danger')
                    return
                }
                this.$alert('上传LOGO成功','success')
            }catch(e){
                this.$alert('上传LOGO失败','danger')
                console.error(e)
            }
        },
        async onFaviconChange(event) {
            const file = event.target.files[0]; // 只选一个文件
            if (!file) return;
            let formdata = new FormData()
            formdata.append('file',file)
            try{
                const res = await this.$api.uploadFavicon(formdata)
                if(res.code != 1000){
                    this.$alert(res.message,'danger')
                    return
                }
                this.$alert('上传Favicon成功','success')
            }catch(e){
                this.$alert('上传Favicon失败','danger')
                console.error(e)
            }
        }
    },
    computed: {
        systemName: {
            get() {
                const systemName = this.systemConfig.find(x => x.configName == 'SystemName')
                return systemName ? systemName.configBody : ''
            },
            set(newValue) {
                const systemName = this.systemConfig.find(x => x.configName == 'SystemName')
                if (systemName) {
                    systemName.configBody = newValue
                }
            }
        },
        systemEmail: {
            get() {
                const item = this.systemConfig.find(x => x.configName == 'Email')
                return item ? item.configBody : ''
            },
            set(newValue) {
                const item = this.systemConfig.find(x => x.configName == 'Email')
                if (item) {
                    item.configBody = newValue
                }
            }
        },
        systemPhone: {
            get() {
                const item = this.systemConfig.find(x => x.configName == 'Phone')
                return item ? item.configBody : ''
            },
            set(newValue) {
                const item = this.systemConfig.find(x => x.configName == 'Phone')
                if (item) {
                    item.configBody = newValue
                }
            }
        },
        systemDescription: {
            get() {
                const item = this.systemConfig.find(x => x.configName == 'SystemDescription')
                return item ? item.configBody : ''
            },
            set(newValue) {
                const item = this.systemConfig.find(x => x.configName == 'SystemDescription')
                if (item) {
                    item.configBody = newValue
                }
            }
        },
        enableSystemRegister: {
            get() {
                const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
                return item ? JSON.parse(item.configBody).RegisterOn : false
            },
            set(newValue) {
                const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
                if (item) {
                    let jsonBody = JSON.parse(item.configBody)
                    jsonBody.RegisterOn = newValue
                    item.configBody = JSON.stringify(jsonBody)
                }
            }
        },
        enableSystemRegisterEmailValidate: {
            get() {
                const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
                return item ? JSON.parse(item.configBody).Emailvalidate : false
            },
            set(newValue) {
                const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
                if (item) {
                    let jsonBody = JSON.parse(item.configBody)
                    jsonBody.Emailvalidate = newValue
                    item.configBody = JSON.stringify(jsonBody)
                }
            }
        }
    },
    created() {
        this.systemConfig = this.$store.state.config.systemconfig

    }

}
</script>
<style scoped>
.card-header p {
  color: rgba(255, 255, 255, 0.85);
}
</style>