<template>
  <div style="background: #fff">
    <div class="account-settings-info-view">
      <a-form ref="configFormModel" layout="vertical">
        <a-row>
          <a-col v-for="(item, config) in vdata.configData" :key="config" :span="8" :offset="1">
            <a-form-item :label="item['configName']">
              <a-input v-model:value="item['configVal']" :type="item['type']==='text'?'text':'textarea'" autocomplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item class="bottom-btn">
          <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirm">
            <check-circle-outlined />确认更新
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { API_URL_SYS_CONFIG, req, $getConfigs } from '@/api/manage'
import { reactive, onMounted, getCurrentInstance } from 'vue'

  const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

  const vdata = reactive ({
    isEdit:$access('ENT_PUSH_CONFIG_EDIT'),
    btnLoading: false,
    groupKey: 'applicationConfig',
    configData: {} as any, // 配置保存对象
  }) as any

  onMounted(()=>{
    $getConfigs(vdata.groupKey).then(res => {
      vdata.configData = res
    })
  })

  // 确认更新
  function confirm (e) {
    $infoBox.confirmPrimary('确认修改配置吗？', '', () => {
      vdata.btnLoading = true // 打开按钮上的 loading

      const reqData:any = {}
      for (var i in vdata.configData) {
        reqData[vdata.configData[i].configKey] = vdata.configData[i].configVal
      }

      req.updateById(API_URL_SYS_CONFIG, vdata.groupKey, reqData).then(res => {
       $infoBox.message.success('修改成功')
        vdata.btnLoading = false
      }).catch(res => {
        vdata.btnLoading = false
      })
    })

  }

</script>
<style lang="less" scoped>
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
</style>
