<template >
  <div class="flex" style="justify-content: space-between;">
    <div @keyup.enter="search" style="">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row" width="100%">
            <div class="col-sm-4" >
            <label class="font_normal_body" >&nbsp;开始时间</label>
            <datepicker placeholder="起始时间" style="width:60%"
            :value.sync="model.f_start_date"
            v-model="model.f_start_date"
            :format="'yyyy-MM-dd'"
            condition="f_insert_date >= '{} 00:00:00' "
            &gt;></datepicker>
            </div>
            <div class="col-sm-4" >
            <label class="font_normal_body" >结束时间</label>
            <datepicker placeholder="结束时间" style="width:60%"
            :value.sync="model.f_end_date"
            v-model="model.f_end_date"
            :format="'yyyy-MM-dd'"
            condition="f_insert_date <= '{} 23:59:59' "
            &gt;></datepicker>
            </div>
            <div class="span" style="float:right;">
            <button class="button_search"  @click="search()" v-el:cba>查询</button>
            <!--<print-data :model="$parent.$parent.printModel" :field="$parent.$parent.fields" :defaultfield="$parent.$parent.defaultfield" print-name="购气流水"-->
            <!--:is-selected="true" @print-data="$parent.$parent.print()"></print-data>-->
            </div>
            </div>
          </div>


        </criteria>
        <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <!--<th style="padding: 0;border: 0">-->
              <!--<input type="checkbox" id="f_operator" v-model="$parent.$parent.$parent.all[$parent.model.pageIndex-1]"-->
              <!--@change="$parent.$parent.$parent.select()" style="width: 22px;height: 22px"/>-->
              <!--</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>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr >
              <!--<td style="text-align: center;padding: 0;border: 0">-->
              <!--<input type='checkbox' @change="$parent.$parent.$parent.selectOne($event,row,$index)"-->
              <!--:checked="$parent.$parent.$parent.ischecked($parent.model.pageIndex-1,$index)" style="width: 22px;height: 22px;"/>-->
              <!--</td>-->
              <td style="text-align:center"><nobr>{{row.f_type}}</nobr></td>
              <!--<td style="text-align:center"><nobr>{{row.f_data}}</nobr></td>-->
              <td style="text-align:center"><nobr>{{row.f_data_date}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_data_total}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_insert_date}}</nobr></td>
              <td style="text-align:center"@click="$parent.$parent.$parent.dealmsg(row)" ><button class="btn">查看</button></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
      <modal :show.sync="isShowDetailInfo" width="1000px" title="详情展示" v-ref:modal backdrop="false"  >
        <article slot="modal-body" class="modal-body">
        <json-parse :data-json="rowData"  :json-fields="jsonFields"></json-parse>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-success" @click='cancel'>关闭</button>
        </footer>
      </modal>
    </div>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import co from 'co'
  export default {
    title: '流量计参数查看',
    data () {
      return {
        condition: '1=1',
        model: new PagedList('rs/sql/sale_meterparamQuery', 20, {}),
        // 控制单选
        radio: [],
        // 选中的页
        all: [],
        // row数据
        rowsdata: [],
        fields: {'f_preamount': '购气金额', 'f_pregas': '购气量', 'f_operate_date': '缴费时间', 'f_operator': '操作员', 'f_comments': '备注'},
        defaultfield: [
          'f_preamount', 'f_pregas', 'f_operate_date', 'f_operator', 'f_comments'
        ],
        jsonFields: {
          factoryFlow: '工况流量',
          dataDate: '记录时间',
          factoryTotal: '工况累积量',
          temperature: '温度',
          standardTotal: '标况累积量',
          pressure: '压力',
          standardFlow: '标流量',
          Result: '结果'
        },
        isShowDetailInfo: false,
        rowData: ''
      }
    },
    props: ['row'],
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      /**
       * 退出json详细信息页面
       */
      cancel () {
        this.isShowDetailInfo = false
      },
      /**
       * 展示json
       * @param obj 传递的row
       */

      dealmsg (obj) {
        console.log('==================>', obj)
        this.isShowDetailInfo = true
        this.rowData = obj.f_data
        debugger
      },
      search () {
        this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_userfiles_id = '${this.row.f_userfiles_id}'`
        this.model.search(this.condition, this.model)
      },
    },
    computed: {
      ischecked () {
        return function (index, i) {
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    }
  }
</script>

