<template style="position: absolute;">
  <div id="WebMeterList">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' v-ref:criteria  @condition-changed='$parent.selfSearch'>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row" width="100%">
              <div :class="$parent.$parent.styles" >
                <label class=" font_normal_body" >&nbsp;&nbsp;&nbsp;表钢号</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_meternumber"
                       condition="f_meternumber='{}'" placeholder="表钢号" >
              </div>
              <div class="row">


              <div style="float:right">
                <button class="button_search"  @click="search()" v-el:cba>查询</button>
                <button class="button_search" @click="$parent.$parent.addmeter()">新增</button>
                <button class="button_search" @click="$parent.$parent.useMeter()">领用</button>
                <button class="button_export" @click="$parent.$parent.importFile">导入</button>
                <export-excel :data="$parent.$parent.getCondition" :field="$parent.$parent.getfield" :choose-col="true" v-ref:excel attach="webmeterlist"
                  sqlurl="rs/logic/saleExport" sql-name="webMeterInfo" template-name='表计信息导出'>
                </export-excel>
                <button  class="button_search" style="width: 90px" @click="$parent.$parent.downloadFiles()">模板下载</button>
                <button class="button_search" @click="$parent.$parent.clearmsg">清空</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="$parent.$parent.styles" >
                <label class=" font_normal_body" >表计电话</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_meter_phone"
                       condition="f_meter_phone='{}'" placeholder="表计电话">
              </div>
              <div :class="$parent.$parent.styles" >
                <label class=" font_normal_body" >&nbsp;&nbsp;&nbsp;IMEI码</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_imei"
                       condition="f_imei='{}'" placeholder="IMEI码">
              </div>
              <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
              <!--<div :class="$parent.$parent.styles">-->
                <!--<label class="font_normal_body">组织机构</label>-->
                <!--<res-select restype='organization'-->
                            <!--:is-mul="false"-->
                            <!--:initresid="$parent.$parent.curorgid"-->
                            <!--@res-select="$parent.$parent.getorgCur">-->
                <!--</res-select>-->
              <!--</div>-->
              <div :class="$parent.$parent.styles" >
                <label class="font_normal_body">气表品牌</label>
                <v-select
                        placeholder='气表品牌'
                        :value.sync="model.f_meter_brand"
                        style="width:60%"
                        v-model="model.f_meter_brand"
                        :options='$parent.$parent.meterbrand'
                        close-on-select
                        condition="f_meter_brand='{}'">
                </v-select>
              </div>
              <div :class="$parent.$parent.styles" >
                <label class="font_normal_body">安装状态</label>
                <v-select
                        placeholder='安装状态'
                        :value.sync="model.aa"
                        style="width:60%"
                        v-model="model.aa"
                        :options='$parent.$parent.azstate'
                        close-on-select
                        condition="aa='{}'">
                </v-select>
              </div>
              <div :class="$parent.$parent.styles" >
                <label class=" font_normal_body" >&nbsp;&nbsp;&nbsp;批次&nbsp;&nbsp;&nbsp;</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_batch_number"
                       condition="f_batch_number like '%{}%'" placeholder="批次">
              </div>
              <div :class="$parent.$parent.styles" >
                <label class="font_normal_body">是否领用</label>
                <v-select
                  placeholder='是否领用'
                  :value.sync="model.f_is_receive"
                  style="width:60%"
                  v-model="model.f_is_receive"
                  :options='$parent.$parent.isreceived'
                  close-on-select
                  condition="f_is_receive='{}'">
                </v-select>
              </div>
              <div :class="$parent.$parent.styles" >
                <label class=" font_normal_body" >&nbsp;&nbsp;&nbsp;领用人</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_receive_unit"
                       condition="f_receive_unit like '%{}%'" placeholder="领用人">
              </div>
              <div :class="$parent.$parent.styles" >
                <label class=" font_normal_body" >领用电话</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_receive_phone"
                       condition="f_receive_phone like '%{}%'" placeholder="领用电话">
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">领用日期</label>
                <datepicker id="startDate" placeholder=""
                            v-model="model.f_start_date"
                            :value.sync="model.f_start_date"
                            :disabled-days-of-Week="[]"
                            style="width: 60%"
                            :format="'yyyy-MM-dd 00:00:00'"
                            condition="f_receive_date >= '{}'">
                </datepicker>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">&emsp;&emsp;至&emsp;</label>
                <datepicker id="endDate" placeholder=""
                            v-model="model.f_end_date"
                            :value.sync="model.f_end_date"
                            style="width: 60%"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd 23:59:59'"
                            condition="f_receive_date <= '{}'">
                </datepicker>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">启用日期</label>
                <datepicker id="startDate" placeholder=""
                            v-model="model.f_start_date1"
                            :value.sync="model.f_start_date1"
                            :disabled-days-of-Week="[]"
                            style="width: 60%"
                            :format="'yyyy-MM-dd 00:00:00'"
                            condition="f_enable_date >= '{}'">
                </datepicker>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">&emsp;&emsp;至&emsp;</label>
                <datepicker id="endDate" placeholder=""
                            v-model="model.f_end_date1"
                            :value.sync="model.f_end_date1"
                            style="width: 60%"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd 23:59:59'"
                            condition="f_enable_date <= '{}'">
                </datepicker>
              </div>
            </div>
            </div>
          </div>
        </criteria>
        <data-grid id="webmeterinfo" :model="model"  class="list_area table_sy"  partial='list'  v-ref:grid>
          <template partial='head'>
            <tr>
              <th>
                <input type="checkbox"  @click="$parent.$parent.$parent.addOrRemove()">
              </th>
              <th><nobr>序号</nobr></th>
              <th><nobr>表号</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>imei码</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>imsi码</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>批次</nobr></th>
<!--              <th><nobr>设备号</nobr></th>-->
              <th v-if="$parent.$parent.$parent.showfields"><nobr>表计电话</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>表通道类型</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>阀控标识</nobr></th>
<!--              <th><nobr>表通讯序号</nobr></th>-->
              <th v-if="$parent.$parent.$parent.showfields"><nobr>设备地址</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>终端名称</nobr></th>
<!--              <th><nobr>厂商代码</nobr></th>-->
              <th><nobr>状态</nobr></th>
              <th><nobr>气表品牌</nobr></th>

              <th v-if="$parent.$parent.$parent.showfields"><nobr>设备号</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>气表年限</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>生产日期</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>批次号</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>气表厂家</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>采购人</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>采购时间</nobr></th>
              <th v-if="$parent.$parent.$parent.showfields"><nobr>启用时间</nobr></th>
              <th><nobr>是否领用</nobr></th>
              <th><nobr>领用人</nobr></th>
              <th><nobr>领用时间</nobr></th>
              <th><nobr>领用电话</nobr></th>
            </tr>
          </template>
          <template partial='body' >
            <td style="text-align:center">
              <input type="checkbox" v-model="$parent.$parent.$parent.$parent.meterinfos" :disabled="row.f_receive==='已领用'" :value="row" @click="$parent.$parent.$parent.checkboxMeter()" >
            </td>
            <td style="text-align: center;" >{{$index+1}}</td>
            <td style="text-align: center" >{{row.f_meternumber}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_imei}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_imsi}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_batch_number}}</td>
<!--            <td style="text-align: center" >{{row.f_device_id}}</td>-->
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_meter_phone}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_iot_type}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_valvemark}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_device_address}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_terminal_id}}</td>
<!--            <td style="text-align: center" >{{row.f_vender}}</td>-->

            <td style="text-align: center" >{{row.aa}}</td>
            <td style="text-align: center" >{{row.f_meter_brand}}</td>

            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_device_id}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_years}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_manufacture_date}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_batch_number}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_manufacturers}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_purchaser}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_purchase_date}}</td>
            <td style="text-align: center" v-if="$parent.$parent.$parent.showfields">{{row.f_enable_date}}</td>
            <td style="text-align: center" >{{row.f_receive}}</td>
            <td style="text-align: center" >{{row.f_receive_unit}}</td>
            <td style="text-align: center" >{{row.f_receive_date}}</td>
            <td style="text-align: center" >{{row.f_receive_date}}</td>


          </template>
        </data-grid>
      </criteria-paged>
  </div>
  <modal :show.sync="show" width="500px" title="文件导入" v-ref:modal large backdrop="false">
    <article slot="modal-body" class="modal-body">
      <file-upload class="my-file-uploader " name="UploadFile" class="btn btn-success" style="border-radius: 2px;"
                   action="rs/file/uploadFile" tagname="导入表计" v-ref:file :headers="headers" multiple></file-upload>
    </article>
    <footer slot="modal-footer" class="modal-footer">
    </footer>
  </modal>
</template>
<script>
  import { PagedList } from 'vue-client'
  import * as WebmeterUtil from '../../components/WebmeterUtil'
  import Vue from 'vue'

  let readyGen = async function (self) {
    await self.$LoadParams.loadParam()
    self.initQueryParam()
      // self.reflash()
  }

  export default {
    title: '表计管理',
    props:['showfields','styles'],
    data () {
      return {
        getCondition: null,
        getfield: null,
        meterbrand: [],
        azstate: [{label: '全部', value: ''}, {label: '已安装', value: '已安装'}, {label: '未安装', value: '未安装'}],
        isreceived:[{label: '全部', value: ''}, {label: '已领用', value: '是'}, {label: '未领用', value: '否'}],
        // curorgid: [this.$login.f.orgid],
        orgCondtionStr: '',
        // 公司下拉
        initres: {
          org: [],
          dep: [],
          user: []
        },
        model: new PagedList('rs/sql/webMeterInfo', 20, {items: '"*"', tablename: '"t_meterinfo"', orderitem: '"id"'}),
        headers: {'username': Vue.$login.f.name, 'blodid': WebmeterUtil.guid()},
        criteriaShow: false,
        f_orgid: '',
        show: false,
        meterinfos: [],
        isAddOrMove: false
      }
    },
    ready () {
      this.loadGetField()
      this.search()
      readyGen(this)
      this.$parent.meterinfos = []
      console.log('this', this)
      this.$refs.paged.$refs.criteria.model.f_table_state = ['正常']
      this.$refs.paged.$refs.criteria.search()
    },

    methods: {
      async getRes (condition, obj) {
        this.orgCondtionStr = condition
      },
      loadGetField () {
        this.getfield = {
          'f_meternumber': '表号',
          'f_imei': 'imei码',
          'f_imsi': 'imsi码',
          'f_meter_phone': '表计电话',
          'f_iot_type': '表通道类型',
          'f_valvemark': '阀控标识',
          'f_device_address': '设备地址',
          'f_terminal_id': '终端名称',
          'aa': '状态',
          'f_meter_brand': '气表品牌',
          'f_device_id': '设备号',
          'f_years': '气表年限',
          'f_manufacture_date': '生产日期',
          'f_batch_number': '批次号',
          'f_manufacturers': '气表厂家',
          'f_purchaser': '采购人',
          'f_purchase_date': '采购时间',
          'f_enable_date': '启用时间',
          'f_receive': '是否领用',
          'f_receive_unit': '领用人',
          'f_receive_date': '领用时间',
        }
      },
      downloadFiles(){
        let downurl='rs/downloadfile/file?filename=表计导入模板';
        this.$downFile(downurl,'表计导入模板.xlsx')
      },
      addOrRemove () {
        this.$parent.meterinfos = []
        if (this.isAddOrMove) {
          this.$parent.meterinfos = []
        } else {
          this.model.rows.forEach((row) => {
            if (row.f_receive !== '已领用') {
              this.$parent.meterinfos.push(row)
            }
          })
        }
        this.isAddOrMove = !this.isAddOrMove
      },
      useMeter () {
        console.log("meterinfos",this.$parent.meterinfos)
        this.$parent.iseditmetetinfo = true
        this.$parent.isUseMeter = true
        this.$parent.ismeterinfo = false
        console.log("1",this.$parent.iseditmetetinfo)
        console.log("2",this.$parent.ismeterinfo)
        console.log("3",this.$parent.isUseMeter)
      },
      checkboxMeter () {
        console.log("这是当前页的meterinfos",this.meterinfos)
        console.log("这是当前页的meterinfos",this.$parent.meterinfos)
      },
      initQueryParam () {
        let arr = []
        this.$GetSaleParam.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]
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      addmeter () {
        this.$parent.row = {}
        this.$parent.iseditmetetinfo = true
        this.$parent.ismeterinfo = true
        this.$parent.isUseMeter = false
        this.$parent.f_filialeids = this.f_filialeids
      },
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        this.$parent.meterinfos = []
        if (!this.f_orgid) {
          this.f_orgid = this.$login.f.orgid
        }
        let f_orgstr = this.orgCondtionStr ? this.orgCondtionStr : "and f_filialeid in ('" + this.f_orgid + "')"
        args.condition = `${args.condition} ` + f_orgstr
        // if (this.f_orgid) {
        //   args.condition = `${args.condition} and f_filialeid  in ${this.f_orgid}`
        // }
        this.getCondition = {condition: args.condition}
        this.model.search(args.condition, args.model)
      },

      getorgCur (val) {
        console.log('组织事件返回。。', val[0])
        this.f_orgid = this.$login.convertToIn(val)
        this.f_filialeids = val[0]
        this.$parent.f_filialeid = val[0]
        this.search()
      },
      importFile () {
        this.show = true
      }

    },
    events: {
      onFileUpload: function (file, res) {
        console.log(this.$login.f, '======')
        console.log(res)

        let data = {
          tablename: 't_meterinfo',
          filepath: res.f_downloadpath,
          info: {
            f_orgid: this.$login.f.orgid ? this.$login.f.orgid : '',
            f_orgname: this.$login.f.orgs ? this.$login.f.orgs : '',
            f_depid: this.$login.f.depids ? this.$login.f.depids : '',
            f_depname: this.$login.f.deps ? this.$login.f.deps : '',
            f_operator: this.$login.f.name,
            f_operatorid: this.$login.f.id,
            f_filialeid: this.f_orgid === '' ? this.$login.f.orgid : this.f_orgid.replace(/[^0-9]/ig, '')
          }
        }

        console.log(data, '++++++++++++++++++++++++++')
        this.$resetpost('rs/logic/iot_meterinfo_import', {data: data}, {resolveMsg: null, rejectMsg: '上传失败'}).then((res) => {
          // window.location.href = '/excel/表具导入异常信息.txt';
          let mes = '成功导入' + res.data.successnum + '条数据 '
          if (res.data.successnum !== res.data.allnum) {
            var link = document.createElement('a')
            let path = '表具导入异常信息.txt'
          // 本地
            let pathName = 'http://' + location.host + '/excel/' + path
            link.href = pathName
            link.download = path
            link.dispatchEvent(new MouseEvent('click'))
            mes = mes + ',有 ' + (((res.data.allnum - 0) - (res.data.successnum - 0)) - 0) + ' 条数据导入失败,请确保气表品牌存在，且表号、IMEI号唯一，详细信息请查看表具导入异常信息.txt'
          }
          this.$showMessage(mes)
          this.search()
        })
      }
    }
  }
</script>
<style lang="less">
  #WebMeterList {
    .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;
    }
    #webmeterinfo {
      tr > td {
        white-space: nowrap;
      }
    }
    #vc-exportexcel-webmeterlist {
      margin: 0;
    }
  }

</style>
