<template>
  <div class="auto">

    <div class="auto">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='search' v-ref:cri>
          <div partial>
            <form>
              <div class="row app-row">
                <div class="col-xs-4">
                  <img src="../../assets/档案信息.png" style="width: 20px;margin-bottom: 5px" alt="">
                  <label for="f_plan_name" class="font text-left">计划名称：</label>
                </div>
                <div class="col-xs-8" >
                  <input id="f_plan_name" class="search_input input-font"
                         v-model="model.f_plan_name" condition="f_plan_name like '%{}%'" />
                </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="search">查询</button>
              </div>
              <!--<div class="row app-btn">-->
              <!--<button class="btn btn-primary col-xs-6" type="button"  @click="search"><span class="glyphicon  glyphicon-search" style="margin-right: 20px;">查询</span></button>-->
              <!--</div>-->
              <div style="height:30px;"></div>
            </form>
          </div>
        </criteria>
        <list :model="model" partial='list'>
          <div partial>
            <div class="auto app-text" style="margin-top: 5px;">
              <div class="panel" style="padding: 10px 10px 5px 10px;">
                <div class="panel-body panel-self">
                  <div class="row">
                    <p class="panel-title col-xs-4 text-left font">计划名称</p>
                    <p class="panel-title col-xs-8 text-left input-font">{{ row.f_plan_name }}</p>
                  </div>
                  <div class="row">
                    <p class="panel-title col-xs-4 text-left font">计划时间</p>
                    <p class="panel-title col-xs-8 text-left input-font">{{ row.f_plan_year }}/{{row.f_plan_month}}</p>
                  </div>
                  <!--<div class="row">-->
                  <!--<p class="panel-title col-xs-4 text-left font">生成人员</p>-->
                  <!--<p class="panel-title col-xs-8 text-left input-font">{{ row.f_create_operator }}/{{row.f_plan_month}}</p>-->
                  <!--</div>-->
                  <!--<div class="row">-->
                  <!--<p class="panel-title col-xs-4 text-left font">下发人员</p>-->
                  <!--<p class="panel-title col-xs-8 text-left input-font">{{ row.f_send_operator }}/{{row.f_plan_month}}</p>-->
                  <!--</div>-->
                  <div class="row text-right" >
                    <button type="button" class="btn yybtn-color" v-on:click.stop.prevent='$parent.$parent.$parent.downHand(row)' v-if="$parent.$parent.$parent.isDown(row)">下载</button>&nbsp;
                  </div>
                </div>
              </div>

            </div>
          </div>
        </list>
      </criteria-paged>
    </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>-->
    <!--&lt;!&ndash;<button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="dat abase()">数据库导出</button>&ndash;&gt;-->
    <!--</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> -->
  </div>
  <!--<back-page :need-back='true'  @flag="$back()"></back-page>-->
</template>
<script>
import AppData from '../../stores/AppData'
import { PagedList } from 'vue-client'
import * as Util from '../Util'
import co from 'co'
import Vue from 'vue'
const downloadHand = function * (self, row) {
  let res = yield self.$showMessage('正在进行共享计划下载，请确认！', ['confirm', 'cancel'])
  let flag = false
  if (res === 'confirm') {
    flag = true
  }
  if (flag) {
    let result = yield self.$androidUtil.bzLogic('DownCheckPlanInfo', {id: row.id})
    HostApp.param_cache(paramStr.substr(i, subLength))
    HostApp.__this__ = this
    HostApp.syncLogic({
      // logic别名，key必须为logic
      'logic': 'DownCheckPlanInfo',
      // 回调执行方法名，key必须为callback
      'callback': 'javascript:HostApp.__this__.uploadCallBack()',
      // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
      // 执行回调方法传入key为backresult
      // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
      'backresult': 1
    })
    //安卓端
    if (result.state === 0) {
      if (result.data.length > 0) {
        self.getlocalCheckPlan()
        self.$showMessage(`下载成功，您可前往计划导航进行查看！`)
      } else {
        self.$showMessage('无可下载的共享计划！')
      }
    } else {
      self.$showMessage('下载失败！')
    }
    //PC端模拟安卓
    // if (result.data.state === 0) {
    //   console.log(result.data.data)
    //   if (result.data.data.length > 0) {
    //     self.handcount = result.data.data.length
    //     self.handinfo = [...result.data.data]
    //     self.$showMessage(`下载成功`)
    //     self.reload()
    //   } else {
    //     self.$showMessage('无可下载的共享计划！')
    //   }
    // } else {
    //   self.$showMessage('下载失败！')
    // }
  }
}

export default {
  title: '共享计划下载',
  data () {
    return {
      model: new PagedList( `${this.$androidUtil.getProxyUrl()}/api/af-safecheck/sql/getShareCheckPlan`,5,{f_fengongsi:`'${Vue.user.orgid}'`}),
      checkPlanInfo: [],
      localcheckPlanInfo:[]
    }
  },
  ready () {
    // Vue.user.f_fengongsi = '中海油.海南分公司'
    this.getlocalCheckPlan()
  },
  methods: {
    reload () {
      console.log('页面刷新 ')
      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
    },
    getlocalCheckPlan () {
      let value = this.$androidUtil.bzLogic('getLocalShareCheckPlan',{condition: ''})
      console.log(value)
      this.localcheckPlanInfo = value.data
      // this.$androidUtil.path({alias: 'getLocalCheckPlan', data:{}}).then((value)=>{
      //   console.log(value)
      //   this.localcheckPlanInfo = value.data
      // })
    },
    async downHand (row) {
      // TODO: 先检查网络情况
      // this.show = true
      // this.$showAlert('正在下载抄表单,请勿操作！', 'success', 1000)
      let res = await this.$showMessage('正在进行共享计划下载，请确认！', ['confirm', 'cancel'])
      if (res === 'confirm') {
        HostApp.__this__ = this
        HostApp.param_cache(JSON.stringify({id: row.id}))
        HostApp.syncLogic({
          // logic别名，key必须为logic
          'logic': 'DownCheckPlanInfo',
          // 回调执行方法名，key必须为callback
          'callback': 'javascript:HostApp.__this__.downLoadCallBack()',
          // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
          // 执行回调方法传入key为backresult
          // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
          'backresult': 1
        })
      }
    },
    downLoadCallBack(jo){
      console.log('====》' + JSON.stringify(jo))
      if (jo.state == 'ok') {
        let result = JSON.parse(jo.result)
        console.log('下载结果的f_paper_id===》' + JSON.stringify(result))
        if (result.state === 0) {
          if (result.data.length > 0) {
            this.getlocalCheckPlan()
            this.$showMessage(`下载成功，您可前往计划导航进行查看！`)
          } else {
            this.$showMessage('无可下载的共享计划！')
          }
        } else {
          this.$showMessage('下载失败！')
        }
      }
    }
  },
  computed:{
    isDown(){
      return function (row) {
        for (let info of this.localcheckPlanInfo) {
          if(info.id == row.id){
            return false
          }
        }
        return true
      }
    }
  }
}
</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;
}

</style>
