<template >
  <div id="stand-work-list" class="flex bg-white p-10 datapanel">
    <div class="height:auto">
      <criteria-paged :model="model" v-ref:paged >
        <criteria partial='criteria' v-ref:criteria  @condition-changed='$parent.search'>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <div class="col-sm-2 form-group form-input-group" >
                <label class="control-label">客户编号</label>
                <input type="text" class="form-control"
                       v-model="model.f_userinfo_code"
                       placeholder='客户名称'
                       condition="f_userinfo_code = '{}'"
                >
              </div>
                <div class="col-sm-2 form-group form-input-group" >
                  <label class="control-label">客户名称</label>
                  <input type="text" class="form-control"
                         v-model="model.f_user_name"
                         placeholder='客户名称'
                         condition="f_user_name = '{}'"
                  >
                </div>
                <div class="col-sm-2 form-group form-input-group" >
                  <label class="control-label">&nbsp;&nbsp;地&nbsp;&nbsp;址&nbsp;&nbsp;</label>
                  <input type="text" class="form-control fixed-width"
                         v-model="model.f_address"
                         placeholder='用气地址'
                         condition="f_address like '%{}%'"
                  >
                </div>
              <div class="col-sm-2 form-group form-input-group" >
                <label class="control-label">&nbsp;&nbsp;表&nbsp;&nbsp;号&nbsp;&nbsp;</label>
                <input type="text" class="form-control"
                       v-model="model.f_user_id"
                       placeholder='表号'
                       condition="f_user_id = '{}'"
                >
              </div>
                <div class="col-sm-2 form-group form-input-group" >
                  <label class="control-label">用户类型</label>
                  <v-select
                    placeholder='用户类型'
                    :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 form-input-group" >
                  <label class="control-label">用气性质</label>
                  <v-select
                    placeholder='用气性质'
                    :value.sync="model.f_gasproperties"
                    v-model="model.f_gasproperties"
                    :options='$parent.$parent.Gasproperties'
                    close-on-select condition="f_gasproperties='{}'">
                  </v-select>
                </div>
                <div class="col-sm-2 form-group form-input-group">
                  <label class="control-label">气表状态</label>
                  <v-select
                    placeholder='气表状态'
                    :value.sync="model.f_table_state"
                    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 form-input-group" >
                  <label class="control-label" style="word-break:keep-all;">安装时间</label>
                  <datepicker placeholder="起始时间"
                              :value.sync="model.f_start_date"
                              v-model="model.f_start_date"
                              :format="'yyyy-MM-dd 00:00:00'"
                              condition="f_createfile_date > '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-2 form-group form-input-group" >
                  <label class="control-label" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                  <datepicker placeholder="结束时间"
                              :value.sync="model.f_end_date"
                              v-model="model.f_end_date"
                              :format="'yyyy-MM-dd 23:59:59'"
                              condition="f_createfile_date < '{}'"
                  ></datepicker>
                </div>
              <div class="col-sm-2 form-group form-input-group">
                <label class="control-label">组织机构</label>
                <right-tree :userid.sync='$parent.$parent.obj.userid'
                            :source.sync='$parent.$parent.obj.source'
                            @re-res="$parent.$parent.getRes"></right-tree>
              </div>
                <!--<div class="col-sm-2 form-group form-input-group">-->
                  <!--<label class="control-label">标记状态</label>-->
                  <!--<v-select :value.sync="model.f_parameter_state" v-model="model.f_parameter_state"-->
                            <!--placeholder='标记状态'-->
                            <!--:options='$parent.$parent.parameterState'-->
                            <!--close-on-select-->
                            <!--condition="f_parameter_state = '{}'"></v-select>-->
                <!--</div>-->
                <!--<div class="col-sm-2 form-group form-input-group">-->
                  <!--<label class="control-label">标记名称</label>-->
                  <!--<v-select :value.sync="model.f_parameter_name" v-model="model.f_parameter_name"-->
                            <!--placeholder='标记名称'-->
                            <!--:options='$parent.$parent.signtype1'-->
                            <!--close-on-select-->
                            <!--condition="f_parameter_name like '%{}%'"></v-select>-->
                <!--</div>-->
                <!--<div class="col-sm-2 form-group form-input-group">-->
                  <!--<label class="control-label">上报状态</label>-->
                  <!--<v-select :value.sync="model.f_userfiles_state" v-model="model.f_userfiles_state"-->
                            <!--placeholder='上报状态'-->
                            <!--:options='$parent.$parent.userfilesState'-->
                            <!--close-on-select-->
                            <!--condition="f_userfiles_state = '{}'"></v-select>-->
                <!--</div>-->
            </div>

            <div class="row" style="float: right">
                <button class="btn btn-success width-100" @click="search()" v-el:cba>查询</button>
                <button class="btn btn-default width-100" @click="$parent.$parent.clearmsg">清空</button>
                <!--<button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('meterlist')">导出</button>-->
              <!--<div v-show="!$parent.$parent.searchshow" @click="$parent.$parent.clickshow" style="position: relative;float: right;margin-right: 1%;">-->
                <!--<img src="../../../static/webMeter/shousuo.png"><span>展开</span>-->
              <!--</div>-->
              <!--<div v-show="$parent.$parent.searchshow" @click="$parent.$parent.clickshow" style="position: relative;float: right;margin-right: 1%;">-->
                <!--<img src="../../../static/webMeter/shangsheng.png"><span>收缩</span>-->
              <!--</div>-->
            </div>
          </div>
        </criteria>
        <data-grid  id='meterlist' partial='list' v-ref:grid :model="model">
          <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;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>累计用气量(m³)</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>{{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" v-show="$parent.$parent.$parent.isdeal">
                <nobr>
                  <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{row.f_user_id}}</a></span>
                </nobr>
              </td>
              <td style="text-align:center;color:#3c763d" v-show="!$parent.$parent.$parent.isdeal"><nobr>
                <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{row.f_user_id}}</a></span>
              </nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_classify}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_brand}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_style}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_base}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_collection}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_initial_base}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_total_fee}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_balance}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_table_state}}</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_input_date}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_position}}</nobr></td>
              <!--<td style="text-align:center"><nobr>{{row.f_signal}}</nobr></td>-->
              <!--<td style="text-align:center"><nobr>{{row.f_batterylevel}}</nobr></td>-->
              <!--<td style="text-align:center"><nobr>{{row.f_valvestate == 1 ? '关阀' : row.f_valvestate == 0 ? '开阀' : '未上报'}}</nobr></td>-->
              <td style="text-align:center"><nobr>{{row.f_filiale}}</nobr></td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>
<script>
  import {PagedList} from 'vue-client'

  let asyncReadyGen = async function (self) {
    // 获取营收参数
    // await self.search()
    await self.$LoadParams.loadParam()
    self.initQueryParam()
    self.$refs.paged.$refs.criteria.search()
  }
  export default {
    title: '表具管理',
    data () {
      return {
        model: new PagedList('rs/sql/web_getWebmeterInfo', 50),
        row: null,
        meterbrand: [],
        searchshow: false,
        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.f_orgids
        },
        show: false,
        // isdeal: true,
        f_signal_1: '',
        f_signal_2: '',
        str: '',
        f_batterylevel_1: 0,
        f_batterylevel_2: 0
      }
    },
    props: ['searchobj','isdeal'],
    ready () {
      asyncReadyGen(this)
      console.log(this.resids)
    },
    watch: {
      'searchobj' (val) {
        if (this.searchobj != null) {
          this.$refs.paged.$refs.criteria.model.f_user_id = this.searchobj.f_user_id
          this.$refs.paged.$refs.criteria.search()
        }
      }
    },
    methods: {
      // 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')
      //     }
      //   })
      // },
      initQueryParam () {
        let arr = []
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          arr.push(temp)
        })
        console.log("f_meter_brand1111",arr)
        this.meterbrand = [{label: '全部', value: ''}, ...arr]
      },
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      dealmsg (val) {
        val.model = this.model.model
        this.$emit('deal-msg', val)
      },
      search (args) {
        // this.obj.resids = this.obj.resids.replace(/\./g, '')
        // args.condition = `${args.condition}`
        args.condition =  `${args.condition} and f_filialeids like '${this.obj.resids}%'`
        this.model.search(args.condition, args.model)
      },
      getRes (obj) {
        this.obj.resids = obj.resids
        this.obj.res = obj.res
        // this.obj.resids = obj.resids.replace(/\./g, '')
      }
    },
    ready(){

      console.log(this.$login.f)
    },
    computed: {
      // WarningType () {
      //   return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表品牌')]
      // },
      meterType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      TableStates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      },
      Gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.criteria.model.f_user_type.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
        }
        return [{label: '全部', value: ''}, ...rs]
      },
      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('上报状态')]
      }
    }
  }
</script>
<style scoped>
  .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>

