<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex" v-if="!show">
        <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" >
                <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                <!--<div class="col-sm-2">-->
                  <!--<label class="font_normal_body">组织机构</label>-->
                  <!--<res-select :initresid="$parent.$parent.org"-->
                              <!--style="width:60%"-->
                              <!--@res-select="$parent.$parent.getorg"-->
                              <!--:is-mul=false-->
                              <!--restype='organization'>-->
                  <!--</res-select>-->

                <!--</div>-->
                <div class="col-sm-2">
                  <label class="font_normal_body">表&nbsp;&nbsp;号&nbsp;</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_meternumber" placeholder='表号'
                         condition="m.f_meternumber = '{}'" v-next-el='meternumber' v-el:meternumber
                  >
                </div>
<!--                <div class="col-sm-2">-->
<!--                  <label class="font_normal_body">组织机构</label>-->
<!--                  <res-select :initresid="$parent.$parent.orgid"-->
<!--                              style="width:60%"-->
<!--                              @res-select="$parent.$parent.getRes"-->
<!--                              restype='organization'>-->
<!--                  </res-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="ui.f_userinfo_code = '{}'" v-next-el='f_userinfo_code' v-el:meternumber
                  >
                </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_username" placeholder='客户名称'
                         condition="ui.f_user_name = '{}'" v-next-el='userid' v-el:username>
                </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_address" placeholder='客户地址'
                         condition="ua.f_address like '%{}%'" v-next-el='userid' v-el:username>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_user_type"
                            @change="$parent.$parent.userTypeChange()"
                            :options='$parent.$parent.usertypes' placeholder='请选择' v-model="model.f_user_type"
                            condition="uf.f_user_type = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用气性质</label>
                  <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                            :options='$parent.$parent.gasproperties' placeholder='请选择'
                            condition="uf.f_gasproperties = '{}'"
                            closfe-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气价类型</label>
                  <v-select :value.sync="model.pricetype" v-model="model.pricetype"
                            placeholder='气价类型' :options="$parent.$parent.pricetypes"
                            close-on-select>
                  </v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气价名称</label>
                  <v-select :value.sync="model.f_price_name"
                            v-model="model.f_price_name"
                            :options="$parent.$parent.getPricenames"
                            condition="ts.f_price_name = '{}'"
                            close-on-select></v-select>
                </div>

                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select :value.sync="model.f_gasbrand"
                            v-model="model.f_gasbrand"
                            :options='$parent.$parent.meterbrands'
                            condition="br.f_meter_brand = '{}'"
                            placeholder='气表品牌'
                            close-on-select></v-select>
                </div>

                <div class="span" style="float:right;margin-top:10px">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                  <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                :field="$parent.$parent.getfield"
                                sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="manage_getReportList" 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 " >
                  <label class="font_normal_body" >开始时间</label>
                  <datepicker style="width: 60%" placeholder="大于等于"
                              :value.sync="model.f_start_date"
                              v-model="model.f_start_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="m.f_hand_date >= '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-2 " >
                  <label class="font_normal_body">结束时间</label>
                  <datepicker style="width: 60%" placeholder="小于等于"
                              :value.sync="model.f_end_date"
                              v-model="model.f_end_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="m.f_hand_date <= '{}'"
                  ></datepicker>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
            <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>表内单价</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>金额状态</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>流量计标况流速</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>流量计EEPROM状态</nobr></th>
                <th><nobr>流量计时钟电路状态</nobr></th>
                <th><nobr>每小时上报量</nobr></th>
              </tr>
            </template>
            <template partial='body' partial='list'>
              <tr >
                <td style="text-align: left;"><nobr> <span @click="$parent.$parent.$parent.showmsg(row)"><a>{{row.f_userinfo_code}}</a></span></nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_meternumber}}</nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_meter_brand}}</nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_user_name}}</nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_user_phone}}</nobr></td>
                <td style="text-align: center;"><nobr>{{row.f_address}}</nobr></td>

                <td style="text-align:center"><nobr>{{row.f_hand_date}}</nobr></td>
                <th style="text-align:center"><nobr>{{row.f_insert_date}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_meterbalanceamt}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_price}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_valvestate}}</nobr></th>


                <th style="text-align:center"><nobr>{{row.f_upload_type}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_meterdebitamt}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_signal}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_snr}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_batterylevel}}</nobr></th>

                <th style="text-align:center"><nobr>{{row.f_table_msg}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_moneystate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_lowlithiumbattery}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_lowlithiumbattery2}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmetertemperature}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterpressure}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterbatterylevel}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.operatingmodetotal}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.standardconditiontotal}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.factorycurrentspeed}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.standardcurrentspeed}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterwmprepaystate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmetertemperaturestate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterpressurestate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterbatterylevelstate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterdostate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterinstructresponsestate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterdatastate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmetereppromstate}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.flowmeterclockstate}}</nobr></th>
                <!--              <th style="text-align:center"><nobr>{{row.f_nsturalgas_data}}</nobr></th>-->
<!--                <th style="text-align:center"><nobr><span @click="$parent.$parent.$parent.showdetail(row.f_nsturalgas_data)"><a>查看</a></span></nobr></th>-->
                <th style="text-align:center">
                  <button type="button" class="button_search button_spacing width-60" @click="$parent.$parent.$parent.showdetail(row.f_nsturalgas_data)">查看</button>
                </th>
              </tr>
            </template>
            <template partial='foot'></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;{{sumsmodel.f_meterbalanceamt}}-->
<!--            </td>-->
<!--            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">-->
<!--              抄表底数合计:&emsp;{{sumsmodel.f_tablebase}}-->
<!--            </td>-->
<!--            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">-->
<!--              表累计充值金额合计:&emsp;{{sumsmodel.f_meterdebitamt}}-->
<!--            </td>-->
<!--          </tr>-->
        </table>
        <modal :show.sync="detail24" >
          <header slot="modal-header" class="modal-header">
            <h4 class="modal-title">24小时上报数据明细</h4>
          </header>
          <article slot="modal-body" class="modal-body">
            <table v-for="detail of detaillist">
              <tr><td>{{detail.frozenDate}}</td><td>&nbsp;&nbsp;--&nbsp;&nbsp;</td><td>{{detail.frozenValue}}</td></tr>
            </table>
          </article>
          <footer slot="modal-footer" class="modal-footer">
            <div class="form-group">
              <button class="btn btn-success" @click="close()">确认</button>
              <button type="button" class="btn btn-default" @click='close'>取消</button>
            </div>
          </footer>
        </modal>
      </div>
      <div  class="flex" v-if="show">
        <user-info-detail-manage-new :f_userinfo_id="rowdata.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage-new>
      </div>
    </div>

  </div>
</template>

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

  let readySomething = async function (self) {
    await self.$MagLoadParams.loadParam()
    self.initParams()
    self.sumsmodel = self.$refs.paged.$refs.grid.model.sums;
  }
  export default {
    title: '上报查询',
    data () {
      return {
        show:false,
        detail24: false,
        org:[this.$login.f.orgid],
        orgcondition:' and f_filialeid = ' + this.$login.f.orgid,
        f_filialeid: this.$login.f.f_orgid,
        detaillist: [],
        prices: [],
        meterbrands:[],
        gasproperties:[],
        condition:'',
        rowdata:{},
        sumsmodel: {},
        orgid:[this.$login.f.orgid],
        // 公司下拉
        initres: {
          org: [],
          dep: [],
          user: []
        },
        criteriaShow:false,
        orgCondtionStr: '',
        model: new PagedList('api/af-revenue/sql/manage_getReportList', 50,{},{f_meterbalanceamt: 0,f_tablebase: 0,f_meterdebitamt: 0})
      }
    },
    ready () {
      // this.$refs.paged.$refs.criteria.search()
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
    },
    methods: {
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          if(item.value.f_meter_type==='物联网表'){
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          brandArr.push(temp)
        }
        })

        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
        //初始化气表价格
        this.prices = this.$MagGetSaleParam.getPrices();
      },
      async updateParams() {
        await this.$MagLoadParams.loadParam(this.f_filialeid)
        this.initParams()
      },
      userTypeChange () {
        this.gasproperties=[]
        if(this.$refs.paged.$refs.criteria.model !==null) {
          this.$refs.paged.$refs.criteria.model.f_gasproperties=''
          this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
        }
        else{
          this.gasproperties =[{label: '全部', value: ''}]
        }
      },
      showdetail(val) {
        console.log('24detail==', val)
        if(val){
          let detail = eval("("+val+")")
          this.detaillist = detail
          this.detail24 = true
        }else{
          console.log('无数据')
        }
      },
      close() {
        this.detail24 = false
      },
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      cancel() {
        this.show = false
      },
      clearmsg () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = []
        })
      },
      async getRes (condition, obj) {
        this.orgCondtionStr = condition.replace("f_orgid","m.f_orgid")
      },
      showmsg(obj){
        this.rowdata=obj
        this.show=true
      },

      search (args) {
        args.condition =  `${args.condition}`+this.orgCondtionStr
        console.log(args.condition+"args.condition")
        this.condition = args.condition
        this.model.search(args.condition, args.model)
        console.log(this.$refs.paged.$refs.grid.model.sums+"--this.$refs.paged.$refs.grid.model.sums")
        this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
        // args.condition = `${args.condition}`
        // if (this.orgcondition)
        //   args.condition = `${args.condition}` +  this.orgcondition
        // else
        //   args.condition = `${args.condition}` + 'and m.f_orgid in ' + '(' + this.$login.f.orgid + ')'
        // this.model.search(args.condition, args.model)
      }
    },
    watch: {
      // 'orgCondtionStr'(val) {
      //   let res = val.match(/'(.*?)'/)
      //   console.log('正则提取:',res && res[1])
      //   if (res) {
      //     this.f_filialeid = res[1]
      //     this.updateParams()
      //   }
      // }
    },
    computed: {
      getPricenames() {
        let f_user_type = this.$refs.paged.$refs.criteria.model.f_user_type;
        let f_gasproperties = this.$refs.paged.$refs.criteria.model.f_gasproperties;
        let pricetype = this.$refs.paged.$refs.criteria.model.pricetype;
        console.log("打印一下:",f_user_type,f_gasproperties,pricetype,this.f_filialeid,this.prices)
        console.log("查看f_orgid:",this.$login.f.f_orgid)
        if(this.$refs.paged.$refs.criteria.model !==null) {
          let rs = []
          let priceArr = []
          if ( pricetype.length >0) {
            let params = {
              f_price_type: pricetype[0],
              filter: this.org[0],
              prices: this.prices
            }
            console.log("打印一下params:",params)
            this.$MagGetSaleParam.getPrice(params).forEach((item) => {
              console.log("====================================》")
              let temp = {}
              temp.label = item.label
              temp.value = item.value.f_price_name
              priceArr.push(temp)
              console.log("打印一下temp:",temp)
            })

            rs = [{label: '全部', value: ''}, ...priceArr]
          }
          if (rs.length === 0) {
            console.log('rs读出来是空')
            this.$refs.paged.$refs.criteria.model.f_price_name = ''
          }
          return rs
        }
      },
      getfield () {
        return exportConfig.ReportListConfig
      },
      usertypes() {
        return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      pricetypes() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')]
      },
      getCondition () {
        var con = ""
        if (this.orgCondtionStr) {
          con = `${this.$refs.paged.$refs.criteria.condition} ${this.orgCondtionStr}`
        }
        else {
          con = `${this.$refs.paged.$refs.criteria.condition}and m.f_orgid in ('${this.$login.f.orgid}' )`
        }
        return {
          condition: con
        }
      }
    }
  }
</script>

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