<template>
  <div class="auto">
    <modal :show.sync="show" v-ref:modal large backdrop="false" width="80%">
      <header slot="modal-header" class="modal-header">
        <h3 style="color:black" class="modal-title">气表初始参数</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <validator name='v'>
          <form class="form-horizontal  select-overspread">
            <div class="row">
              <div v-for="data in meterInitParam" style="height: auto">
                <div class="col-sm-6 form-group" style="height: auto" v-for="param in data.params" >
                  <div class="col-sm-4" :class="[!row[param.title] ? 'has-error' : '']">
                    <label class="font_normal_body" style="text-align:left">{{ param.name }}：</label>
                    <p class="glyphicon glyphicon-info-sign" style="margin-top:4%;color:#4a7cae"
                       :title="param.remark" ></p>
                  </div>
                  <div class="col-sm-8" v-if="param.type!=='option'"  :class="[!row[param.title] ? 'has-error' : '']">
                    <input :type="param.type"
                           v-model="row[param.title]"
                           :value.sync="row[param.title]"
                           style="width:70%"
                           placeholder=""
                           class="input_search">
                  </div>
                  <div class="col-sm-8" v-if="param.type==='option'"  :class="[!row[param.title] ? 'has-error' : '']">
                    <v-select
                      :placeholder='param.name'
                      :value.sync="row[param.title]"
                      style="width:70%"
                      width="70%"
                      :multiple="param.multiple ? param.multiple : false"
                      v-model="row[param.title]"
                      :options='param.params'
                      :value-single="param.multiple ? param.multiple == 'true' ? false : true : true"
                      :close-on-select="param.multiple ? param.multiple == 'true' ? false : true :true"
                    >
                    </v-select>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </validator>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="button_search btn-gn" @click="confirm">确认</button>
        <button type="button" class="button_clear btn-gn" @click="cancel">取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>

import {HttpResetClass} from 'vue-client'

export default {
  title: '限购配置',
  data () {
    return {
      meterInitParam: [{}],
      row: {},
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    alias: {
      type: String,
      default: ''
    },
    paramstring: {
      type: String,
      default: ''
    }
  },
  ready () {
    this.getInitMeterParam()
    if (this.paramstring) {
      this.row = JSON.parse(this.paramstring)
    }
  },
  methods: {
    async getInitMeterParam () {
      this.meterInitParam = [{}]
      try {
        let data = {
          f_alias: this.alias
        }
        let http = new HttpResetClass()
        let res = await http.load('POST', '/webmeter/rs/logic/getOACallbackParamsByGasBrand',
          { data: data }, {resolveMsg: null, rejectMsg: null})
        console.log(JSON.stringify(res))
        if (res.data) {
          this.meterInitParam = res.data
        }
      } catch (e) {
        console.log(e)
      }
    },
    async confirm () {
      let hasError = false
      let yaError = false
      let hasStr = ''
      let yzStr = ''
      for (let param of this.meterInitParam) {
        for (let subparam of param.params) {
          let value = this.row[subparam.title]
          if (value) {
            if (subparam.type === 'number') {
              if (value < parseFloat(subparam.min) || value > parseFloat(subparam.max)) {
                yaError = true
                console.log(subparam.name)
                yzStr = yzStr + subparam.name + ' '
              }
            }
            if (Object.prototype.toString.call(value) === '[object Array]') {
              if (!value[0]) {
                hasError = true
                hasStr = hasStr + subparam.name + '  '
              }
            }
          } else {
            hasError = true
            hasStr = hasStr + subparam.name + '  '
          }
        }
      }
      if (hasError) {
        this.$showMessage(`${hasStr}表单项没有填写，请填写完所有的表单项再点击确认！！！`, ['confirm'])
        return
      }
      if (yaError) {
        this.$showMessage(`${yzStr}表单项格式错误，请悬浮到表单标签右侧的图标，按照悬浮文字提供的格式来填写表单项！！！`, ['confirm'])
        return
      }
      // let meterInitParam = JSON.stringify(this.row, function (key, value) {
      //   if (Array.isArray(value) && value.length === 1) {
      //     // 对于长度为1的数组，转换为字符串
      //     return value[0].toString()
      //   }
      //   return value
      // })
      this.$dispatch('init-param-confirm', JSON.stringify(this.row))
    },
    cancel () {
      this.$dispatch('init-param-cancel')
    }
  }
}
</script>
