<template>
  <div class="row" style="overflow: auto">
    <div class="row app-row auto">
      <div class="col-xs-4" style="margin-bottom: 6px">
        <img src="../../assets/chaobiao.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">抄表单条数</span>
      </div>
      <div class="col-xs-8 input-font" >
        {{handcount}}
      </div>
    </div>
    <div class="auto" style="padding-top: 20px;">
      <finish-hand-info  :data="handinfo"></finish-hand-info>
    </div>
    <div class="row app-row" 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>
</template>
<script>
  import AppData from '../../stores/AppData'
  import * as Util from '../Util'
  import Vue from 'vue'
  export default {
    title: '抄表记录',
    props: {
      //分辨平板还是pc
      // system: '',
      // 要处理的工单
      param: {
        type: Object
      },
      is:''
    },

    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()
      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
      this.model.startDate = `${Util.toStandardYearMonth()}-01`
      this.model.endDate = Util.toStandardDateString()
      //
      this.search()
    },
    watch:{

      'param.f_point_name'(val){
         this.search()
      }
    },
    methods: {
      editState (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'
        let condition = `f_street ='${this.param.f_street}' and f_gas_area = '${this.param.f_gas_area}' and f_point_name = '${this.param.f_point_name}'`
        if (this.model.startDate === '') {
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        //测试环境
        // this.$androidUtil.bzLogic('getUnHandMeterInfo', {
        //   data: {
        //     currentPage: this.currentPage,
        //     pageSize: this.pageSize,
        //     startDate: `${this.model.startDate}`,
        //     endDate: `${this.model.endDate}`,
        //     condition: condition,
        //     f_inputtor: `${this.userInfo.name}`
        //   }
        // })
        //     .then((res)=>{
        //   this.show = true
        //   let pages = parseInt(res.data.totalSize / this.pageSize)
        //   this.totalPage = parseInt(res.data.totalSize % this.pageSize) !== 0 ? pages + 1 : pages
        //   this.handcount = res.data.leftSize
        //   this.handinfo = [...res.data.data]
        // })


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



      }
    },
    events: {
      'select' (val) {
        if(val.f_tablebase){
          let tablebase = val.f_tablebase
          val.f_tablebase = val.f_last_tablebase
          val.f_new_tablebase = tablebase
        }
        let lcdbase = val.f_lcd
        val.f_new_lcd = lcdbase
        this.$dispatch('changepage', val, 'selectuser')
      }
    }
  }
</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;
  }
  .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>
