<template>
  <div class='m-container'>
    <!-- <h2>参数设置</h2> -->
    <div class="m-core">
      <!-- 列表 -->
      <el-row>
        <el-col :span="12"
                v-for="(config, index) in configList"
                :key="config.id">
          {{ config.description[0] }}
          <el-input v-model.trim="input[index]">
            <template slot="append"
                      v-if="config.description[1]">{{ config.description[1] }}</template>
          </el-input>
          <el-button @click="onSave(config, index)"
                     v-permission="'sysConfig/update'"
                     type="primary">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { sysConfigList, sysConfigUpdate } from '@/api/generalSettings'
export default {
  components: { pagination },
  name: 'overallManager',
  data () {
    return {
      configList: [],
      input: []
    }
  },
  mounted () {
    this.__init()
  },
  methods: {
    __init () {
      sysConfigList({ group: 'default' }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          res.data.forEach((item, index) => {
            this.input[index] = item.paranValue
            this.configList.push({
              id: item.id,
              paramName: item.paramName,
              paranValue: item.paranValue,
              description: item.description.split('{}')
            })
          })
        }
      })
    },
    onSave (row, index) {
      let params = {
        id: row.id,
        paranValue: this.input[index],
        paramName: row.paramName,
        description: row.description.join('{}')
      }
      sysConfigUpdate(params).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-input-group__append {
  background: #dcdfe6;
  border-color: #dcdfe6;
  &:hover,
  &:active,
  &:focus {
    background: #dcdfe6;
    border-color: #dcdfe6;
    color: #fff;
  }
}
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
.el-row {
  margin-top: 40px;
}
/deep/.el-col-12 {
  width: 60%;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.el-input-group,
.el-input {
  width: 200px;
  margin: 0 20px;
}
</style>