<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row col-xs-12 col-sm-6 col-md-6 ">
              <div class="col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
                <img src="../../../assets/户编号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">户编号</span>
              </div>
              <div class="col-xs-8 col-sm-8 col-md-8">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_userinfo_code"
                       condition="f_userinfo_code like '%{}%'"
                       placeholder="请输入用户编号"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-6 col-md-6">
              <div class="col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
                <img src="../../../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">户姓名</span>
              </div>
              <div class="col-xs-8 col-sm-8 col-md-8">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_user_name"
                       condition="f_user_name like '%{}%'"
                       placeholder="请输入用户姓名"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/地址.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">户地址</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_address"
                       condition="f_address like '%{}%'"
                       placeholder="请输入用户地址"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">表号</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="number"
                       class="search_input input-font"
                       v-model="model.f_meternumber"
                       condition="f_meternumber like '%{}%'"
                       placeholder="请输入表号"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12" v-show="$parent.$parent.criteriaShow">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">小区</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_residential_area"
                       condition="f_residential_area like '%{}%'"
                       placeholder="请输入小区"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12" v-show="$parent.$parent.criteriaShow">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/楼号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">楼栋</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_building"
                       condition="f_building like '%{}%'"
                       placeholder="请输入楼栋"/>

              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12" v-show="$parent.$parent.criteriaShow">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/单元号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">单元</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_unit"
                       condition="f_unit like '%{}%'"
                       placeholder="请输入单元"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12" v-show="$parent.$parent.criteriaShow">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/门牌号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">门牌</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_room"
                       condition="f_room like '%{}%'"
                       placeholder="请输入门牌"/>
              </div>
            </div>
            <div class="row app-row col-xs-12 col-sm-12 col-md-12" v-show="$parent.$parent.criteriaShow">
              <div class="col-xs-4 col-sm-2 col-md-2" style="margin-bottom: 6px">
                <img src="../../../assets/楼层.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">楼层</span>
              </div>
              <div class="col-xs-8 col-sm-10 col-md-10">
                <input type="text"
                       class="search_input input-font"
                       v-model="model.f_floor"
                       condition="f_floor like '%{}%'"
                       placeholder="请输入楼层"/>
              </div>
            </div>
            <div class="row text-center app-row">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.search()">查询
              </button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.clearCondition">清空
              </button>
              <div style="float: right;margin-right: 3% " class="button_spacing"
                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.hidden()"></div>
            </div>
            <div class="col-xs-12 text-center app-row" >
              <p class="text-warning" style="color: red">&nbsp;&nbsp;提示：商业用户或者查询不到用户请联系营业厅开通，开通前请仔细核对表号表型</p>
            </div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self" @click="$parent.$parent.$parent.inputMeter(row)">
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户编号:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_userinfo_code }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户名称:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_name }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户地址:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_address }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">表号:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_meternumber }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">品牌:</p>
                <p class="panel-title col-xs-3 text-left input-font">{{ row.f_meter_brand }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">账户余额:</p>
                <p class="panel-title col-xs-3 text-left input-font">{{ row.f_balance }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">表上余额:</p>
                <p class="panel-title col-xs-3 text-left input-font">{{ row.f_balance_amount }}</p>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>

import Vue from 'vue'
import {HttpResetClass, PagedList} from 'vue-client'

export default {
  title: '物联网表开通',
  props: ['data', 'tabname'],
  data () {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getWebMeterOpenUser`, 20),
      criteriaShow: false
    }
  },
  async ready () {
    console.log('物联网表开通')
    console.log(Vue.user)
    if (this.data) {
      this.model = Object.assign({}, this.model, this.data)
    }

  },
  methods: {
    // 返回到抄表待办界面，主动刷新一次
    clearCondition () {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = []
      })
    },
    confirm(){
      this.$dispatch('confirm')
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    async selfSearch (args) {
      args.condition = `${args.condition} and f_orgid = '${Vue.user.orgid}'`
      await this.model.search(args.condition, args.model)
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    inputMeter (param) {
      var propData = {
        _this: this,
        title: '物联网开通',
        safe: false
      }
      param.tabname = this.tabname
      this.$dispatch('gotoson', propData)
      this.$goto('web-meter-open-edit', {data: param}, 'self', this.search)
    }
  },
  events: {
    'tijiao': function () {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.confirm()
    },
    'select' (val) {
      val.model = this.model
      this.$dispatch('changepage', val, 'save')
    },
    'phonehand-success' (type) {
      this.search()
    }
  },
  watch: {
    'currentPage' (val) {
      if (this.currentPage !== val) {
        this.search()
      }
    },
    'tabname' () {

    },
    'model.f_userinfo_id' (val) {
      if (val === '') {
        this.search()
      }
    }
  }
}
</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;
}

.button_shrink_top {
  width: 35px;
  height: 35px;
  background-size: 100%;
  background-image: url("../../../../static/stretch_top.png")
}

.button_shrink_bottom {
  width: 35px;
  height: 35px;
  background-size: 100%;
  background-image: url("../../../../static/stretch_bottom.png")
}

.sort-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border: 0;
  content: "";
  position: absolute;
  left: 3px;
  z-index: 2;
}

.descending {
  bottom: -30px;
  border-top: 5px solid #97a8be;
  border-bottom: none;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.ascending {
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: 9px;
  border-top: none;
  border-bottom: 5px solid #97a8be;
}

.ascend .ascending {
  border-bottom-color: #48576a;
}

.descend .descending {
  border-top-color: #48576a;
}
</style>
