<template>
  <div class="basic-main" style="height: 100%">
    <div>
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
          <validator name='v' partial>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row">
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用户编号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
                         placeholder='用户编号'
                         condition="f_userinfo_code = '{}'">
                </div>

                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">&nbsp;公&nbsp;&nbsp;&nbsp;&nbsp;司&nbsp;</label>
                  <right-tree :userid.sync='$parent.$parent.userid' style="width: 60%;"
                              :source.sync='$parent.$parent.source' @re-res="$parent.$parent.getRes" ></right-tree>
                </div>

                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用户姓名</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
                         placeholder='用户姓名'
                         condition="f_user_name like '%{}%'">
                </div>

                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">异常差值</label>
                  <v-select id="f_difference_states" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_difference_state" class="input-font"
                            :options='$parent.$parent.f_difference_states' placeholder='是否存在异常'
                            close-on-select clear-button
                            v-model="model.f_difference_state" condition="f_difference_state='{}'"></v-select>
                </div>

                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <div class="span" style="text-align: center;">
                    <button class="button_search" @click="search()">查询</button>
                    <button class="button_clear" @click="clear()">清除</button>
                  </div>
                  <export-excel   :data="$parent.$parent.searchData"
                                  :field="$parent.$parent.excelHeaders"
                                  sqlurl="api/af-safecheck/logic/exportfile" sql-name="searchCheckHandPlan"
                                  template-name='移动抄表查看导出'></export-excel>
                  <div 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-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">小区名称</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_residential_area"
                         placeholder='小区名称'
                         condition="f_residential_area like '%{}%'">
                </div>

                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用户地址</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_address" placeholder='用户地址'
                         condition="f_address like '%{}%'">
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用户类型</label>
                  <v-select id="f_user_type1" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_user_type" class="input-font"
                            :options='$parent.$parent.user_types' placeholder='请选择用户类型'
                            close-on-select clear-button
                            v-model="model.f_user_type" condition="f_user_type='{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">抄表员姓名</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_inputtor" placeholder='抄表员姓名'
                         condition="f_inputtor like '%{}%'">
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">抄表类型</label>
                  <v-select id="f_meter_read_type" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_meter_read_type" class="input-font"
                            :options='$parent.$parent.f_meter_read_types' placeholder='请选择抄表类型'
                            close-on-select clear-button
                            v-model="model.f_meter_read_type" condition="f_meter_read_type='{}'"></v-select>
                </div>
              </div>

              <div class="row" v-show="$parent.$parent.criteriaShow">
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用气性质</label>
                  <v-select id="f_gasproperties" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_gasproperties" class="input-font"
                            :options='$parent.$parent.f_gaspropertiess' placeholder='请选择用气性质'
                            close-on-select clear-button
                            v-model="model.f_gasproperties" condition="f_gasproperties='{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select id="f_meter_brand" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_meter_brand" class="input-font"
                            :options='$parent.$parent.f_meter_brands' placeholder='请选择气表品牌'
                            close-on-select clear-button
                            v-model="model.f_meter_brand" condition="f_meter_brand='{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">气表类型</label>
                  <v-select id="f_meter_brand" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_meter_classify" class="input-font"
                            :options='$parent.$parent.meter_classify' placeholder='请选择气表类型'
                            close-on-select clear-button
                            v-model="model.f_meter_classify" condition="f_meter_classify='{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">是否有效</label>
                  <v-select id="f_state" closeOnSelect="true" search="false" valueSingle="false"
                            :value.sync="model.f_state" class="input-font"
                            :options='$parent.$parent.f_states' placeholder='是否有效'
                            close-on-select clear-button
                            v-model="model.f_state" condition="f_state='{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">开始时间</label>
                  <datepicker
                    class="select_list select"
                    :value.sync="model.startdate"
                    placeholder='开始时间' style="width: 60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    v-model="model.startdate"
                    condition="f_hand_date >='{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
                  <label class="font_normal_body">结束时间</label>
                  <datepicker
                    :value.sync="model.enddate"
                    placeholder='结束时间' style="width: 60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    v-model="model.enddate"
                    condition="f_hand_date <=  '{} 23:59:59'">
                  </datepicker>
                </div>
              </div>
            </div>
          </validator>
        </criteria>
        <data-grid :model="model" partial='list' class="list_area table_sy" 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>抄表员</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>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="text-align:center">{{ $index + 1 }}</td>
              <td style="text-align:center">{{ row.f_userinfo_code }}</td>
              <td style="text-align:center">{{ row.f_user_name }}</td>
              <td style="text-align:center">
                <nobr>{{ row.f_user_phone }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_difference_state }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_is_change_table }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_meter_classify=='物联网表'?0:row.f_difference_value}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>
                  <button @click="$parent.$parent.$parent.reason(row,'model')" class="btn btn-link">{{ row.f_reason_remake ? row.f_reason_remake : '备注'}}</button>
                </nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_filiale }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_inputtor }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_address }}</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_meter_classify }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_meter_brand }}</nobr>
              </td>
               <td style="text-align:center">
                <nobr>{{ row.f_meter_read_type }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_tablebase }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_hand_date }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ (row.f_last_tablebase)?row.f_last_tablebase:0 }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ (row.f_last_hand_date)?row.f_last_hand_date:'暂无' }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_lastdate_to_days }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_working_instant }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_standard_instant }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_temperature }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_pressure }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_standard_total }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_flow_working_total }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_last_flow_standard_total }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_surplus_gas }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_last_surplus_gas }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_is_change_flowmeter }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_state }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_lastdate_average_gas_consumption_day }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>
                  <button @click="$parent.$parent.$parent.inspect(row)" class="btn btn-link">详情</button>
                  <button @click="$parent.$parent.$parent.updState(row,'model',row.f_state == '有效'?'无效':'有效')" class="btn btn-link" v-if="row.rn == 1">{{row.f_state == '有效'?'置无效':'置有效'}}</button>
                </nobr>
              </td>
              <td style="text-align:center">
                <nobr>
                  {{row.f_remake}}
                </nobr>
              </td>
              <td style="text-align:center">
                <nobr>
                  {{row.abnormal_calculation}}
                </nobr>
              </td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
<!-- 民用查看详情 -->
  <modal :show.sync="isShowItemModel" width="35%">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        详情预览
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <div style="width: auto;padding: 5px 15px 5px 15px">
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_userinfo_code" class="font text-left">用户编号：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_userinfo_code" class="input_search"
                   v-model=this_item.f_userinfo_code readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label class="font text-left">用户姓名：</label>
          </div>
          <div class="col-xs-8">
            <input class="input_search"
                   v-model=this_item.f_user_name readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label class="font text-left">用户地址：</label>
          </div>
          <div class="col-xs-8">
            <input class="input_search"
                   v-model=this_item.f_address readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_housing" class="font text-left">用户电话：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_housing" class="input_search"
                   v-model="this_item.f_user_phone" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_meter_number" class="font text-left">表号：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_meter_number" class="input_search"
                   v-model="this_item.f_meternumber" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_user_type" class="font text-left">用户类型：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_user_type" class="input_search"
                   v-model="this_item.f_user_type" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_meterclassify" class="font text-left">表类型：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_meterclassify" class="input_search"
                   v-model="this_item.f_meter_classify" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_tablebase" class="font text-left">上次抄表时间：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_tablebase" class="input_search"
                   v-model="this_item.f_last_hand_date" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_hand_date" class="font text-left">上次底数：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_hand_date" class="input_search" type="text"
                   v-model="this_item.f_last_tablebase" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f1_last_surplus_gas" class="font text-left label-font">上次表剩余：</label>
          </div>
          <div class="col-xs-8">
            <input id="f1_last_surplus_gas" class="input_search" type="text"   readonly="readonly"
                   v-model="this_item.f_last_surplus_gas" />
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_newhand_date2" class="font text-left" >本期底数：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_newhand_date2" class="input_search" type="number"
                   v-model="this_item.f_tablebase " readonly="readonly"
            />
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/guandao1.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="theRemainingAmount" class="font text-left">剩余量：</label>
          </div>
          <div class="col-xs-8">
            <input id="theRemainingAmount" readonly="readonly" type="number" class="input_search"
                   v-model="this_item.f_surplus_gas"
            />
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f1_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">累购气量：</label>
            <label for="f1_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">累购金额：</label>
          </div>
          <div class="col-xs-8">
            <input id="f1_total_gas"  type="number" class="input_search"
                   v-model="this_item.f_total_gas_total_fee" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_difference" class="font text-left"
                   :style="{'color':'异常'===this_item.f_difference_state? 'red': ''}">累购差值：</label>
            <!--累购-当前表底数-剩余-->
          </div>
          <div class="col-xs-8">
            <input id="f_difference" class="input_search" readonly="readonly" v-model="this_item.f_difference_value"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/baoxiuxinxi1.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_difference" class="font text-left" >备注：</label>
          </div>
          <div class="col-xs-8">
            <textarea v-model="this_item.f_remake" rows="2" class="input_textarea" readonly="readonly"></textarea>
          </div>
        </div>

<!--        <div class="form-group col-sm-12" :class="style__">
          <label class="text-left font">用户签名</label>
          <div class="auto">
            <div class="panel">
              <div class="panel-body panel-self"
                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                  <div class="col-sm-4">
                    <img :class="style__" :src=`/rs/image/file/${this_item.f_sign_path_name}`
                         @click="open_p(this_item.f_sign_path_name)" :width="200" :height="150" alt="签名"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>-->

        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label class="text-left font">用户表底数照片：</label>
          <div class="auto">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self"
                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                    <div class="col-sm-4" style="margin-bottom: 35px" v-for="(index,img) in commaCutIntoArray(this_item.f_meter_path_name)">
                      <img-self-safe :src="img" alt="用户表底数照片" width="150" height="200" v-if="img"
                      ></img-self-safe>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="showItemModelClose">关闭</button>
    </div>
  </modal>
<!-- 非民用查看详情   -->
  <modal :show.sync="isShowItemNoncivilModel" width="35%">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        详情预览
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <div style="width: auto;padding: 5px 15px 5px 15px">
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_userinfo_code1" class=" font text-left label-font">用户编号：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_userinfo_code1" class="input_search"
                   v-model=this_item.f_userinfo_code readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label class="font text-left label-font">用户姓名：</label>
          </div>
          <div class="col-xs-8">
            <input class="input_search"
                   v-model=this_item.f_user_name readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label class="font text-left label-font">用户地址：</label>
          </div>
          <div class="col-xs-8">
            <input class="input_search"
                   v-model=this_item.f_address readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_housing1" class="font text-left label-font">用户电话：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_housing1" class="input_search"
                   v-model="this_item.f_user_phone" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_meter_number1" class="font text-left label-font">表号：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_meter_number1" class="input_search"
                   v-model="this_item.f_meternumber" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_user_type2" class="font text-left label-font">用户类型：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_user_type2"  class="input_search"
                   v-model="this_item.f_user_type" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_meterclassify1" class="font text-left label-font">表类型：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_meterclassify1" class="input_search"
                   v-model="this_item.f_meter_classify" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_tablebase2" class="font text-left label-font">上期时间：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_tablebase2" class="input_search"
                   v-model="this_item.f_last_hand_date" readonly="readonly"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_hand_date1" class="font text-left label-font">上期底数：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_hand_date1" class="input_search" type="text"
                   v-model="this_item.f_last_tablebase" readonly="readonly"/>
          </div>
        </div>

        <!--工商业新加上期字段 -->
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_standard_total" class="font text-left label-font">上期标况累计：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_standard_total" class="input_search" type="text"   readonly="readonly"
                   v-model="this_item.f_last_flow_standard_total" />
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_last_surplus_gas" class="font text-left label-font">上期表剩余：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_last_surplus_gas" class="input_search" type="text"   readonly="readonly"
                   v-model="this_item.f_last_surplus_gas" />
          </div>
        </div>

        <div class="row bg-info">
          <label class="font text-left label-font">流量计信息</label>
          <div class="row">
            <!-- 工商本期新加字段    -->
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/压力.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_pressure1" class="font text-left label-font">压力：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_pressure1" class="input_search" type="text" readonly="readonly"
                       v-model="this_item.f_flow_pressure" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/温度.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_temperature" class="font text-left label-font">温度：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_temperature" class="input_search" type="text" readonly="readonly"
                       v-model="this_item.f_flow_temperature" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_standard_instant" class="font text-left label-font">标况瞬时：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_standard_instant" class="input_search" type="text"   readonly="readonly"
                       v-model="this_item.f_flow_standard_instant" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_standard_total1" class="font text-left label-font">标况累计：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_standard_total1" class="input_search" type="text"  readonly="readonly"
                       v-model="this_item.f_flow_standard_total" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_standard_instant" class="font text-left label-font">工况瞬时：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_working_instant" class="input_search" type="text"  readonly="readonly"
                       v-model="this_item.f_flow_working_instant" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_standard_total1" class="font text-left label-font">工况累计：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_working_total" class="input_search" type="text"   readonly="readonly"
                       v-model="this_item.f_flow_working_total" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_newhand_date" class="font text-left label-font">流量计底数：</label>
              </div>
              <div class="col-xs-8"> <!--工商业的本期底数就是剩余气量-->
                <input id="f_newhand_date" class="input_search" type="number" placeholder="请输入流量计底数"
                       v-model="this_item.f_tablebase " readonly="readonly"
                />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f1_surplus_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">表剩余气量：</label>
                <label for="f1_surplus_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">表剩余金额：</label>
              </div>
              <div class="col-xs-8"> <!--工商业的剩余气量-->
                <input id="f1_surplus_gas" class="input_search" type="number"
                       v-model="this_item.f_surplus_gas"  readonly="readonly"
                />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">累购气量：</label>
                <label for="f_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">累购金额：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_total_gas"  type="number" class="input_search"
                       v-model="this_item.f_total_gas_total_fee" readonly="readonly"/>
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <!--  计算得出的期间用气量      -->
                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_flow_gas_consumption" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">期间用气金额：</label>
                <label for="f_flow_gas_consumption" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">期间用气量：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_flow_gas_consumption" class="input_search" type="text"  readonly="readonly"
                       v-model="this_item.f_flow_gas_consumption" />
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <!--  表期间扣减量      -->
                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="thisPeriodFlowDeduction" class="font text-left label-font">表期间扣减量：</label>
              </div>
              <div class="col-xs-8">
                <input id="thisPeriodFlowDeduction" class="input_search" type="text" readonly="readonly"
                       v-model="this_item.f_flow_deduction" />
              </div>
            </div>

            <div class="row app-row" v-if="item.f_meter_classify == '物联网表'">
              <div class="col-xs-4">
                <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_difference1" class="font text-left label-font" :style="{'color':this_item.f_difference_state=='异常'?'red':''}">差值：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_difference1" class="input_search" readonly="readonly" v-model="this_item.f_difference_value"/>
              </div>
            </div>

            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/baoxiuxinxi1.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_difference" class="font text-left" >备注：</label>
              </div>
              <div class="col-xs-8">
                <textarea v-model="this_item.f_remake" rows="2" class="input_textarea" readonly="readonly"></textarea>
              </div>
            </div>

          </div>
        </div>

<!--        <div class="form-group col-sm-12" :class="style__">
          <label class="text-left font">用户签名</label>
          <div class="auto">
            <div class="panel">
              <div class="panel-body panel-self"
                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                  <div class="col-sm-4">
                    <img :class="style__" :src=`/rs/image/file/${this_item.f_sign_path_name}`
                         @click="open_p(this_item.f_sign_path_name)" :width="200" :height="150" alt="签名"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>-->

        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label class="text-left font">用户表底数照片：</label>
          <div class="auto">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self"
                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                  <div class="col-sm-4" style="margin-bottom: 35px" v-for="(index,img) in commaCutIntoArray(this_item.f_meter_path_name)">
                    <img-self-safe :src="img" alt="用户表底数照片" width="150" height="200" v-if="img"
                                   ></img-self-safe>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="isShowItemNoncivilModelClonse">确认</button>
    </div>
  </modal>
<!--置为无效-->
  <modal :show.sync="updateStateModel" width="35%">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        修改抄表单状态
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <div  class="row">
        <div class="col-sm-12">
          <label class="font_normal_body">置{{ updateState }}原因</label>
          <textarea v-model="updateStateReason" rows="2" class="input_textarea" style="width: 80%" class="form-control" ></textarea>
        </div>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-success" @click="updState(null,'update')">确认</button>
      <button type="button" class="btn btn-default" @click="updateStateModel=false">取消</button>
    </div>
  </modal>
<!--  异常差值原因-->
  <modal :show.sync="reasonStateModel" width="35%">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        填写异常差值原因
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <div  class="row">
        <div class="col-sm-12">
          <label class="font_normal_body">异常差值原因</label>
          <textarea v-model="remakesReason" rows="2" class="input_textarea" style="width: 80%" class="form-control" ></textarea>
        </div>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-success" @click="reason(null,'update')">确认</button>
      <button type="button" class="btn btn-default" @click="reason(null,'cancel')">取消</button>
    </div>
  </modal>

<!--  <image-viewer :src='thisimgPath' :linenumber="Math.abs(thisimgPath.length/3)" :show="isShouImgs" @clone_f="clone_p" alt="隐患图片"></image-viewer>-->
</template>


<script>
/**
 *阶梯气价查询列表
 */
import {PagedList, HttpResetClass} from 'vue-client'
import Vue from 'vue'

export default {
  title: '移动抄表查看',
  data () {
    return {
      model: new PagedList('api/af-safecheck/sql/searchCheckHandPlan', 30),
      user_types: [
        {label: '请选择用户类型', value: ''},
        {label: '民用', value: '民用'},
        {label: '非民用', value: '非民用'}
      ],
      f_states: [
        {label: '是否有效', value: ''},
        {label: '有效', value: '有效'},
        {label: '无效', value: '无效'}
      ],
      f_gaspropertiess: [{label:'全部',value:''},
        {label:'工业用气',value:'工业用气'},{label:'居民用气',value:'居民用气'},
        {label:'民用用气',value:'民用用气'},{label:'商业用气',value:'商业用气'}],
      f_meter_brands: [{label:'全部',value:''},
        ],
      meter_classify: this.$appdata.getParam('气表类型'),
      f_difference_states: [
        {label: '是否存在异常', value: ''},
        {label: '正常', value: '正常'},
        {label: '异常', value: '异常'}
      ],
      f_meter_read_types: [{label: '全部类型',value: ''},{label: '日常抄表',value: '日常抄表'},{label: '月度抄表',value: '月度抄表'}],
      userid: this.$login.f.id,
      source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
      isShowItemModel: false,
      isShowItemNoncivilModel:false,
      updateStateModel:false,
      reasonStateModel:false,
      remakesReason:'',
      updateStateReason:'',
      updateItem: {},
      updateState: '无效',
      this_item: {},
      thisimgPath: [], //图片放大功能图片路径
      isShouImgs: false,
      f_filialeid_id:`('${this.$login.f.orgid}')`, //分公司id
      criteriaShow: false,
      excelHeaders:{
        'f_userinfo_code': '用户编号',
        'f_user_name': '用户姓名',
        'f_user_phone': '用户电话',
        'f_difference_state': '是否异常',
        'f_difference_value': '异常差值',
        'abnormal_calculation': '异常差值得出方法',
        'f_address': '用户地址',
        'f_user_type': '用户类型',
        'f_gasproperties': '用气性质',
        'f_meter_classify': '表类型',
        'f_meter_brand': '气表品牌',
        'f_tablebase': '本期抄表底数',
        'f_hand_date': '本期抄表时间',
        'f_last_tablebase': '上期抄表底数',
        'f_last_hand_date': '上期抄表时间',
        'f_reason_remake': '差值原因备注',
        'f_filiale': '所属公司',
        'f_inputtor': '抄表员',
        'f_lastdate_to_days': '本次抄表距离上次抄表天数',
        'f_lastdate_average_gas_consumption_day': '与上次抄表计算得出日均用气量',
        'f_flow_temperature': '温度',
        'f_flow_pressure': '压力',
        'f_flow_working_total': '工况累计',
        'f_flow_working_instant': '工况瞬时',
        'f_flow_standard_total': '标况累计',
        'f_flow_standard_instant': '标况瞬时',
        'f_is_change_flowmeter': '是否换流量计',
        'f_is_change_table': '是否换表',
        'f_surplus_gas': '剩余量',
        'f_remake': '备注'
      },
      searchData: {
        condition: "1=1"
      },
    }
  },
  ready () {
    console.log(this.$login.f)
    this.$refs.paged.$refs.cri.model.f_state = '有效'
    this.initMeter_brands()
    // this.$refs.paged.$refs.cri.search()
  },
  methods: {
    initMeter_brands () {
      let http = new HttpResetClass()
      http.load('post', '/api/af-safecheck/sql/safe_singleTable_GroupBy', {
        'data': {
          'items': 'f_meter_brand',
          'tablename': 't_gasbrand',
          'condition': '1=1',
          'groupitem': 'f_meter_brand'
        }
      }, {rejectMsg: null, resolveMsg: null}).then((res) => {
        if (res.data) {
          this.f_meter_brands = [{label: '全部', value: ''}]
          res.data.forEach((re) => {
            this.f_meter_brands.push({label: re.f_meter_brand, value: re.f_meter_brand})
          })
        }
      })
    },
    hidden(){
      this.criteriaShow = !this.criteriaShow;
    },
    getRes(obj) {
      this.f_filialeid_id = this.$login.convertToIn(obj.resids);
    },
    open_p (imgPath) {
      this.isShowItemModel = false
      this.isShowItemNoncivilModel = false
      if (imgPath) {
          this.thisimgPath.push({url: `/rs/image/file/${imgPath}`})
      }else {
        for (let item of this.commaCutIntoArray(this.this_item.f_meter_path_name)) {
          this.thisimgPath.push({url: `/rs/image/file/${item}`})
        }
      }
      this.isShouImgs = true
    },
    clone_p () {
      if (this.this_item.f_user_type=='民用') {
        this.isShowItemModel = true
      } else {
        this.isShowItemNoncivilModel = true
      }
      this.thisimgPath = []
      this.isShouImgs = false
    },
    selfSearch (args) {
      let argscondition = args.condition
      this.searchData.condition = argscondition += ' ' + `AND f_filialeids in ${this.f_filialeid_id}`
      args.condition += ' ' + `AND f_filialeids in ${this.f_filialeid_id}`
      return this.model.search(args.condition, args.model)
    },
    inspect (row) {
      console.log('显示详情' + JSON.stringify(row))
      if (row.f_user_type === '民用') {
        this.this_item =  row
        this.isShowItemModel = true
      } else  {
        this.this_item =  row
        this.isShowItemNoncivilModel = true
      }
    },

    reason (row,isupdate) {
      debugger
      console.log('显示详情' + JSON.stringify(row))
      if (isupdate=='model') {
          this.updateItem = row
        this.remakesReason = row.f_reason_remake
          return this.reasonStateModel = true
      } else if (isupdate=='update') {
      if (!this.remakesReason) {
        return  this.$showMessage("请填写备注")
      }
      let  http = new HttpResetClass()
      let newdate = {
        id: this.updateItem.id,
        f_reason_remake: this.remakesReason,
        f_update_inputtor: this.$login.f.name,
        f_update_inputtor_id:  this.$login.f.id
      }
      http.load('POST',`/api/af-safecheck/logic/updateCheckHandPlanState`, {"data": newdate },
        {resolveMsg: null, rejectMsg: null}).then((res)=>{
        this.remakesReason = ''
        this.updateItem = {}
        this.reasonStateModel = false
        this.$showMessage("备注添加成功")
      })
    }else if (isupdate=='cancel') {
        this.reasonStateModel = false
        this.remakesReason = ''
      }
    },

     updState(row,isupdate,state) {
      // isupdate 为model 是打开model弹框 为update是修改数据
      if (isupdate=='model') {
        if(!this.$login.r.includes('移动抄表维护')){
          this.$showMessage("置无效需要【移动抄表维护】权限")
          return;
        } else {
          this.updateState = state
          this.updateItem = row
          return this.updateStateModel = true
        }
      } else if (isupdate=='update') {
        if (!this.updateStateReason) {
          return  this.$showMessage("请填写置无效原因")
        }
        let  http = new HttpResetClass()
        let newdate = {
          id: this.updateItem.id,
          updateStateReason: this.updateStateReason,
          state: this.updateState,
          f_update_inputtor: this.$login.f.name,
          f_update_inputtor_id:  this.$login.f.id
        }
         http.load('POST',`/api/af-safecheck/logic/updateCheckHandPlanState`, {"data": newdate },
          {resolveMsg: null, rejectMsg: null}).then((res)=>{
           this.updateStateReason = ''
           this.updateItem = {}
           this.updateStateModel = false
           this.updateState = "无效"
           this.$showMessage("置为无效成功")
        })
      }



    },
    showItemModelClose () {
      this.this_item = {}
      this.isShowItemModel = false
    },
    isShowItemNoncivilModelClonse () {
      this.this_item = {}
      this.isShowItemNoncivilModel = false
    },
    commaCutIntoArray (f_meter_path_name) {
      if (!f_meter_path_name) { return '';}
      console.log(f_meter_path_name.split(","))
      return f_meter_path_name.split(",");
    }
  },
  watch: {}
}
</script>

<style scoped>
.td-0 {
  border: 1px solid #000000;
}

.td-1 {
  border: none;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.td-2 {
  border: none;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.td-4 {
  border: none;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.td-3 {
  border: none;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
</style>
