<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 col-xs-12 col-sm-6 col-md-6 app-row">
                <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-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 col-xs-12 col-sm-6 col-md-6 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 col-xs-12 col-sm-6 col-md-6 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 col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">计划名称</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_plan_name }}</p>
                  </div>
                  <div class="row col-xs-12 col-sm-6 col-md-6">
                    <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">计划时间</p>
                    <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_plan_year }}/{{row.f_plan_month}}</p>
                  </div>
                  <!--<div class="row col-xs-12 col-sm-6 col-md-6">-->
                    <!--<p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">生成人员</p>-->
                    <!--<p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_create_operator }}/{{row.f_plan_month}}</p>-->
                  <!--</div>-->
                  <!--<div class="row col-xs-12 col-sm-6 col-md-6">-->
                    <!--<p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">下发人员</p>-->
                    <!--<p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_send_operator }}/{{row.f_plan_month}}</p>-->
                  <!--</div>-->
                  <div class="row col-xs-12 col-sm-6 col-md-6 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 col-xs-12 col-sm-6 col-md-6 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="database()">数据库导出</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})
      //安卓端
      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()}/rs/sql/getShareFollowUpPlan`,5,{f_fengongsi:`'${Vue.user.f_fengongsi}'`}),
        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.path({alias: 'getLocalCheckPlan', data:{}})
        console.log(value)
        this.localcheckPlanInfo = value.data
        // this.$androidUtil.path({alias: 'getLocalCheckPlan', data:{}}).then((value)=>{
        //   console.log(value)
        //   this.localcheckPlanInfo = value.data
        // })
      },
      downHand (row) {
        // TODO: 先检查网络情况
        // this.show = true
        // this.$showAlert('正在下载抄表单,请勿操作！', 'success', 1000)
        const fun = downloadHand(this, row)
        co(fun)
      }
    },
    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>
