<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="title_wrap">
        <h2>{{ $t('system.systemmanagement') }}</h2>
      </div>
      <div class="page_container">
        <div class="grid_wrapper">
          <table>
            <tr>
              <th>{{ $t('common.number') }}</th>
              <th>{{ $t('system.code') }}</th>
              <th>{{ $t('common.name') }}</th>
              <th>{{ $t('system.value') }}</th>
              <th>{{ $t('common.remark') }}</th>
              <th>{{ $t('common.operate') }}</th>
            </tr>
            <tr v-for="(e, i) in datalist" :key="i">
              <td>{{i+1}}</td>
              <td>{{ e.code }}</td>
              <td>{{ e.name }}</td>
              <td>{{ e.value }}</td>
              <td>{{ e.remark }}</td>
              <td>
                <div class="row">
                  <button class="button button--primary grid_button" @click="showDialog('2', e)">{{ $t('button.modify') }}</button>
                  <button class="button button--primary grid_button" @click="showDialog('3', e)">{{ $t('button.delete') }}</button>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="buttons_wrapper">
          <button class="button_control" @click="showDialog('1')"><p>{{ $t('system.addparameter') }}</p></button>
        </div>
      </div>
    </div>
    <jxDialog
    ref="child"
    :title="title"
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
    @toCancle="toCancle"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>{{ $t('system.code') }}</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal" data-next="1">
          </div>
        </div>
        <div class="form_item">
          <div class="form_item__label"><i>*</i>{{ $t('common.name') }}</div>
          <div class="form_item__content">
            <!-- <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal"> -->
            <keyboard-input
              inputClass="form_item__input"
              keyboardClass="name"
              :value="name"
              @inputChange="inputChange1"
              @inputFocus="inputFocus"
            ></keyboard-input>
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>{{ $t('system.value') }}</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric" data-next="1">
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item allwidth">
          <div class="form_item__label">{{ $t('common.remark') }}</div>
          <div class="form_item__content">
            <!-- <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea> -->
            <keyboard-input
              inputClass="form_item__input"
              keyboardClass="remark"
              :value="remark"
              @inputChange="inputChange2"
              @inputFocus="inputFocus"
            ></keyboard-input>
          </div>
        </div>
      </div>
    </div>
    <div v-if="type === '3'" class="form_wraper">{{$t('system.question1')}}</div>
    </jxDialog>
  </div>
  <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
import KeyboardInput from '@components/keyboard-input'
import { paramQuery, paramAdd, paramEdit, paramDelete } from '@config/getData2.js'
export default {
  components: {
    jxDialog,
    KeyboardInput
  },
  data () {
    return {
      datalist: [],
      active: false,
      type: '',
      title: '',
      code: '',
      name: '',
      value: '',
      remark: '',
      unclick: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case '1':
          this.title = '添加参数'
          break
        case '2':
          this.title = '修改参数'
          break
        case '3':
          this.title = ''
          break
        default:
          this.title = ''
      }
    },
    code (val) {
      if ((this.type === '1' || this.type === '2') && (val === '' || this.name === '' || this.value === '')) {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    name (val) {
      if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.value === '')) {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    value (val) {
      if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.name === '')) {
        this.unclick = true
      } else {
        this.unclick = false
      }
    }
  },
  created () {
    this._paramQuery()
  },
  methods: {
    async _paramQuery () {
      let res = await paramQuery('0', '100')
      this.datalist = [...res]
    },
    showDialog (type, e) {
      this.type = type
      this.$refs.child.active = true
      switch (type) {
        case '1':
          this.code = ''
          this.name = ''
          this.value = ''
          this.remark = ''
          this.unclick = true
          break
        case '2':
          this.code = e.code
          this.name = e.name
          this.value = e.value
          this.remark = e.remark
          if (!this.code || !this.name || !this.value) {
            this.unclick = true
          } else {
            this.unclick = false
          }
          this.pkObj = e
          break
        case '3':
          this.unclick = false
          this.pkObj = e
          break
      }
      this.hide()
    },
    toCancle () {
      this.hide()
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          this._paramAdd()
          break
        case '2':
          this._paramEdit()
          break
        case '3':
          this._paramDelete()
          break
      }
    },
    async _paramAdd () {
      this.$refs.child.disabled = true
      if (!this.code) {
        this.toast('编码不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.name) {
        this.toast('名字不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.value) {
        this.toast('数值不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await paramAdd(this.code, this.name, this.value, this.remark)
        if (res.code === '1') {
          this._paramQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _paramEdit () {
      this.$refs.child.disabled = true
      if (!this.code) {
        this.toast('编码不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.name) {
        this.toast('名字不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.value) {
        this.toast('数值不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await paramEdit(this.pkObj.id, this.code, this.name, this.value, this.remark)
        if (res.code === '1') {
          this._paramQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _paramDelete () {
      this.$refs.child.disabled = true
      try {
        let res = await paramDelete([this.pkObj.id])
        if (res.code === '1') {
          this._paramQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    show (e) {
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    },
    inputChange1 (val) {
      this.name = val
    },
    inputChange2 (val) {
      this.remark = val
    },
    inputFocus () {
      this.visible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.page_container
  padding 31px 31px 31px 45px
.grid_wrapper
  height calc(100% - 122px)
  overflow-y auto
</style>
