<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
        <div partial>
          <form>
            <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="search_input input-font"
                       v-model=model.f_userinfo_code condition="f_userinfo_code = '{}'"/>
                <span @click="$parent.$parent.scanCodeClick('f_userinfo_code')">
                  <img src="../../assets/扫一扫.png" style="width: 6%" title="扫描用户专属条形码" alt="扫一扫"/>
                </span>
              </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_tableNumber" class=" font text-left">表号：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_tableNumber" class="search_input input-font"
                       v-model=model.f_meternumber condition="f_meternumber like '%{}%'"/>
                <span @click="$parent.$parent.scanCodeClick('f_meternumber')">
                  <img src="../../assets/扫一扫.png" style="width: 6%" title="扫描表上条形码" alt="扫一扫"/>
                </span>
              </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_cardmeternumber" class=" font text-left">现场表号：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_cardmeternumber" class="search_input input-font"
                       v-model=model.f_cardmeternumber condition="f_cardmeternumber like '%{}%'"/>
                <span @click="$parent.$parent.scanCodeClick('f_cardmeternumber')">
                  <img src="../../assets/扫一扫.png" style="width: 6%" title="扫描表上条形码" alt="扫一扫"/>
                </span>
              </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="search_input input-font"
                       v-model=model.f_user_name condition="f_user_name like '%{}%'"/>
              </div>
            </div>

            <div class="row app-row">
              <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
              <label class="font text-left">用户地址：</label>
              <input class="search_input input-font"
                     v-model=model.f_address condition="ua.f_address like '{}%'"/>
            </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="search_input input-font"
                       v-model="model.f_residential_area" condition="f_residential_area like '%{}%'"/>
              </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_floor" class="font text-left">楼栋：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_floor" class="search_input input-font"
                       v-model="model.f_building" condition="f_building like '%{}%'"/>
              </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_unit" class="font text-left">单元：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_unit" class="search_input input-font"
                       v-model="model.f_unit" condition="f_unit like '%{}%'"/>
              </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_keyword" class="font text-left">门牌：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_keyword" class="search_input input-font"
                       v-model="model.f_room" condition="f_room like '%{}%'"/>
              </div>
            </div>
            <div class="row app- row" v-show="$parent.$parent.isroleNameCBY">
              <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">
                <v-select id="f_user_type" closeOnSelect="true" search="false" valueSingle="false"
                          :value.sync="$parent.$parent.f_user_type" class="input-font"
                          :options='$parent.$parent.user_types' placeholder='请选择用户类型'
                          close-on-select clear-button
                          v-model="$parent.$parent.f_user_type"></v-select>
              </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_brand" class="font text-left">气表品牌：</label>
              </div>
              <div class="col-xs-8">
                <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="gb.f_meter_brand='{}'"></v-select>
              </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_style" class="font text-left">气表型号：</label>
              </div>
              <div class="col-xs-8">
                <v-select id="f_meter_style" closeOnSelect="true" search="false" valueSingle="false"
                          :value.sync="model.f_meter_style" class="input-font"
                          :options='$parent.$parent.meterstyle' placeholder='请选择气表型号'
                          close-on-select clear-button
                          v-model="model.f_meter_style" condition="gm.f_meter_style='{}'"></v-select>
              </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_style" class="font text-left">是否为特殊用户：</label>
              </div>
              <div class="col-xs-8">
                <v-select id="f_meter_style" closeOnSelect="true" search="false" valueSingle="false"
                          :value.sync="model.f_is_special" class="input-font"
                          :options='$parent.$parent.is_or_no' placeholder='请选择是否为特殊用户'
                          close-on-select clear-button
                          v-model="model.f_is_special" condition="tsu.f_special_class {}"></v-select>
              </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_style" class="font text-left">特殊用户分类：</label>
              </div>
              <div class="col-xs-8">
                <v-select id="f_meter_style" closeOnSelect="true" search="false" valueSingle="false"
                          :value.sync="model.f_special_class" class="input-font"
                          :options='$parent.$parent.special_type' placeholder='请选择特殊用户分类'
                          close-on-select clear-button
                          v-model="model.f_special_class" condition="tsu.f_special_class='{}'"></v-select>
              </div>
            </div>

            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;" @click="search()">查询
              </button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">现场表号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户编号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_userinfo_code }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户名称</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_name }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户类型</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_type }}
                  </p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户电话</p>
                  <p class="panel-title col-xs-8 text-left input-font">
                    {{ row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone }}
                    <img src="../../assets/phone.png" style="width: 6%"
                         v-on:click.stop.prevent='$parent.$parent.$parent.makeAPhoneCall(row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone)'
                         alt="电话"/>
                  </p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">小区名称</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_residential_area }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">楼栋</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_building }}号楼</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">单元</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_unit }}单元</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">门牌</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_room }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户地址</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_address }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">表类型</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_meter_classify }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">是否为特殊用户</p>
                  <p class="panel-title col-xs-8 text-left input-font" :style="{color: row.f_is_special == '是' ? 'red' : 'inherit' }">{{ row.f_is_special }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">特殊用户分类</p>
                  <p class="panel-title col-xs-8 text-left input-font" :style="{color: row.f_special_class ? 'red' : 'inherit' }">{{ row.f_special_class }}</p>
                </div>
                <div class="row">
                  <button type="button" name="button" class="btn btn-primary"
                          style="background-color:#499edf;float: right" @click="$parent.$parent.$parent.inspect(row)">处理
                  </button>
                  <button type="button" name="button" class="btn btn-primary"
                          style="background-color:#499edf;float: right;margin-right:10px;"
                          @click="$parent.$parent.$parent.gotomap(row)">导航
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <!--    <back-page :need-back='true' @flag="$back()"></back-page>-->
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import {HttpResetClass, PagedList} from 'vue-client'
import * as Util from '../Util'

export default {
  title: '移动抄表列表',
  data() {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/sql/queryCheckHandplanList`, 5, {condition: 'this.condition'}),
      f_preset_dt: Util.to3339TimeString(),
      user_types: [
        {label: '请选择用户类型', value: ''},
        {label: '民用', value: '民用'},
        {label: '非民用', value: '非民用'}
      ],
      f_user_type: '民用',
      f_role_name: Vue.user.f_role_name,
      f_meter_brands: [{label: '全部', value: ''}],
      is_or_no: [{label: '全部', value: ''},{label: '是', value: ' is not null'},{label: '否', value: ' is null'}],
      special_type: [{label: '全部', value: ''}, ...this.$appdata.getParam('特殊用户分类')],
      meterstyle: [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]

    }
  },
  ready() {
    this.initMeter_brands()
    // this.$refs.paged.$refs.cri.search();
  },
  computed: {
    // 当当前登录人具有抄表员角色时，可以对工业用户进行查询抄表
    isroleNameCBY() {
      if (this.f_role_name) {
        let roleArray = this.f_role_name.split(" ")
        for (let roleArrayElement of roleArray) {
          if (roleArrayElement === '抄表员') {
            return true;
          }
        }
        return false;
      } else {
        return false;
      }
    }
  },
  methods: {
    gotomap (row) {
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/api/af-safecheck/sql/safe_singleTable_OrderBy`, { data: {
          items: 'f_host_meter_name',
          tablename: 't_userfiles',
          condition: `f_userinfo_id  = '${row.f_userinfo_id}' and f_table_state in ('正常','停用') and f_host_meter_name is not null`,
          orderitem: 'f_userinfo_id desc'
        }}, {resolveMsg: null, rejectMsg: null}).then(res => {
        if (res.data.length > 0) {
          const val = JSON.parse(res.data[0].f_host_meter_name)
          if (val && val.length > 0) {
            HostApp.openThirdPartyMap({
              lon: val[0],
              lat: val[1],
              address: row.f_address
            })
          } else {
            this.$showMessage('该用户信息未查询到点位信息,请完善信息后在进行导航!')
          }
        } else {
          this.$showMessage('该用户信息未查询到点位信息,请完善信息后在进行导航!')
        }
      })
    },
    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})
          })
        }
      })
    },
    // 拨打方法
    makeAPhoneCall(phoneNumber) {
      this.$androidUtil.makeAPhoneCall(phoneNumber)
    },
    // 跳转
    inspect(row) {
      // 查询上次安检抄表信息 ${this.$androidUtil.getProxyUrl()}
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/sql/queryCheckMeterReading`, {data: {f_userinfo_id: row.f_userinfo_id}}).then((response) => {
        console.log(JSON.stringify(response))
        row['f_check_meter_data'] = response.data
        if (row.f_user_type === '民用') { //判断用户类型
          var pardate = {
            _this: this,
            title: '安检抄表',
            safe: true
          }
          this.$dispatch('gotoson', pardate)
          this.$goto('check-meter-reading', {item: row, role: 'androidview'}, 'self', this.reload)
        } else {
          var pardate = {
            _this: this,
            title: '安检抄表',
            safe: true
          }
          this.$dispatch('gotoson', pardate)
          this.$goto('check-meter-reading-noncivil', {item: row, role: 'androidview'}, 'self', this.reload)
        }

      })
    },
    search(args) {
      console.log(args.model)
      console.log(args.condition)
      if (!args.condition){
        args.condition = `1=1`
      }
      // args.condition+= ' '+`AND ui.f_userinfo_id='${Vue.user.orgs}'`
      if (this.f_user_type) {
        args.condition += ' ' + `AND ui.f_filialeid='${Vue.user.orgid}' AND uf.f_user_type = '${this.f_user_type}'`
      } else {
        args.condition += ' ' + `AND ui.f_filialeid='${Vue.user.orgid}'`
      }
      // 当用户类型是民用则只能对卡表进行抄表查询
      if (this.f_user_type == '民用') {
        args.condition += ' ' + ` AND (uf.f_meter_classify = '金额卡表' OR uf.f_meter_classify = '气量卡表' or uf.f_meter_classify = '物联网表' or gm.f_type = '超声波表' )`
      }
      return this.model.search(args.condition, args.model)
    },
    reload() {
      console.log('返回出来了')
      // this.$refs.paged.$refs.cri.search();
    },
    scanCodeClick(prop) {
      if (prop === 'f_cardmeternumber') {
        console.log("扫码用户标记")
        HostApp.__this__ = this
        HostApp.old_scanCode({callback: "javascript:HostApp.__this__.getCode('f_cardmeternumber');"})
      } else if (prop === 'f_userinfo_code') {
        console.log("扫码用户编号")
        HostApp.__this__ = this
        HostApp.old_scanCode({callback: "javascript:HostApp.__this__.getCode('f_userinfo_code');"})
      } else if (prop === 'f_meternumber') {
        console.log("扫码表号")
        HostApp.__this__ = this
        HostApp.old_scanCode({callback: "javascript:HostApp.__this__.getCode('f_meternumber');"})
      }
    },
    getCode(prop) {
      var datapa = HostApp.old_getCode().data;
      console.log(`扫码返回值${datapa}`)
      if (prop === 'f_meternumber') {
        this.$refs.paged.$refs.cri.model.f_meternumber = datapa
      } else if (prop === 'f_userinfo_code') {
        this.$refs.paged.$refs.cri.model.f_userinfo_code = datapa
      } else if (prop === 'f_cardmeternumber') {
        this.$refs.paged.$refs.cri.model.f_cardmeternumber = datapa
      }
      this.$showMessage(`扫码返回值为：${datapa}`)
    },
  }
}
</script>
<style>
.bg {
  background-color: blue;
  height: 1px;
  border: 0;
}

.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}

.search_input {
  border: 0;
  outline: none;
}

.font {
  font: 15px PingFang-SC-Medium;
  color: #666666;
}

.input-font {
  font: 15px PingFang-SC-Medium;
  color: #333333;
}

.btn-font {
  font: 600 16px PingFang-SC-Bold;
  color: #499EDF;
}

.btn-color {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #499EDF;
}

.app-text {
  font-size: 12px;
}

.panel-self {
  border-radius: 10px;
  border: 1px solid #499EDF;
  background-color: #F8F8F8;
}

.yybtn-color {
  background-color: #499edf;
  border-radius: 4px;
  border: 1px solid #499EDF;
  color: #FFFFFF;
  font: 14px PingFang-SC-Bold;
}

.qxbtn-color {
  background-color: #FFFFFF;
  border-radius: 4px;
  color: #499edf;
  font: 14px PingFang-SC-Bold;
  border: 1px solid #499EDF;
}
</style>

