<template>
  <div class="flex-row auto" v-for="row in addGasParameter" style="margin-top:10px;width:96%">
    <form class="form-horizontal" style="flex: 1;">
      <div class="col-sm-4" style=" margin-right: 20px;" >
        <v-select :value.sync="row.f_param_name" @change="change" @selected="selected($index)" :options='metertitles' placeholder='参数名称' :value-single="true" close-on-select></v-select>
      </div>
      <div class="col-sm-4"  style="padding-right: 5px; margin-right: 20px;" >
        <input type="text" class="input_search" v-model="row.f_param_value" placeholder='参数值' required="required">
      </div>
      <!--<div class="col-sm-3"  style="padding-right: 5px; margin-right: 20px;" >-->
        <!--<input type="text" class="input_search" v-model="row.f_param_lname" placeholder='参数别名' required="required" readOnly="true">-->
      <!--</div>-->
    </form>
    <div>
      <img :src="imgdelete" alt="图片加载失败" style="width: 30px;margin-left: -15px;cursor: pointer;" v-if="row.model_used" @click="deleteMeter($index)">
    </div>
  </div>
  <div class="panel panel-default auto text-center" @click="addMeter()" style="cursor: pointer;">
    <img :src="imgmeter" alt="图片加载失败" class="img-rounded" style="width: 50px;margin:10px;">
  </div>
</template>

<script>
import Vue from 'vue'
import { HttpResetClass } from 'vue-client'

export default {
  name: "AddJsonParameter",
  title:'添加参数',
  props: ['gasmodel_id', 'gasid', 'gastype'],
  watch: {
    'gasmodel_id'(val){
      console.log("val", val)
      this.judgeInitValue(val)
    },
    'gasid'(val) {
      this.getParams(val)
    },
  },
  data () {
    return {
      addGasParameter: [],
      imgdelete: '/images/mainicon/deletedevice.png',   //images/mainicon/deletedevice.png
      imgmeter: '/images/mainicon/addmeter.png',
      metertitles: this.$appdata.getParam('气表参数'),
      paramconfig: [
        {label: '流量计代号', value: 'flowmeterCode'},
        {label: '流量计地址', value: 'flowmeterAddress'},
        {label: '流量计通信方式', value: 'flowmeterCommMode'},
        {label: '抄表通信波特率代号', value: 'recordBaudCode'},
        {label: '抄表通信奇偶校验代号', value: 'recordParityCheckCode'},
      ],
      isModify: false,
      isConfirm: true,
      selectParame: '',
      isshow: false
    }
  },
  ready () {
    this.judgeInitValue(this.gasmodel_id)
  },
  methods: {
    confirm() {
      let flag = true
      for(let index=0; index < this.addGasParameter.length; index++) {
        const item = this.addGasParameter[index];
        if(item.f_param_name === '') {
          // this.addGasParameter.splice(index, 1)
          this.$showAlert("第"+(index+1)+"行,参数名称未选择.", 'warning', 1500)
          flag = false
          break
        }
        if(item.f_param_value === '') {
          this.$showAlert("第"+(index+1)+"行,参数值为空.", 'warning', 1500)
          flag = false
          break
        }
      }
      return flag
    },
    selected(val) {
      this.addGasParameter.forEach((item, index) => {
        if(val !== index && this.selectParame === item.f_param_name) {
          this.addGasParameter[val].f_param_name = "";
          this.$showAlert("该参数已在列表中", 'warning', 1500);
        }
      });
      this.paramconfig.forEach((item, index) => {
        if(this.addGasParameter[val].f_param_name === item.label) {
          this.addGasParameter[val].f_param_lname = item.value
        }
      })

    },
    change(val) {
      this.selectParame = val
    },
    addMeter: function () {
      let param = {
        id: null,
        f_param_name: '',
        f_param_value: '',
        f_param_lname: '',
        model_used: true
      }
      if(this.gastype === "gasmodel") {
        param.f_gasmodel_id = this.gasmodel_id
      } else if(this.gastype === "userfiles" || this.gastype === 'adduserfile') {
        param.f_userfiles_id = this.gasmodel_id
      }
      this.addGasParameter.push(param)
    },
    deleteMeter (index) {
      this.addGasParameter.splice(index, 1)
    },
    getParams(val) {
      let http = new HttpResetClass();
      if(this.gastype ===  'adduserfile') {
        http.load('POST', 'rs/sql/singleTable_OrderBy', {data: {items: '*', tablename: "t_gasparammanage", condition: "f_gasmodel_id = '"+val+"'", orderitem: 'id'}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
          if (res.data.length > 0) {
            res.data.forEach((item) => {
              Vue.set(item, 'model_used', false)
            });
            this.addGasParameter = res.data;
            console.log("this.addGasParameter", this.addGasParameter)
          } else {
            this.addGasParameter = []
          }
        }).catch ((error) => this.$dispatch('error', '获取表档案参数错误', val, error))
      }
    },
    judgeInitValue (val) {
      let http = new HttpResetClass();
      let condition = "1=1"
      if(this.gastype ===  'adduserfile') {
        return
      }
      if(this.gastype === "gasmodel") {
        condition = "f_gasmodel_id = '"+val+"'"
      } else if(this.gastype === "userfiles") {
        condition = "f_userfile_id = '"+val+"'"
      }
      http.load('POST', 'rs/sql/singleTable_OrderBy', {data: {items: '*', tablename: 't_gasparammanage', condition: condition, orderitem: 'id'}},
        {resolveMsg: null, rejectMsg: null}).then((res) => {
          console.log("data", res.data);
        if (res.data.length > 0) {
          res.data.forEach((item) => {
            Vue.set(item, 'model_used', false)
          });
          this.addGasParameter = res.data;
          console.log("this.addGasParameter", this.addGasParameter)
        } else {
          this.addGasParameter = []
        }
      }).catch ((error) => this.$dispatch('error', '获取气表型号参数错误', val, error))
    },
  }
}
</script>

<style scoped>

</style>
