<template>
  <el-form ref="form" label-width="120px">
    <el-form-item v-for="item of list" :label="item.configName" :label-width="`${item.configName.length + 1}em`" :key="item.configId">
      <el-input v-model="item.configValue" placeholder="请输入"/>
    </el-form-item>
  </el-form>
</template>

<script>
import { batchUpdateConfigValue, getConfigKeys } from '@/api/system/config'

export default {
  name: 'ConfigForm',
  props: {
    keys: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      list: [],
      loading: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true;
      getConfigKeys(this.keys).then(res => {
        let data = res.data;
        let list = [];
        for (let i = 0; i < this.keys.length; i ++) {
          let config = data.find(item => item.configKey === this.keys[i]);
          if (config != null) {
            list.push(config);
          }
        }
        this.list = list;
      }).finally(() => {
        this.loading = false;
      })
    },
    onSubmit() {
      batchUpdateConfigValue(this.list).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.$emit('success');
        }
      })
    },
    onCancel() {
      this.$emit('cancel');
    }
  }
}
</script>
