<template>
  <div class="row" >
    <div class="row" style="overflow: auto">
    <div class="col-xs-12 col-sm-12 col-md-12 row auto app-row " >
      <div class="col-xs-4 ">
        <img src="../../assets/抄表员.png" style="margin-bottom: 5px" alt="">
        <span class="text-left font">抄表员</span>
      </div>
      <div class="col-xs-8 input-font">
        {{userInfo.name}}
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 row auto app-row ">
      <div class="col-xs-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">
        <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=" col-xs-12 col-sm-12 col-md-12 row auto app-row ">
      <div class="col-xs-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">
        <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="col-xs-12 col-sm-12 col-md-12 row auto app-row ">
      <div class="col-xs-4 " style="margin-bottom: 6px">
        <img src="../../assets/chaobiao.png" style="margin-bottom: 5px" alt="">
        <span class="text-left font">抄表单条数</span>
      </div>
      <div class="col-xs-8 input-font" style="margin-top: 1px">
        {{handcount}}
      </div>
    </div>
    <div class="row auto text-center" style="margin-top: 10px;">
      <div class="auto">
        <button type="button"  class="btn btn-color btn-font btn-lg" style="width: 45%; " @click="search()">搜索</button>
      </div>
      <div class="auto" style="margin-top: 20px;" >
        <button type="button"  class="btn btn-color btn-font btn-lg" style="width: 45%;" @click="handUpdate()">全部上传</button>
      </div>

    </div>
    <div class="auto" style="padding-top: 20px;">
      <finish-hand-info v-if="showHandInfo" :data="rows"></finish-hand-info>
    </div>
    <div class="auto" v-if="!showHandInfo">
      <p class="text-warning" style="padding: 0 10px">
        暂无可操作的已抄表信息
      </p>
    </div>
    </div>
  </div>
</template>
<script>
  import AppData from '../../stores/AppData'
  import * as Util from '../Util'
  import Vue from 'vue'
  export default {
    title: '计划管理',
    data () {
      return {
        model: {
          startDate: '',
          endDate: ''
        },
        showHandInfo: false,
        show: false,
        rows: {},
        userInfo: {},
        handcount: 0
      }
    },
    ready () {
      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
      this.model.startDate = Util.toStandardDateString()
      this.model.endDate = Util.toStandardDateString()
      this.search()
    },
    methods: {
      search () {
        if (this.model.startDate === '') {
          this.model.startDate = Util.toStandardDateString()
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        let params = {
          condition: "1 = 1 and f_meter_state = '待上传'",
          startDate: this.model.startDate,
          endDate: this.model.endDate,
          f_inputtor: this.userInfo.name,
          f_meter_state : '待上传'
        }
        //模拟pc
        // this.$androidUtil.bzLogic('getHandMeterInfo', {data: params}) .then((result) => {
        //   console.log(result.data)
        //   this.show = true
        //   this.showHandInfo = true
        //   this.rows = result.data.data.data
        // })

        //安卓
        let result = this.$androidUtil.bzLogic('getHandMeterInfo', {data: params})
        // console.log('计划上传'+result)
        // console.log('计划上传'+JSON.stringify(result))
        if (result.data.code === 200) {
          if (result.data.data.length > 0) {

            this.show = true
            this.showHandInfo = true
            this.rows = [...result.data.data]
            this.handcount = this.rows.length
          }else{
            this.showHandInfo = false
            this.show = false
            this.handcount = 0
          }
        } else {
          this.$showMessage(`加载数据失败, 返回码: ${result.code}, 错误信息：${result.data}`)
          this.showHandInfo = false
          this.show = false
        }
      },
      handUpdate () {

        if(this.handcount<=0){
          this.$showMessage('暂无待上传抄表单')
          return
        }else{
          let result = this.$androidUtil.bzLogic('uploadHandMeterAll', {data: this.rows})
          if(result.state === 0){
            this.$showMessage(`${result.successcount}条抄表单上传成功，${result.failedcount}条抄表单上传失败！`)
          }
          this.search()
        }

      }
    }
  }
</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>
