<template>
  <div class="basic-main" style="height:100%" >
    <criteria-paged :model='model' v-ref:paged>
      <criteria :model='model' partial='criteria' v-ref:criteria @condition-changed='$parent.selfSearch'>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="col-sm-2 ">
              <label class="font_normal_body" >协议类型</label>
              <v-select style="width:60%" title="气表协议类型"
                        placeholder='气表协议类型'
                        :value.sync="model.f_metertype"
                        v-model="model.f_metertype"
                        :options='$parent.$parent.metertype'
                        condition="f_metertype = '{}'"
                        close-on-select
                        :value-single="true" v-ref:brand>  </v-select>
            </div>
            <div class="col-sm-2 ">
              <label class="font_normal_body">气表品牌</label>
              <v-select
                placeholder='气表品牌'
                :value.sync="$parent.$parent.f_gasbrand_id"
                style="width:60%"
                v-model="$parent.$parent.f_gasbrand_id"
                :options='$parent.$parent.meterbrand'
                condition="f_gasbrand_id = '{}'"
                close-on-select></v-select>
            </div>
            <div class="col-sm-2 ">
              <label class="font_normal_body">气表型号</label>
              <v-select :value.sync="model.f_meter_style"
                        v-model="model.f_meter_style"
                        :options='$parent.$parent.meterstyle[$parent.$parent.f_gasbrand_id]' placeholder='请选择'
                        condition="f_gasmodel_id = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-2 ">
              <label class="font_normal_body">客户编号</label>
              <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                     v-model="model.f_userinfo_code"
                     placeholder='客户编号'
                     condition="f_userinfo_code like '%{}%'"
              >
            </div>
            <div class="span" style="float:right;">
              <button style="float: right" class="button_search button_spacing" @click="search()" v-el:cba>查询</button>
              <button style="float: right" class="button_search button_spacing" v-show="$parent.$parent.setable" @click="$parent.$parent.showParamDefault()" v-el:cba>设置品牌默认参数</button>
              <button style="float: right" class="button_search button_spacing" v-show="$parent.$parent.setable" @click="$parent.$parent.showParam()" v-el:cba>设置参数</button>
              <div style="float: right"  class="button_spacing"
                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.hidden()"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">
            <div class="col-sm-2 ">
              <label class="font_normal_body">表&emsp;号&emsp;</label>
              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                     v-model="model.f_meternumber"
                     placeholder='表号'
                     condition="f_meternumber like '%{}%'"
              >
            </div>
            <div class="col-sm-2 ">
              <label class="font_normal_body">客户姓名</label>
              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                     v-model="model.f_user_name"
                     placeholder='客户姓名'
                     condition="f_user_name = '{}'"
              >
            </div>
            <div class="col-sm-2 ">
              <label class="font_normal_body">小&emsp;区&emsp;</label>
              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                     v-model="model.f_residential_area"
                     placeholder='小区'
                     condition="f_residential_area like '%{}%'"
              >
            </div>
            <div class="col-sm-2">
              <label class="font_normal_body">用户类型</label>
              <v-select
                placeholder='用户类型'
                value-single="true"
                style="width:60%"
                :value.sync="model.f_user_type"
                v-model="model.f_user_type"
                :options='$parent.$parent.Gasusertype'
                close-on-select condition="f_user_type ='{}'">
              </v-select>
            </div>

            <div class="col-sm-2">
              <label class="font_normal_body">用气性质</label>
              <v-select
                placeholder='用气性质'
                value-single="true"
                :value.sync="model.f_gasproperties"
                style="width:60%"
                v-model="model.f_gasproperties"
                :options='$parent.$parent.Gasproperties'
                close-on-select condition="f_gasproperties ='{}'">
              </v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy" :optional="true">
        <template partial='head'>
          <tr>
<!--            <th style="text-align:center">-->
<!--              <nobr>全选</nobr>-->
<!--              <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1'-->
<!--                     @click="$parent.$parent.$parent.checkedALL()">-->
<!--            </th>-->
            <!--<th >操作</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>
            <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>
            <th style="text-align:center">
              <nobr>阀门状态</nobr>
            </th>
            <th style="text-align:center" v-if="$parent.$parent.$parent.setable">
              <nobr>查看</nobr>
            </th>

          </tr>
        </template>
        <template partial='body'>
          <tr>
            <!--<td>-->
            <!--<button type="button" name="button" class="btn btn-link" v-if="row.f_user_state === '正常'"-->
            <!--@click.stop="$parent.$parent.$parent.paramSet(row)">参数设置-->
            <!--</button>-->
            <!--</td>-->
            <td style="text-align:center">
              <nobr>{{row.f_userinfo_code}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_user_name}}</nobr>
            </td>
            <td>
              <nobr>{{row.f_address}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_meternumber}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_user_type}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_gasproperties}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_meter_brand}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_meter_style}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_gas_date}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.f_valvestate}}</nobr>
            </td>
            <td style="text-align:center" v-if="$parent.$parent.$parent.setable">
              <nobr v-if="row.f_number > 0">
                <button type="button" name="button" class="btn btn-link"
                        @click.stop="$parent.$parent.$parent.showParamHistory(row)">查看设置</button>
              </nobr>
            </td>

          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="showParame" v-ref:modal backdrop="false" width="1500px">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeParam"><span>&times;</span></button>
        <h3 class="modal-title" style="text-align: center;">参数设置</h3>
      </header>
      <article slot="modal-body" class="flex-row" >
        <param-set-form-new :data="map" :condition="conditionMsg" @showparam="showparam" @clear="clear" :gasbrandid="f_gasbrand_id" :user="user" :checked1 ="checked1" v-ref:form></param-set-form-new>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
    <modal :show.sync="paramHistory" v-ref:modal backdrop="false" width="1500px">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeParamHistory"><span>&times;</span></button>
        <h3 class="modal-title" style="text-align: center;">参数设置记录</h3>
      </header>
      <article slot="modal-body" class="flex-row" >
        <param-history-new @clear="clear" :gasbrandid="f_gasbrand_id" :user="row" v-ref:history></param-history-new>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <!--        <button type="button" class="btn btn-primary"  @click='confirm()'>确认</button>-->
      </footer>
    </modal>
  </div>
</template>

<script>
import {PagedList, HttpResetClass} from 'vue-client'
import ParamSetForm from './ParamSetForm'
let initGen = async function (self) {
  await self.$LoadParams.loadParam()
  let res = self.$GetSaleParam.getGasbrand()
  // let condition = 'f_meter_type = \'物联网表\''
  // self.$resetpost('/rs/sql/getAllBrands',{data:{condition:condition}}, {resolveMsg: null, rejectMsg: null}).then((res)=>{
  let arr = []
  res.forEach((item) => {
    if (item.value.f_meter_type === '物联网表') {
      let temp = {}
      temp.label = item.label
      temp.value = item.value.id
      arr.push(temp)
      let styleArr = []
      for (let row of item.value.gasmodel) {
        styleArr.push({label: row.label, value: row.value.id})
      }
      self.meterstyle[temp.value] = styleArr
    }
  })
  self.meterbrand = arr
  // })
}
export default {
  components: {ParamSetForm},
  title: '参数设置',
  name: 'param-set',
  data () {
    return {
      user: [],
      meterbrand: [],
      meterstyle: {},
      model: new PagedList('rs/sql/iot_getOpertionList', 20),
      searchshow: false,
      showParame: false,
      paramHistory: false,
      row: null,
      setable: true,
      criteriaShow: false,
      condition: '',
      f_gasbrand_id: null,
      orgcondition: ' and f_orgid = ' + this.$login.f.orgid,
      isShowUserException: false,
      val1: '',
      f_beizhu: '',
      Gasusertype: [],
      Gasproperties: [],
      checked1: false,
      WarningType: [
        {label: '全部', value: ''}
      ],
      initres: {
        org: [this.$login.f.orgid],
        dep: [],
        user: []
      },
      styles: false,
      excelTable: true,
      getfield: {
        'f_orgname': '组织机构',
        'f_userinfo_code': '客户号',
        'f_user_type': '客户类型',
        'f_gasproperties': '用气性质',
        'f_user_name': '客户姓名',
        'f_address': '用气地址',
        'f_gas_date': '安装时间',
        'f_meternumber': '表钢号',
        'f_meter_brand': '气表品牌',
        'f_user_id': '表编号',
        'f_meter_style': '气表型号',
        'f_valvestate': '阀门状态'

      },
      obj: {
        userid: this.$login.f.id,
        source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
        res: this.$login.f.f_fengongsi,
        resids: this.$login.f.orgid
      },
      // 开关阀权限
      valveLimit: false,
      // 设置参数权限
      Setarameterermissions: false,
      parameterType: '',
      map: new Map(),
      conditionMsg: '',
      isCheckAll: false
    }
  },
  ready () {
    initGen(this)
    // this.model.search('1=1')
  },
  methods: {
    //    let condition = 'f_meter_type = "物联网表"'
    // this.$resetpost('/rs/sql/getAllBrands',{data:{condition:condition}},{}).then((res)=>{
    //   let arr=[]
    //   res.data.forEach((item) => {
    //     let temp = {}
    //     temp.label = item.f_meter_brand
    //     temp.value = item.f_gasbrand_id
    //     arr.push(temp)
    //   })
    //   this.meterbrand = [{label: '全部', value: ''}, ...arr]
    // })
    showParamHistory (row) {
      this.paramHistory = !this.paramHistory
      this.row = [row]
    },
    closeParamHistory () {
      this.paramHistory = !this.paramHistory
      this.$refs.history.row = {}
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    async showParamDefault () {
      this.user = null
      this.map.clear()
      await this.$refs.form.getBrandParamsHistory()
      this.showParame = !this.showParame
    },
    showParam () {
      this.conditionMsg = ''
      if (this.$refs.paged.$refs.grid.getRowData().length === 0) {
        this.user = []
      } else {
        this.user = this.$refs.paged.$refs.grid.getRowData()
      }
      if (this.user.length === 0) {
        this.$showMessage('是否要设置查询出来的所有表参数', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.isCheckAll = true
            let conditionMsg = ''
            if (this.$refs.paged.$refs.criteria.model.f_gasbrand_id) {
              this.meterbrand.forEach((item) => {
                if (item.value === this.$refs.paged.$refs.criteria.model.f_gasbrand_id) {
                  conditionMsg += ('气表品牌:' + item.label + ';')
                }
              })
            }
            if (this.$refs.paged.$refs.criteria.model.f_userinfo_code) {
              conditionMsg += ('客户编号:' + this.$refs.paged.$refs.criteria.model.f_userinfo_code + ';')
            }
            if (this.$refs.paged.$refs.criteria.model.f_meternumber) {
              conditionMsg += ('表号:' + this.$refs.paged.$refs.criteria.model.f_meternumber + ';')
            }
            if (this.$refs.paged.$refs.criteria.model.f_meternumber) {
              conditionMsg += ('表号:' + this.$refs.paged.$refs.criteria.model.f_meternumber + ';')
            }
            if (this.$refs.paged.$refs.criteria.model.f_user_name) {
              conditionMsg += ('客户姓名:' + this.$refs.paged.$refs.criteria.model.f_user_name + ';')
            }
            if (this.$refs.paged.$refs.criteria.model.f_residential_area) {
              conditionMsg += ('小区:' + this.$refs.paged.$refs.criteria.model.f_residential_area + ';')
            }
            this.conditionMsg = conditionMsg
            this.$resetpost('rs/sql/iot_getOpertionList', {data: {condition: this.condition}}, {resolveMsg: null, rejectMsg: null}).then((rat) => {
              this.user = rat.data
              this.mapset(rat.data)
              this.showParame = !this.showParame
            })
          }
        })
      } else {
        this.isCheckAll = false
        this.showParame = !this.showParame
      }
    },
    closeParam () {
      this.$refs.form.paramtype = undefined
      this.$refs.form.paramGroup = undefined
      this.showParame = !this.showParame
      // if (this.isCheckAll) {
      this.map.clear()
      this.user = []
      // }
      // this.isCheckAll = false
    },
    clear () {
      this.$refs.form.paramtype = undefined
      this.$refs.form.paramGroup = undefined
      // this.isCheckAll = false
      this.showParame = false
      this.map.clear()
      this.user = []
      // this.unCheckAll()
      this.search()
    },
    selfSearch (args) {
      args.condition = `${args.condition} `
      if (this.f_gasbrand_id.length > 0) {
        args.condition += ' and f_gasbrand_id=' + this.f_gasbrand_id[0]
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      }
      // this.isCheckAll = false
    },
    showparam (setable) {
      this.setable = setable
      if (!setable) {
        this.map.clear()
        this.user = []
        // this.isCheckAll = false
      }
    },
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    mapset (array) {
      this.map.clear()
      for (let i = 0; i < array.length; i++) {
        let userid = array[i].f_userfiles_id
        let alias = array[i].f_alias
        let userinfoid = array[i].f_userinfo_code
        let f_orgname = array[i].f_orgname
        let f_orgid = array[i].f_depid
        let f_meternumber = array[i].f_meternumber
        this.map.set(userid, {
          id: null,
          f_user_id: userid,
          f_alias: alias,
          f_userinfo_id: userinfoid,
          f_orgname: f_orgname,
          f_orgid: f_orgid,
          f_meternumber: f_meternumber
        })
      }
    },
    back () {
      this.$parent.msg = ''
    },
    clearmsg () {
      this.$refs.paged.$refs.criteria.model = {}
    },
    clickshow () {
      this.searchshow = !this.searchshow
    },
    getRes (obj) {
      this.orgcondition = obj
    },
    // unCheckAll () {
    //   let box = document.getElementsByName('opertioninput')
    //   for (var i = 0; i < box.length; i++) {
    //     box[i].checked = false
    //   }
    // },
    // checkedALL () {
    //   this.checked1 = !this.checked1
    //   let box = document.getElementsByName('opertioninput')
    //   for (var i = 0; i < box.length; i++) {
    //     box[i].checked = this.checked1
    //   }
    // },
    // checked (val) {
    //   let userid = val.f_userfiles_id
    //   if (this.map.has(userid)) {
    //     this.map.delete(userid)
    //     /* 遍历数组，然后根据选中的状态获取对应的下标，然后进行删除 */
    //     for (let i = 0; i < this.user.length; i++) {
    //       if (val.f_userfiles_id === this.user[i].f_userfiles_id) {
    //         this.user.splice(i, 1)
    //       }
    //     }
    //   } else {
    //     this.user.push(val)
    //     this.map.set(userid, {
    //       id: null,
    //       f_user_id: userid,
    //       f_alias: val.f_alias,
    //       f_userinfo_id: val.f_userinfo_id,
    //       f_orgname: val.f_orgname,
    //       f_orgid: val.f_orgid,
    //       f_meternumber: val.f_meternumber
    //     })
    //   }
    // },
    showModal (val) {
      this.val1 = val
      this.isShowUserException = true
    },
    close () {
      this.isShowUserException = false
    }
  },
  computed: {
    /* WarningType() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表品牌')]
    }, */
    /* Warningstyle() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]
    }, */
    Gasusertype () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    Gasproperties () {
      let rs = []
      if (this.$refs.paged.$refs.criteria.model.f_user_type) {
        rs = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
      }
      return rs
    },
    parameterTypeList () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('设置参数')]
    },
    signtype1 () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
    },
    parameterState () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记状态')]
    },
    userType () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    userfilesState () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('上报状态')]
    },
    valvestate () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
    },
    instructState () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令状态')]
    },
    metertype () {
      return this.$appdata.getParam('气表协议类型')
    }
  },
  watch: {
    'f_gasbrand_id' (val) {
      if (val.length > 0) {
        this.$refs.paged.$refs.criteria.model.f_gasbrand_id = val[0]
        this.search()
      }
    }
    // 'checked1' (val) {
    //   if (val) {
    //     this.user = this.model.rows
    //     this.mapset(this.model.rows)
    //   } else {
    //     this.map.clear()
    //     this.user = []
    //   }
    // }
  }
}
</script>

<style scoped>
.PanelTR {
  width: 100%;
  height: 40px;
}
.dleft{
  padding: 10px;background-color: #ffffff;border-radius: 14px;
  box-shadow: 0px 1px 10px 0px rgba(2, 56, 104, 0.2);
  padding: 10px;
}
.PanelTD {
  width: 5%;
}

.btn-relative {
  position: relative;
  left: 25px;
  top: 15px;
}
</style>
