<template>
  <div id="stand-work-list" class="basic-main" style="height: 98%">
    <criteria-paged :model="model" v-ref:paged @sort="sort">
      <criteria 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 form-group">
              <label class="font_normal_body">客户编号</label>
              <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                     v-model="model.f_userinfo_code"
                     placeholder='客户编号'
                     condition="f_userinfo_code like '%{}%'"
              >
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">客户名称</label>
              <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                     v-model="model.f_user_name"
                     placeholder='客户名称'
                     condition="f_user_name like '%{}%'"
              >
            </div>
            <div style="float:right">
              <button class="button_search button_spacing" @click="$parent.$parent.openModal">修改阀控状态</button>
              <button class="button_search button_spacing" @click="search()" v-el:cba>查询</button>
              <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
              <export-excel :data="$parent.$parent.getCondition"
                            :field="$parent.$parent.config.excelHeaders"
                            sqlurl="rs/logic/saleExport" sql-name="manage_getNewMeterBrandAndModel" template-name='表具查询'
                            v-ref:exports
                            :choose-col="true"></export-excel>
              <!--                <export-excel-->
              <!--                  :data="{condition: $parent.$parent.condition}"-->
              <!--                  :field="$parent.$parent.getfield"-->
              <!--                  sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="manage_getNewMeterBrandAndModel" template-name='表具查询'-->
              <!--                  :choose-col="true"></export-excel>-->
              <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 form-group">
              <label class="font_normal_body">客户地址</label>
              <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                     v-model="model.f_address"
                     placeholder='客户地址'
                     :size="model.f_address ? model.f_address.length : 6"
                     condition="f_address like '%{}%'"
              >
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">&nbsp;&nbsp;&nbsp;表号&nbsp;&nbsp;&nbsp;</label>
              <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                     v-model="model.f_meternumber"
                     placeholder='表号'
                     condition="f_meternumber like '%{}%'">
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">&nbsp;&nbsp;&nbsp;电话&nbsp;&nbsp;&nbsp;</label>
              <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                     v-model="model.f_user_phone"
                     placeholder='电话'
                     condition="f_user_phone like '%{}%'">
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">组织机构</label>
              <res-select :initresid="$parent.$parent.org"
                          style="width:60%"
                          @res-select="$parent.$parent.getorg"
                          restype='organization'>
              </res-select>

            </div>
            <div class="col-sm-2 form-group">
              <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 form-group">
              <label class="font_normal_body">用气性质</label>
              <v-select
                placeholder='用气性质'
                value-single="true"
                :value.sync="model.f_gasproperties"
                style="width:60%"
                multiple
                v-model="model.f_gasproperties"
                :options='$parent.$parent.Gasproperties'
                close-on-select condition="f_gasproperties  in {}">
              </v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">气表状态</label>
              <v-select
                placeholder='气表状态'
                :value.sync="model.f_table_state"
                style="width:60%"
                v-model="model.f_table_state"
                :options='$parent.$parent.TableStates'
                close-on-select
                condition="f_table_state='{}'">
              </v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">气表品牌</label>
              <v-select
                placeholder='气表品牌'
                multiple
                :value.sync="model.f_gasbrand"
                style="width:60%"
                v-model="model.f_gasbrand"
                :options='$parent.$parent.meterbrand'
                close-on-select
                condition="f_meter_brand in {}">
              </v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">阀控状态</label>
              <v-select
                placeholder='阀控状态'

                :value.sync="model.f_network_valve"
                style="width:60%"
                v-model="model.f_network_valve"
                :options='$parent.$parent.f_network_valve'
                close-on-select
                condition="f_network_valve='{}'">
              </v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">阀门状态</label>
              <v-select
                placeholder='阀门状态'

                :value.sync="model.f_valvestate"
                style="width:60%"
                v-model="model.f_valvestate"
                :options='$parent.$parent.valvestates'
                close-on-select
                condition="f_valvestate='{}'">
              </v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">表上余额</label>
              <input @keyup.enter="search" type="number" class="input_search" style="width:60%"
                     v-model="model.f_balance_min"
                     placeholder='表上余额'
                     condition="f_balance_amount > {}">
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
              <input @keyup.enter="search" type="number" class="input_search" style="width:60%"
                     v-model="model.f_balance_max"
                     placeholder='表上余额'
                     condition="f_balance_amount < {}">
            </div>
            <div class="col-sm-2 form-group" title="参数名称：【结算方式】">
              <label class="font_normal_body">结算方式</label>
              <v-select
                placeholder='结算方式'
                :value.sync="model.f_calculation"
                style="width:60%"
                v-model="model.f_calculation"
                :options='$parent.$parent.calculation'
                close-on-select
                condition="f_calculation='{}'">
              </v-select>
            </div>
          </div>

        </div>
      </criteria>

      <data-grid id='meterlist' partial='list' class="list_area table_sy" v-ref:grid :model="model" :optional="true">
        <template partial='head'>
          <tr>
            <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">
              <data-order field="f_address" name="客户地址"></data-order>
            </th>
            <th style="text-align:center;color:#3c763d">
              <nobr>表号</nobr>
            </th>
            <th style="text-align:center;color:#3c763d">
              <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">
              <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">
              <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>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">
              <nobr>{{ $index + 1 }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_userinfo_code }}</nobr>
            </td>
            <td style="text-align:center">
              <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{ row.f_user_name }}</a></span>
            </td>
            <td>
              <nobr>{{ row.f_address }}</nobr>
            </td>
            <td style="text-align:center;color:#3c763d">
              <nobr>
                {{ row.f_meternumber }}
              </nobr>
            </td>
            <td style="text-align:center;color:#3c763d">
              <nobr>
                {{ row.f_user_phone }}
              </nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_meter_brand }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_calculation }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_meter_base }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_total_fee }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_balance_amount }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_network_valve }}</nobr>
            </td>

            <td style="text-align:center">
              <nobr>{{ row.f_valvestate }}</nobr>
            </td>
            <!--<td style="text-align:center">-->
            <!--<nobr>{{row.f_valvestate}}</nobr>-->
            <!--</td>-->
            <td style="text-align:center">
              <nobr>{{ row.f_splitalarm }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_batterylevel }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_magneticinterference }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_electricity }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.angley }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.valvenoactionday }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.nosignalday }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.nousegasday }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.usegasbythismonth }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.usegasbylastmonth }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.usegasbyday }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.usegasbyyear }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.flowmetertemperature }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_jval }}</nobr>
            </td>

            <td style="text-align:center">
              <nobr>{{ row.f_orgname }}</nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
    <table class="table-hover">
      <tr style="position: relative" class="table-bordered">
        <td
          style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
          汇总信息
        </td>
        <td
          style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
          累购金额:&emsp;{{ model.sums.f_total_fee }}
        </td>
      </tr>
    </table>
  </div>

  <modal :show.sync="showModal" v-ref:modal backdrop="false">
    <header slot="modal-header" class="modal-header">
      <h4 class="modal-title">阀控管理</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <validator name='v'>
        <form class="form-horizontal select-overspread">

          <div class="form-group">
            <label class=" col-sm-3 control-label">阀控状态:</label>
            <div class="col-sm-4">
              <v-select v-model="f_network_valve"
                        placeholder='请选择'
                        :value.sync="disableModel.f_network_valve"
                        :options='f_network_valve'
                        :value-single="true"
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>

          <div class="form-group">
            <label class=" col-sm-3 control-label">操作原因:</label>
            <div class="col-sm-8">
                    <textarea class="form-control" v-model="disableModel.f_othereason" rows="3"
                              placeholder="多行输入"></textarea>
            </div>
          </div>
        </form>
      </validator>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="button_search" @click='confirm()'>提交</button>
      <button type="button" class="button_clear" @click='close'>取消</button>
    </footer>
  </modal>
</template>


<script>
import {PagedList} from 'vue-client'
import plugins from '../../../plugins/GetLoginInfoService'

let readyGen = async function (self) {
  await self.$MagLoadParams.loadParam()
  self.initQueryParam()
  await self.$getConfig(self, 'manageGetNewMeterBrandAndModel')
  console.log('表具管理config', self.config)
  self.getfield = self.config.excelHeaders
  // self.reflash()
}
export default {
  title: '表具查询',
  data () {
    return {
      showModal: false,
      disableModel: {
        f_othereason: '',
        f_network_valve: ''
      },
      model: new PagedList('rs/sql/manage_getNewMeterBrandAndModel', 50, {orderitem: '"f_userinfo_id DESC"'}, {
        f_total_fee: 0
      }),
      row: null,
      meterbrand: [],
      f_network_valve: this.$appdata.getParam('阀控状态') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('阀控状态')] : [],
      valvestates: this.$appdata.getParam('阀门状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')] : [],
      calculation: this.$appdata.getParam('结算方式') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('结算方式')] : [],
      searchshow: false,
      orgcondition: ' and f_filialeid = ' + `'${this.$login.f.orgid}'`,
      getfield: {},
      // 排序
      orderitem: 'f_userinfo_id desc',
      orderFields: {
        f_operate_date: 'no'
      },
      org: [this.$login.f.orgid],
      criteriaShow: false,
      config: {
        excelHeaders: {
          'f_userinfo_code': '客户编号',
          'f_user_name': '客户名称',
          'f_address': '客户地址',
          'f_meternumber': '表号',
          'f_user_phone': '电话',
          'f_meter_brand': '气表品牌',
          'f_calculation': '结算方式',
          'f_meter_base': '气表底数',
          'f_total_fee': '累购金额',
          'f_balance_amount': '表上余额',
          'f_network_valve': '阀控状态',
          'f_valvestate': '阀门状态',
          'f_signal': '信号强度',
          'f_batterylevel': '电压',
          'f_magneticinterference': '磁干扰',
          'angley': '角度',
          'valvenoactionday': '阀门无动作天数',
          'nosignalday': '未通讯天数',
          'nousegasday': '未用气天数',
          'usegasbythismonth': '本月用量',
          'usegasbylastmonth': '上月用量',
          'usegasbyday': '日用量',
          'usegasbyyear': '年用量',
          'flowmetertemperature': '温度',
          'f_jval': '表内余额',
          'f_orgname': '组织机构'
        }
      },
      condition: 'f_filialeid = ' + this.$login.f.orgid,
      WarningType: [
        {label: '全部', value: ''}
      ],
      Warningstyle: [
        {label: '全部', value: ''}
      ],
      Warningstyles: [
        {label: '全部', value: ''}
      ],
      styles: false,
      softVwareersion: [],
      Gasusertype: [],
      Gasproperties: [],
      // Gasproperties: this.$refs.paged.$refs.criteria.model.f_user_type.length === 1 ? this.$appdata.getParam(this.model.f_user_type[0]) : [],
      Gasproperties2: [],
      f_signal_1: '',
      f_signal_2: '',
      str: '',
      isBusy: false,
      f_batterylevel_1: 0,
      f_batterylevel_2: 0,
    }
  },
  props: ['searchobj', 'isdeal'],
  ready () {
    // 初始化气表品牌下拉框
    // 初始化客户类型，用气性质，用气属性，软件版本号下拉框
    readyGen(this)
    this.$refs.paged.$refs.criteria.model.f_table_state = ['正常']
    this.$refs.paged.$refs.criteria.search()
  },
  watch: {
    'searchobj' (val) {
      if (this.searchobj != null) {
        this.$refs.paged.$refs.criteria.model.f_meternumber = this.searchobj.f_meternumber
        this.$refs.paged.$refs.criteria.search()
      }
    }
  },

  methods: {
    openModal () {
      if (this.$refs.paged.$refs.grid.getRowData().length !== 0) {
        this.showModal = true
      }
    },
    async confirm () {

      let operInfo = {
        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_network_valve: this.disableModel.f_network_valve,
        f_othereason: this.disableModel.f_othereason

      }

      console.log('model----', this.$refs.paged.$refs.grid.getRowData())
      let userlist = []

      this.$refs.paged.$refs.grid.getRowData().forEach((item) => {
        let user = {
          f_userinfo_id: item.f_userinfo_id,
          f_user_name: item.f_user_name,
          f_userfiles_id: item.f_userfiles_id,
          f_table_state: item.f_table_state

        }
        userlist.push(user)
      })

      let param = {
        userlist,
        operInfo
      }

      console.log(param)

      await this.$resetpost('rs/logic/importNetworkValve', {data: param}, {
        rejectMsg: '同步失败',
        resolveMsg: '同步成功'
      })

      await this.search()
      this.showModal = false
    },

    close () {
      // 关闭对话框的逻辑
      this.showModal = false
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    clearmsg () {
      this.$refs.paged.$refs.criteria.model = {}
    },
    clickshow () {
      this.searchshow = !this.searchshow
    },
    dealmsg (val) {
      val.model = this.model.model
      this.$emit('deal-msg', val)
    },
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    selfsearch (args) {
      this.isBusy = true
      args.condition = `${args.condition} ` + this.orgcondition
      this.condition = args.condition
      this.model.search(args.condition, args.model)
    },
    getorg (obj) {
      if (plugins.convertToIn(obj) !== null && plugins.convertToIn(obj) !== '') {
        this.orgcondition = ' and f_filialeid in ' + plugins.convertToIn(obj)
      } else {
        this.orgcondition = ` and f_filialeid = '${this.$login.f.orgid}'`
      }
    },

    userTypeChange () {
      this.gasproperties = []
      if (this.model.f_user_type.length === 1) {
        if (this.model.f_user_type[0]) {
          this.gasproperties = this.$appdata.getParam(this.model.f_user_type[0])
        } else {
          this.$refs.paged.$refs.criteria.model.f_gasproperties = ''
        }
      }
    },
    sort (field, rule) {
      // 将所有排序方式设为不排序，实现相互排斥
      for (let key in this.orderFields) {
        if (key === field) {
          this.orderFields[key] = rule
        } else {
          this.orderFields[key] = 'no'
        }
      }
      // 如果新规则不排序，还原为默认排序
      if (rule === 'no') {
        this.model.paramSource.orderitem = `'${this.orderitem}'`
      } else {
        this.model.paramSource.orderitem = `'${field} ${rule}'`
      }

      this.search()
    },
    initQueryParam () {
      let arr = []
      this.$MagGetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        if (item.value.f_meter_type === '物联网表') {
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          arr.push(temp)
        }
      })
      this.meterbrand = [{label: '全部', value: ''}, ...arr]
    }
  },
  computed: {
    getCondition () {
      return {
        condition: this.condition,
        orderitem: this.orderitem
      }
    },
    /* Warningstyle () {
       return [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]
     }, */
    MeterTypes () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
    },
    TableStates () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
    },
    Gasproperties () {
      let rs = []
      if (this.model.model.f_user_type) {
        rs = this.$appdata.getParam(this.model.model.f_user_type[0])
      }
      return rs
      // return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
    },
    Gasusertype () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    signtype1 () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
    },
    parameterState () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记状态')]
    },
    userfilesState () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('上报状态')]
    },
    /* softVwareersion() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('软件版本号')]
    }, */
    valvestate () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
    }
  }
}
</script>
<style>
.form-input-group label {
  text-align: right;
  width: auto;
}

.datapanel {
  color: #333;
  background-color: white;
  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
  padding: 10px 30px 10px 30px;
  border-radius: 15px;
}
</style>

