<template>
  <div class="flex-row bg-white p-10 datapanel">
    <div class="flex" style="width:100%;">
      <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="col-sm-2 form-group form-input-group" >
                <label class="button_search" >批次</label>
                <input type="text" class="form-control" v-model="model.f_batch_number"
                       condition="f_batch_number like '%{}%'" placeholder="批次">
              </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="button_search" >表钢号</label>
                <input type="text" class="form-control" v-model="model.f_meternumber"
                       condition="f_meternumber='{}'" placeholder="表钢号" >
              </div>
              <div class="col-sm-2 form-group form-input-group"   >
                <label class="button_search" >终端名称</label>
                <input type="text" class="form-control" v-model="model.f_terminal_id"
                       condition="f_terminal_id like'%{}%'" placeholder="终端名称">
              </div>
              <div class="col-sm-2 form-group form-input-group"  >
                <label class="button_search" >表计电话</label>
                <input type="text" class="form-control" v-model="model.f_meter_phone"
                       condition="f_meter_phone='{}'" placeholder="表计电话">
              </div>
              <div class="col-sm-2 form-group form-input-group" >
                <label class="button_search">imei码</label>
                <input type="text" class="form-control" v-model="model.f_imei"
                       condition="f_imei='{}'" placeholder="imei码">
              </div>
              <div class="col-sm-2 form-group form-input-group" >
                <label class="button_search">imsi码</label>
                <input type="text" class="form-control" v-model="model.f_imsi"
                       condition="f_imsi='{}'" placeholder="imsi码">
              </div>
              <div class="col-sm-2 form-group form-input-group"  >
                <label class="button_search" >表流量</label>
                <input type="text" class="form-control" v-model="model.f_diameter"
                       condition="f_diameter='{}'" placeholder="表流量">
              </div>
              <div class="col-sm-2 form-group form-input-group" >
                <label class="button_search" >厂商代码</label>
                <input type="text" class="form-control" v-model="model.f_vender"
                       condition="f_vender like'%{}%'" placeholder="厂商代码">
              </div>
              <div class="col-sm-3 form-group" >
                <label class="button_search"></label>
                <button class="btn btn-success"  @click="search()" v-el:cba>查询</button>
                <label class="button_search"></label>
                <button class="btn btn-success" @click="$parent.$parent.importFile">导入</button>
                <label class="button_search"></label>
                <button class="btn btn-default" @click="$parent.$parent.clearmsg">清空</button>
<!--                <label class="button_search"></label>-->
<!--                <button class="btn btn-default" @click="$parent.$parent.SaveAsFile('webmeterinfo')">导出</button>-->
              </div>

              <!--            <span style="padding-right: 30px; float: right">-->
              <!--        <report-excel class="btn btn-success" id="grid"></report-excel>-->
              <!--              </span>-->


            </div>
          </div>
        </criteria>
        <data-grid id="webmeterinfo" :model="model" partial='list'  v-ref:grid>
          <template partial='head'>
            <tr >
              <th><nobr>序号</nobr></th>
              <th><nobr>批次</nobr></th>
              <th><nobr>表钢号</nobr></th>
              <th><nobr>终端名称</nobr></th>
              <th><nobr>表计电话</nobr></th>
              <th><nobr>表流量</nobr></th>
              <th><nobr>表通道类型</nobr></th>
              <th><nobr>阀控标识</nobr></th>
              <th><nobr>表通讯序号</nobr></th>
              <th><nobr>imei码</nobr></th>
              <th><nobr>imsi码</nobr></th>
              <th><nobr>厂商代码</nobr></th>
              <th><nobr>操作</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align: center;" >{{$index+1}}</td>
            <td style="text-align: center" >{{row.f_batch_number}}</td>
            <td style="text-align: center" >{{row.f_meternumber}}</td>
            <td style="text-align: center" >{{row.f_terminal_id}}</td>
            <td style="text-align: center" >{{row.f_meter_phone}}</td>
            <td style="text-align: center" >{{row.f_diameter}}</td>
            <td style="text-align: center" >{{row.f_iot_type}}</td>
            <td style="text-align: center" >{{row.f_valvemark}}</td>
            <td style="text-align: center" >{{row.f_telecomm_no}}</td>
            <td style="text-align: center" >{{row.f_imei}}</td>
            <td style="text-align: center" >{{row.f_imsi}}</td>
            <td style="text-align: center" >{{row.f_vender}}</td>
            <td style="text-align: center" ><button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyMeterInfo(row)">修正</button></td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
    <div style="width:30%; margin-left: 20px;" class="flex" v-if="iseditmetetinfo">
      <edit-meter-info :oldmeter="oldmeterinfo" @close="closeedit"></edit-meter-info>
    </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>
  </div>
</template>
<script>
  import { PagedList } from 'vue-client'
  import  *  as  WebmeterUtil from  '../../WebmeterUtil'
  import vue from 'vue'

  export default {
    title: '表计管理',
    data () {
      return {
        model: new PagedList('rs/sql/singleTable_OrderBy', 20, {items: '"*"', tablename: '"t_meterinfo"', orderitem: '"id"'}),
        headers: {'username': vue.$login.f.name, 'blodid': WebmeterUtil.guid()},
        iseditmetetinfo: false,
        oldmeterinfo: {},
        show: false
      }
    },
    ready () {
      this.search()
    },
    methods: {
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      SaveAsFile(str) {
        this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let style = '<style>' +
              'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
            let strHtml = style + document.getElementById(str).innerHTML;
            console.log(strHtml);
            let LODOP = getLodop();
            LODOP.PRINT_INIT('');
            LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
            LODOP.SAVE_TO_FILE('表计管理.xls')
          }
        })
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        this.model.search(args.condition, args.model)
      },
      fileparse (name, val) {
      },
      modifyMeterInfo (row) {
        this.oldmeterinfo = row
        this.iseditmetetinfo = true
      },
      closeedit () {
        this.iseditmetetinfo = false
        this.search()
      },
      importFile () {
        this.show = true
      }
    },
    events: {
      onFileUpload: function (file, res) {
        console.log(this.$login.f,"======")
        let data = {
          tablename: 't_meterinfo',
          filepath: res.f_downloadpath,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps
        }
        console.log(data,"++++++++++++++++++++++++++")
        this.$resetpost('rs/logic/meterinfo_import', {data: data}, {resolveMsg: null, rejectMsg: '上传失败'}).then((res) => {
          let mes = '成功导入：' + res.data.addTimes + '条数据 '
          if (res.data.editMeter.length > 0) {
            mes = mes + ' 导入表号为【 '
            res.data.editMeter.forEach((item) => {
              console.log(item)
              mes = mes + item + '; '
            })
            mes = mes + ' 】共 ' + res.data.editMeter.length + ' 条数据因表号或IMEI号已存在导入失败'
          }
          this.$showMessage(mes)
          this.search()
        })
      }
    }
  }

</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>
