<template>
    <div class="binary-left" style="width:48%">
      <div class="row auto">
        <div class="col-sm-4">
          <label class="font_normal_body" style="text-align:left">参数类型</label>
        </div>
        <div class="col-sm-8">
          <v-select
            placeholder="请选择参数类型"
            :value.sync="paramtype"
            style="width:40%"
            width="40%"
            :value-single="true"
            v-model="paramtype"
            :options='paramtypes'
            close-on-select
          ></v-select>
        </div>
        <!--<div class="col-sm-8" >
          -&#45;&#45;&#45;&#45;{{row.overdueMessageValue}}
          <input :type="text" v-model="row.overdueMessageValue" :value.sync="row.overdueMessageValue" style="width:70%" placeholder=""  class="input_search">
        </div>-->
      <div v-for="data in newmeterinfo" style="height: auto">
        <div class="col-sm-12"  style="height: auto" v-if="data.name===paramtype" v-for="param in data.params">
            <div class="col-sm-4">
              <label class="font_normal_body" style="text-align:left">{{param.name}}：</label>
              <p class="glyphicon glyphicon-info-sign" style="margin-top:7%;color:#4a7cae" :title="param.remark"></p>
            </div>
            <div class="col-sm-8" v-if="param.type!=='option'">
              <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'">
              <v-select
                :placeholder='param.name'
                :value.sync="row[param.title]"
                style="width:70%"
                width="70%"
                :value-single="true"
                v-model="row[param.title]"
                :options='param.params'
                close-on-select
              >
              </v-select>
            </div>
        </div>
      </div>
      <div class="form-group col-sm-4" style="float:right;white-space: nowrap;width: auto">
        <button class="button_search" @click="setParam()" v-if="paramtype">提交</button>
    </div>
  </div>
    </div>
    <div class="binary-right" style="width:48%;overflow-y: auto;max-height:1000px;">
      <div class="row list_area table_sy">
        <h4 style="display:inline-block;"><font style="font-weight: bold">已选中客户数:</font>{{user.length}}</h4>
        <div  v-if="condition" class="row auto">
          <h4 style="display:inline-block;"><font style="font-weight: bold">查询条件:</font>{{condition}}</h4>
        </div>
        <table class="table table-bordered table-striped table-hover" style="margin-top: 15px" id="table1" >
        <thead>
        <th style="text-align:center"><nobr>客户编号</nobr></th>
        <th style="text-align:center"><nobr>客户姓名</nobr></th>
        <th style="text-align:center"><nobr>客户类型</nobr></th>
        <th style="text-align:center"><nobr>气表品牌</nobr></th>
        </thead>
        <tbody>
        <tr v-for="row in user">
          <td><nobr>{{row.f_userinfo_code}}</nobr></td>
          <td><nobr>{{row.f_user_name}}</nobr></td>
          <td><nobr>{{row.f_user_type}}</nobr></td>
          <td><nobr>{{row.f_meter_brand}}</nobr></td>
        </tr>
        </tbody>
      </table>
      </div>
    </div>
</template>


<script>
  export default {
    title: '参数设置',
    props: ['user', 'checked1', 'gasbrandid', 'condition'],

    data () {
      return {
        newmeterinfo: [{}],
        row: {},
        gasbrand: null,
        paramtypes: [],
        paramtype: ''
      }
    },
    ready () {

    },
    watch: {
      'gasbrandid' (val) {
        if (val[0]) {
          this.refreshParam(val[0])
        }
      },
      'paramtype' (val) {
        console.log('改了paramtype！', val)
        this.row = {}
        if (val) {
          if (this.user.length === 1) {
            this.$resetpost('rs/sql/getIotParams', {data: {t_userfiles_id: this.user[0].f_userfiles_id}}, {resolveMsg: null, rejectMsg: null}).then((rat) => {
              this.row = {}
              if (rat.data.length > 0) {
                rat.data.forEach((item) => {
                  console.log('=============>this.paramtype', val)
                  console.log('=============>item', item.f_param_group_name)
                  if (val === item.f_param_group_name) {
                    this.$set('row.' + item.f_param_lname, item.f_param_value)
                  }
                })
                // let param = JSON.parse(rat.data[0].f_data)
                // console.log(param)
                // this.row= param
              }
            })
          }
        }
      }
    },
    methods: {
      close () {
        this.row = {}
        this.$dispatch('close')
      },
      async setParam () {
        let user = []
        let filesid = ''
        this.user.forEach((item) => {
          user.push(item.f_userfiles_id)
          filesid += item.f_userfiles_id + ','
        })
        filesid = filesid.substr(0, filesid.length - 1)
        let params = []
        for (let i = 0; i < this.newmeterinfo.length; i++) {
          for (let j = 0; j < this.newmeterinfo[i].params.length; j++) {
            for (let key in this.row) {
              if (key === this.newmeterinfo[i].params[j].title) {
                let data = {}
                data.param_group = this.newmeterinfo[i].name
                data.param_name = this.newmeterinfo[i].params[j].name
                data.param_value = this.row[key]
                data.param_lname = this.newmeterinfo[i].params[j].title
                params.push(data)
              }
            }
          }
        }
        let param = {
          condition: 'g.f_gasbrand_id = ' + this.gasbrandid[0] + ' and f.f_userfiles_id in (' + filesid + ')',
          switchCheckAll: this.checked1,
          users: user,
          params: params,
          f_alias: this.gasbrand.f_alias,
          columnName: 'g.f_userfiles_id',
          // inputter_name: this.$login.f.name,
          f_operator: this.$login.f.name,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps,
          f_gasbrand_id: this.gasbrandid[0]
        }
        console.log(param)
        await this.$resetpost('/rs/logic/alteration_batch', {data: param}, {rejectMsg: '批量保存失败', resolveMsg: '保存成功'})
        this.row = null
        this.$dispatch('clear')
      },
      async refreshParam (val) {
        this.paramtypes = []
        let temp = {
          tablename: 't_gasbrand',
          condition: `id=${val} and f_orgid='${this.$login.f.orgid}'`
        }
        await this.$resetpost('rs/sql/saleSingleTable', {data: temp}, {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.gasbrand = res.data[0]
        })
        this.newmeterinfo = [{}]
        try {
          let res = await this.$resetpost('/webmeter/rs/logic/getParamsByGasBrand', {data: {gasBrandId: val}}, {resolveMsg: '参数已加载', rejectMsg: null})
          this.newmeterinfo = res.data
          this.newmeterinfo.forEach((item) => {
            this.paramtypes.push({label: item.name, value: item.name})
          })
          this.$dispatch('showparam', true)
        } catch (error) {
          this.$showAlert('该气表品牌不支持参数设置', 'warning', 1500)
          this.$dispatch('showparam', false)
        }
      }
    }
  }
</script>
<style>
  .btn-border {
    border: none;
    border-radius: 6px;
  }
</style>
