<template>
  <div class="auto">
    <div class="row 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="row 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="row 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="row app-row">
      <div class="col-xs-4" style="margin-bottom: 6px">
        <img src="../../assets/地址.png" style="margin-bottom: 5px" alt="">
        <span class="text-left font">地址</span>
      </div>
      <div class="col-xs-8">
        <input type="text" class="search_input input-font" v-model="model.f_address" placeholder="请输入地址"/>
      </div>
    </div>
    <div class="row 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 text-center" style="margin-top: 20px;">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="downHand()">抄表单下载</button>
      <!--<button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="database()">数据库导出</button>-->
    </div>
    <div class="auto" style="padding-top: 10px;">
      <p class="text-warning">提示：由于抄表单可能数量过多，在点击抄表单下载按钮后请勿进行任何操作，下载完成后系统会自动提醒你！</p>
    </div>
    <!-- <div class="auto" style="padding-top: 20px;" v-if='show'>
      <p class="text-warning" style="padding: 0 10px">正在下载抄表单...</p>
    </div> -->
    <!-- <hand-info v-if="show" :data="handinfo"></hand-info> -->
    <!-- <div class="auto" v-if="!show">
      <p class="text-warning" style="padding: 0 10px">
        暂无可操作的抄表信息
      </p>
    </div> -->
    <work-busy :isbusy="isbusy"></work-busy>
  </div>



</template>
<script>
  import AppData from '../../stores/AppData'
  import * as Util from '../Util'
  import co from 'co'
  import Vue from 'vue'
  const downloadHand = function * (self, condition) {
      // let result = yield self.$androidUtil.bzLogic('downHandMeterInfo', {startDate: `${self.model.startDate}`, endDate: `${self.model.endDate}`, condition: condition, f_inputtor: `${self.userInfo.name}`})
    HostApp.__this__ = self
     self.logicWithHint('downHandMeterInfo', {startDate: `${self.model.startDate}`, endDate: `${self.model.endDate}`, condition: condition, f_inputtor: `${self.userInfo.name}`}, 'javascript:HostApp.__this__.downplanCallBack()', 1)

  }
  export default {
    title: '计划管理',
    data () {
      return {
        model: {
          startDate: '',
          endDate: '',
          f_address: ''
        },
        isbusy: false,
        userInfo: {},
        handMeterInfo: [],
        handinfo: [],
        handcount: 0
      }
    },
    ready () {
      // 获取抄表源信息
      // console.log('当前用户信息'+JSON.stringify(Vue.user))
      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
      this.model.startDate = `${Util.toStandardYearMonth()}-01`
      this.model.endDate = Util.toStandardDateString()
      this.isbusy = false
    },

    methods: {
      logicWithHint(logic, data, callback, backresult) {
        HostApp.logicWithHint({
          // logic别名，key必须为logic
          'logic': logic,
          // 回调执行方法名，key必须为callback
          'callback': callback,
          // logic执行需要的业务参数
          'data': data,
          // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
          // 执行回调方法传入key为backresult
          // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
          'backresult': backresult
        })
      },
      downplanCallBack(jo){
        if (jo.state == 'ok') {
          let result = JSON.parse(jo.result)
            if (result.data.length > 0) {
              if (result.state === 0) {
                // self.isbusy = false
                // 所有抄表单信息
              this.handcount = result.data.length
              this.handinfo = [...result.data]
              this.$showMessage(`下载抄表单信息成功，本次下载${result.data.length}条抄表单，您可前往抄表管理进行抄表！`)
            } else {
              this.$showMessage('无可下载的抄表单信息！')
            }
          } else {
            this.$showMessage('下载失败！')
          }
        }

      },
      database () {
        HostApp.backupDatabase()
      },
      downHand () {
        this.$showMessage('正在下载，请稍后！')
        console.log('1'+ this.isbusy)
        if (this.model.startDate === '') {
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        let condition = ''
        if (this.model.f_address === '') {
          condition = '1 = 1'
        } else {
          condition = `1 = 1 and f_address like '${this.model.f_address}%'`
        }

        // `${this.userInfo.name}`
        // const message = new Promise(function () {
        //   this.$showMessage('正在进行抄表单下载，请确认！', ['confirm', 'cancel']).then((res) => {
        //     if (res === 'confirm') {
        //       resolve(true)
        //     }
        //   })
        // })
        console.log('2'+ this.isbusy)
        const fun = downloadHand(this, condition)
        co(fun)

        //   let result = this.$androidUtil.bzLogic('downHandMeterInfo', {startDate: `${this.model.startDate}`, endDate: `${this.model.endDate}`, condition: condition, f_inputtor: `${this.userInfo.name}`})
        //   console.log('点击3'+ this.flag)
        //   //安卓端
        //   if (result.state === 0) {
        //     // 所有抄表单信息
        //     if (result.data.length > 0) {
        //       this.handcount = result.data.length
        //       this.handinfo = [...result.data]
        //       this.$showMessage(`下载抄表单信息成功，本次下载${result.data.length}条抄表单，您可前往抄表管理进行抄表！`)
        //       this.isbusy= false
        //     } else {
        //       this.$showMessage('无可下载的抄表单信息！')
        //       this.isbusy= false
        //     }
        //   } else {
        //     this.$showMessage('下载失败！')
        //     // this.isbusy= false
        //   }
        // }
      }
    }
  }
</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>
