<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-fieldset">
    <el-toolbar>
      <el-button @click="saveClick" priv="Platform.Config.Save">
        <i class="fa fa-save" aria-hidden="true"></i>保存
      </el-button>
    </el-toolbar>
    <div v-loading="loading">
      <el-row>
        <el-col :span="5">
          <el-card ref="card" class="fixed-card" v-show="!loading">
            <ul class="config-type-list">
              <template v-for="(config, index) in configs">
                <li class="config-type-item" :key="config.name" @click="itemClickHandler(index,config)">
                  {{config.name}}
                </li>
              </template>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="19" style="margin-left: 20%;padding-left: 20px;">
          <div id="forGetHeight" style="margin:0px;padding:0px;height:0px;position:fixed;"></div>
          <el-form ref="configValidate" label-width="300px" label-position="left" class="platform-config-form">
          <div v-for="config in configs" :key="config.id" class="panel-fieldset">
            <h4 class="panel-legend" :id="config.id">{{config.name}}</h4>
            <div v-for="item in config.configs" :key="item.id">
              <el-form-item :label="item.name+'：'">
                <component :is="controlType(item)" v-model="item.value" :config="item"></component>
              </el-form-item>
            </div>
          </div>
          </el-form>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import ControlPassword from './components/control/ControlPassword.vue'
import ControlRadio from './components/control/ControlRadio.vue'
import ControlSelect from './components/control/ControlSelect.vue'
import ControlText from './components/control/ControlText.vue'
import ControlTextArea from './components/control/ControlTextArea.vue'
import ControlNumber from './components/control/ControlNumber.vue'
import util from '@src/common/util'

export default {
  data() {
    return {
      loading: true,
      configs: {},
      ruleValidate: {}
    }
  },
  methods: {
    async saveClick() {
      try {
        var res = await axios.put('/ui/configs/saved', { data: this.configs })
        util.showResponseMessage(res.data)
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    controlType(item) {
      if (item.controlType === 'Text' && item.dataType === 'Long') {
        return 'control-number'
      }
      switch (item.controlType) {
        case 'Password':
          return 'control-password'
        case 'Radio':
          return 'control-radio'
        case 'Select':
          return 'control-select'
        case 'Text':
          return 'control-text'
        case 'TextArea':
          return 'control-text-area'
        default:
          return ''
      }
    },
    itemClickHandler(index, config) {
      document.getElementById(config.id).scrollIntoView(true)
    },
    onScroll() {
      let scrolled = this.$root.$el.scrollTop
      let top = document.getElementById('forGetHeight').offsetTop
      if (scrolled >= top) {
        this.$refs.card.$el.style.top = (scrolled - top) + 'px'
      } else {
        this.$refs.card.$el.style.top = '0px'
      }
    },
    async loadConfigs() {
      this.loading = true
      let res
      try {
        res = await axios.get('/ui/configs')
      } catch (e) {
        this.loading = false
        return
      }
      this.loading = false
      this.configs = res.data.data
    }
  },
  created() {
    this.loadConfigs()
  },
  mounted: function () {
    this.$nextTick(function () {
      this.$root.$el.addEventListener('scroll', this.onScroll)
    })
  },
  destroyed() {
    this.$root.$el.removeEventListener('scroll', this.onScroll)
  },
  components: {
    'control-password': ControlPassword,
    'control-radio': ControlRadio,
    'control-select': ControlSelect,
    'control-text': ControlText,
    'control-text-area': ControlTextArea,
    'control-number': ControlNumber
  }
}
</script>

<style scoped>
.fixed-card {
  position: absolute;
  width: 20%;
  margin-top: 0;
}
.config-type-list {
  list-style: none;
  display: block;
}
.config-type-item {
  cursor: pointer;
  font-size: 16px;
  line-height: 34px;
  color: #73767F;
}
.config-type-item:hover {
  font-weight: 600;
  color: #28B06E;
}
</style>
<style>
.platform-config-form .el-form-item__label {
  text-indent: 40px;
}
</style>
