<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%"
              :multiple="param.multiple ? param.multiple : false"
              :value-single="param.multiple ? param.multiple == true ? false : true : true"
              :close-on-select="param.multiple ? param.multiple == true ? false : true :true"
              v-model="row[param.title]"
              :options='param.params'
            >
            </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 && user ">提交</button>
        <button class="button_search" @click="setParamDefault()" v-if="paramtype && !user">提交</button>
      </div>
    </div>
  </div>
  <div class="binary-right" style="width:48%;overflow-y: auto;max-height:1000px;" v-if="user">
    <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>
  <div class="binary-right flex-row" style="width:80%;overflow-y: auto;max-height:1000px;" v-if="!user">
    <div class="binary-left" style="width:24% ;text-align:center;align-content: center;">
      <div class="row">
        <div v-for="data in newmeterinfo" style="height: auto">
          <ul class="nav nav-tabs col-sm-12" >
            <li class="active"><a>{{data.name}}</a></li>
          </ul>
          <div class="col-sm-12"  style="height: auto" v-for="p in data.params">
           {{p.name}}：{{param[p.title]}}
          </div>
        </div>
      </div>
    </div>
    <div class="binary-right" style="width:74%;overflow-y: auto;max-height:1000px;">
      <div class="row list_area table_sy">
        <table class="table table-bordered table-striped table-hover" 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>
          <!--        <th style="text-align:center"><nobr>气表品牌</nobr></th>-->
          </thead>
          <tbody>
          <tr v-for="row in history">
            <td><nobr>{{row.f_param_group_name}}</nobr></td>
            <td><nobr>{{row.f_param_name}}</nobr></td>
            <td><nobr>{{row.oldvalue}}</nobr></td>
            <td><nobr>{{row.f_param_value}}</nobr></td>

            <!--          <td><nobr>{{row.f_user_type}}</nobr></td>-->
            <!--          <td><nobr>{{row.f_meter_brand}}</nobr></td>-->
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</template>


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

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

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

    },
    watch: {
      param: {
        handler: function (val) {
          console.log('--------------param变了', val)
        },
        deep: true
      },
      'gasbrandid' (val) {
        if (val[0]) {
          this.refreshParam(val[0])
        }
      },
      'paramtype' (val) {
        console.log('改了paramtype！', val)
        this.row = {}
        if (val) {
          for (let i = 0; i < this.newmeterinfo.length; i++) {
            if (this.newmeterinfo[i].name == this.paramtype) {
              const params = this.newmeterinfo[i].params
              for (let j = 0; j < params.length; j++) {
                const param = params[j]
                if (param.data) {
                  if (Array.isArray(param.data)) {
                    this.$set(`row['${param.title}']`, [])
                    for (let u = 0; u < param.data.length; u++) {
                      for (let z = 0; z < param.params.length; z++) {
                        if (param.data[u] == param.params[z].value.code) {
                          this.row[param.title].push(param.params[z].value)
                        }
                      }
                    }
                  } else {
                    this.$set(`row['${param.title}']`, param.data)
                  }
                }
              }
            }
          }
          console.log('this.row', this.row)
          // 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 setParamDefault () {
        let params = []
        for (let i = 0; i < this.newmeterinfo.length; i++) {
          for (let j = 0; j < this.newmeterinfo[i].params.length; j++) {
            if (this.newmeterinfo[i].name === this.paramtype) {
              for (let key in this.row) {
                if (key === this.newmeterinfo[i].params[j].title) {
                  let data = {}
                  data.tag = this.newmeterinfo[i].tag
                  data.param_group = this.newmeterinfo[i].name
                  data.param_name = this.newmeterinfo[i].params[j].name
                  if (this.row[key]) {
                    if (Array.isArray(this.row[key])) {
                      let valueArr = []
                      let contentArr = []
                      this.row[key].forEach((item, index) => {
                        valueArr.push(item.code)
                        contentArr.push(item.content)
                      })
                      data.param_value = valueArr
                      data.param_content = contentArr
                    } else if (Object.prototype.toString.call(this.row[key]) === '[object Object]') {
                      data.param_value = this.row[key].code
                      data.param_content = this.row[key].content
                    } else {
                      data.param_value = this.row[key]
                      data.param_content = this.row[key]
                    }
                  } else {
                    data.param_value = null
                    data.param_content = null
                  }
                  data.param_lname = this.newmeterinfo[i].params[j].title
                  if (this.row[key]) {
                    params.push(data)
                  }
                }
              }
            }
          }
        }
        let param = {
          condition: 'g.f_gasbrand_id = ' + this.gasbrandid[0],
          switchCheckAll: this.checked1,
          users: '',
          params: params,
          f_alias: this.gasbrand.f_alias,
          columnName: '',
          // 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 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++) {
            if (this.newmeterinfo[i].name === this.paramtype) {
              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.tag = this.newmeterinfo[i].tag
                  if (this.row[key]) {
                    if (Array.isArray(this.row[key])) {
                      let valueArr = []
                      let contentArr = []
                      this.row[key].forEach((item, index) => {
                        valueArr.push(item.code)
                        contentArr.push(item.content)
                      })
                      data.param_value = valueArr
                      data.param_content = contentArr
                    } else if (Object.prototype.toString.call(this.row[key]) === '[object Object]') {
                      data.param_value = this.row[key].code
                      data.param_content = this.row[key].content
                    } else {
                      data.param_value = this.row[key]
                      data.param_content = this.row[key]
                    }
                  } else {
                    data.param_value = null
                    data.param_content = null
                  }
                  data.param_lname = this.newmeterinfo[i].params[j].title
                  if (this.row[key]) {
                    params.push(data)
                  }
                }
              }
            }
          }
        }
        debugger
        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}`
        }
        await this.$resetpost('rs/sql/saleSingleTable', {data: temp}, {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.gasbrand = res.data[0]
        })
        this.newmeterinfo = [{}]
        let res = await axios.post('/webmeter/rs/logic/getParamsByGasBrand', {data: {gasBrandId: val}}, {timeout: 10 * 60 * 1000})
        // let res = await this.$resetpost('/webmeter/rs/logic/getParamsByGasBrand', {data: {gasBrandId: val}}, {resolveMsg: '参数已加载', rejectMsg: null})
        this.newmeterinfo = res.data
        for (let i = 0; i < this.newmeterinfo.length; i++) {
          this.paramtypes.push({label: this.newmeterinfo[i].name, value: this.newmeterinfo[i].name})
          for (let j = 0; j < this.newmeterinfo[i].params.length; j++) {
            if (this.newmeterinfo[i].params[j].params instanceof Array) {
              for (let k = 0; k < this.newmeterinfo[i].params[j].params.length; k++) {
                this.newmeterinfo[i].params[j].params[k].value = {
                  id: this.newmeterinfo[i].params[j].params[k].label,
                  code: this.newmeterinfo[i].params[j].params[k].value,
                  content: this.newmeterinfo[i].params[j].params[k].label
                }
              }
            }
          }
        }
        this.$dispatch('showparam', true)
      },
      async getBrandParamsHistory () {
        let http = new HttpResetClass()
        let res = await http.load('POST', 'rs/sql/getBrandParamHistory', {
          data: {
            condition: `ga.f_gasbrand_id= ${this.gasbrandid}`
          }
        }, {resolveMsg: null, rejectMsg: '获取参数历史信息信息失败'})
        this.history = res.data
        let rat = await http.load('POST', 'rs/sql/singleTable_OrderBy', {
          data: {
            items: '*',
            tablename: 't_gasparammanage',
            condition: `f_gasbrand_id= ${this.gasbrandid}`,
            orderitem: 'id desc'
          }
        }, {resolveMsg: null, rejectMsg: '获取参数历史信息信息失败'})
        if (rat.data.length > 0) {
          rat.data.forEach((item) => {
            if (!this.param[item.f_param_lname]) {
              console.log(item.f_param_value, item.f_param_content)
              if (item.f_param_value != item.f_param_content && item.f_param_content) {
                item.f_param_value = item.f_param_content
              }
              console.log('参数取出来了---', item.f_param_lname)
              this.$set(`param['${item.f_param_lname}']`, item.f_param_value)
            }
            // this.param[item.f_param_lname] = item.f_param_value
          })
        }
        console.log('参数取出来了', this.param)
      }
    }
  }
</script>
<style>
  .btn-border {
    border: none;
    border-radius: 6px;
  }
</style>
