<template>
  <div class="row" style="padding: 10px">
  <div class="row" style="overflow: auto">
    <!--<div class=" row auto  app-row col-xs-12 col-sm-6 col-md-6">-->
      <!--&lt;!&ndash;<div class="row app-row col-xs-12 col-sm-6 col-md-6">&ndash;&gt;-->
      <!--<div class=" col-xs-4 col-sm-4 col-md-4 col-sm-4 col-md-4" style="margin-bottom: 6px">-->
        <!--<img src="../../assets/户编号.png" style="margin-bottom: 5px;width: 32px" alt="">-->
        <!--<span class="text-left font">户编号</span>-->
      <!--</div>-->
      <!--<div class="col-xs-8 col-sm-8 col-md-8 col-sm-8 col-md-8">-->
        <!--<input type="number" class="search_input input-font" v-model="model.f_userinfo_code" placeholder="请输入用户编号"/>-->
      <!--</div>-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--</div>-->
    <div class="col-xs-12 col-sm-6 col-md-6 row auto app-row ">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
        <img src="../../assets/姓名.png" style="margin-bottom: 5px;width: 32px" 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" placeholder="请输入用户姓名"/>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 row auto app-row ">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
        <img src="../../assets/卡号.png" style="margin-bottom: 5px;width: 32px" 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_card_id" placeholder="请输入用户卡号"/>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 row auto app-row ">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
        <img src="../../assets/街道.png" style="margin-bottom: 5px;width: 32px" 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_street" placeholder="请输入街道"/>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 row auto app-row ">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-bottom: 6px">
        <img src="../../assets/用气.png" style="margin-bottom: 5px;width: 32px" 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_point_name" placeholder="请输入用气点"/>
      </div>
    </div>
    <div class="row app-row auto 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="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">户电话</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" maxlength="15" class="search_input input-font" v-model="model.f_user_phone" placeholder="请输入用户电话"/>
      </div>
    </div>
    <div class="row app-row auto 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="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">表号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="number" class="search_input input-font" v-model="model.f_meternumber" placeholder="请输入表号"/>
      </div>
    </div>
    <div class="row app-row auto col-xs-12 col-sm-6 col-md-6">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-top: 8px">
        <img src="../../assets/开始时间.png" style="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">始时间</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker
          :value.sync="model.startDate"
          :format="'yyyy-MM-dd'"
          v-model="model.startDate"
          :show-reset-button="reset" placeholder="请输入起时间" style="margin-bottom: 8px">
        </datepicker>
        <!-- <input type="text" class="search_input" v-model="model.startDate" placeholder="请输入起下发时间"/> -->
      </div>
    </div>
    <div class="row app-row auto col-xs-12 col-sm-6 col-md-6">
      <div class=" col-xs-4 col-sm-4 col-md-4" style="margin-top: 8px">
        <img src="../../assets/结束时间.png" style="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">止时间</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker
          :value.sync="model.endDate"
          :format="'yyyy-MM-dd'"
          v-model="model.endDate"
          :show-reset-button="reset" placeholder="请输入止时间" style="margin-bottom: 8px">
        </datepicker>
        <!-- <input type="text" class="search_input" v-model="model.endDate" placeholder="请输入止下发时间"/> -->
      </div>
    </div>
    <div class="row app-row auto 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="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">抄表状态</span>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-10" @click="switchHandle()">
        <!-- <input type="number" maxlength="15" class="search_input" v-model="model.f_user_phone" placeholder="请选择抄表状态"/> -->
        <p class="text-left input-font">{{model.f_meter_state === '' ? model.f_meter_state = '待上传' : model.f_meter_state}}<span class="pull-right glyphicon glyphicon-chevron-right"></span></p>
      </div>
    </div>
    <div class="row app-row auto 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/chaobiao.png" style="margin-bottom: 5px;width: 32px" alt="">
        <span class="text-left font">抄表单条数</span>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-10 input-font" >
        {{handcount}}
      </div>
    </div>
    <div class="row auto text-center  col-xs-12 col-sm-12 col-md-12" style="">
      <button type="button" class="btn btn-font btn-color btn-lg" style="width: 45%;margin-top: 20px;" @click="confirm()">查询</button>
    </div>
    <div class="auto" style="padding-top: 20px;">
      <finish-hand-info v-if="show && model.f_meter_state == '待上传'"  :state="model.f_meter_state" :data="handinfo"></finish-hand-info>
      <history-hand-info v-if="show && model.f_meter_state == '已抄表'" :data="handinfo"></history-hand-info>
    </div>
    <div class="auto" v-if="!show">
      <p class="text-warning" style="padding: 0 10px">
        暂无抄表历史信息
      </p>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6" style="width: 100%;height: 40px;padding-bottom: 30%" v-if="show">
      <div class="col-xs-3 text-center">
        <button type="button" name="button" class="btn btn-link btn-small" @click="switchPage('last')">上一页</button>
      </div>
      <div class="col-xs-6">
        <div class="col-xs-6">
          当前页 {{currentPage}}
        </div>
        <div class="col-xs-6">
          总页数 {{totalPage}}
        </div>
      </div>
      <div class="col-xs-3 text-center">
        <button type="button" name="button" class="btn btn-link btn-small" @click="switchPage('next')">下一页</button>
      </div>
    </div>
  </div>
  <modal :show.sync="showmodal"  v-ref:modal backdrop="false" style="padding-top: 150px;">
    <header slot="modal-header" class="modal-header">
      <p>请选择抄表状态</p>
    </header>
    <article slot="modal-body" style = "padding-bottom:10px;" id="testbill">
      <div class="auto" style="padding-top: 10px;">
        <div class="row app-row col-xs-12 col-sm-6 col-md-6" @click="editState('待上传')">
          <p class="text-center">待上传</p>
        </div>
        <div class="row app-row col-xs-12 col-sm-6 col-md-6" @click="editState('已抄表')">
          <p class="text-center">已抄表</p>
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button v-show="false" type="button" class="btn btn-default" @click='cancel()'>取消</button>
    </footer>
  </modal>
  </div>
</template>
<script>
  import AppData from '../../stores/AppData'
  import * as Util from '../Util'
  import Vue from 'vue'
  export default {
    title: '抄表记录',
    props: {
      data: {
        type: Object,
        default: {}
      },
    f_meter_state: ''
    },
    data () {
      return {
        model: {
          f_userinfo_code: '',
          f_userinfo_id: '',
          f_user_name: '',
          f_user_phone: '',
          startDate: '',
          endDate: '',
          f_meter_state: ''
        },
        show: false,
        handcount: 0,
        userInfo: {},
        currentPage: 1,
        totalPage: 0,
        pageSize: 100,
        handinfo: [],
        showmodal: false
      }
    },
    ready () {
      // this.search()
      if(this.f_meter_state){
        this.model.f_meter_state = this.f_meter_state
      }
      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
      this.model.startDate = Util.toStandardDateString()
      this.model.endDate = Util.toStandardDateString()
      this.search()
    },
    methods: {
      editState (state) {
        // console.log(state)
        this.model.f_meter_state = state
        this.showmodal = false
        this.confirm()
      },
      switchHandle () {
        this.showmodal = true
      },
      switchPage (type) {
        if (type === 'last' && this.currentPage > 1) {
          this.currentPage --
          this.search()
          return
        }
        if (type === 'next' && this.currentPage < this.totalPage) {
          this.currentPage ++
          this.search()
          return
        }
      },
      confirm () {
        this.currentPage = 1
        this.search()
      },
      search () {
        let condition = '1=1'
        for (let item in this.model) {
          if (this.model[item] !== '' && item !== 'startDate' && item !== 'endDate') {
            condition += ` and ${item} like '%${this.model[item]}%'`
          }
        }
        if (this.model.startDate === '') {
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        console.log(this.model, condition)
        //模拟安卓端
        //   this.$androidUtil.bzLogic('getHandMeterInfo', {
        //     data: {
        //       f_meter_state: this.model.f_meter_state,
        //       currentPage: this.currentPage,
        //       pageSize: this.pageSize,
        //       startDate: `${this.model.startDate}`,
        //       endDate: `${this.model.endDate}`,
        //       condition: condition,
        //       f_inputtor: `${this.userInfo.name}`
        //     }
        //   }).then((result) => {
        //     // console.log(result.data)
        //     this.show = true
        //     // this.showHandInfo = true
        //     this.handinfo = result.data.data.data
        //     this.handcount = result.data.data.totalSize
        //   })

          //安卓端
          let res = this.$androidUtil.bzLogic('getHandMeterInfo', {
            data: {
              f_meter_state: this.model.f_meter_state,
              currentPage: this.currentPage,
              pageSize: this.pageSize,
              startDate: `${this.model.startDate}`,
              endDate: `${this.model.endDate}`,
              condition: condition,
              f_inputtor: `${this.userInfo.name}`
            }
          })
          console.log('res===>抄表记录', res)
          if (res.data && res.data.code === 200) {
              if (res.data.data.length > 0) {
                this.show = true
                let pages = parseInt(res.data.data.length / this.pageSize)
                this.totalPage = parseInt(res.data.totalSize % this.pageSize) !== 0 ? pages + 1 : pages
                this.handcount = res.data.totalSize
                this.handinfo = [...res.data.data]
              } else {
                // this.handinfo = [...res.data.data]
                this.handcount = res.data.totalSize
                this.show = false
              }
            } else {
            this.handinfo = []
            this.show = false
          }


      }
    },
    events: {
      'select' (val) {

        if(this.model.f_meter_state==='已抄表'){
          let tablebase = val.f_tablebase
          val.f_tablebase = val.f_tablebase
          val.f_new_tablebase = tablebase
          let lcdbase = val.f_lcd
          val.f_new_lcd = lcdbase
          val.hidden = true
          this.$dispatch('changepage', val, 'hadupload')
        }else{
          this.$dispatch('changepage', val, 'waitupload')
        }
      }
    }
  }
</script>
<style scoped>

  .search_input {
    border: 0;
    outline: none;
  }
  .app-row {
    background-color: white;
    padding: 10px 10px 3px 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .btn-font{
    font:600 16px PingFang-SC-Bold;
    color: #499EDF;
  }
  .btn-color{
    background-color: #FFFFFF;
    border-radius: 10px ;
    border: 1px solid #499EDF;
  }
  .input-font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
</style>
