<template>
  <div class="auto">

    <div class="auto">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
          <div partial>
            <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>
          </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.downloadHand(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="' 正在进行共享计划下载，请确认！' 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 { PagedList,HttpResetClass } from 'vue-client'

import Vue from 'vue'


export default {
  title: '共享计划下载',
  data() {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getShareCheckPlan`, 5, { f_fengongsi: `'${Vue.user.orgid}'` }),
      checkPlanInfo: [],
      condition: ' and 1=1 ',
      localcheckPlanInfo: []
    }
  },
  async ready() {

    await this.init()
    this.getlocalCheckPlan()
  },
  methods: {
    selfSearch(args) {
      args.condition += this.condition
      this.model.search(args.condition, args.model)
    },
    async init() {
      this.condition = ' and 1=1 '
      let classes_arr = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
        data: {
          items: 'name', tablename: 't_parameter', condition: `id in (select processid from t_paramvalue where name = '${Vue.user.name}') and name like '%组'`, orderitem: 'id'
        }
      })
      let classes_str = classes_arr.data.map(item => { return `'${item.name}'` }).join()
      let outlets_arr = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
        data: {
          items: 'name', tablename: 't_parameter', condition: `id in (select processid from t_paramvalue where name in (${classes_str})) and name like '%厅%'`, orderitem: 'id'
        }
      })
      if (classes_arr.data && classes_arr.data.length >0 && outlets_arr.data && outlets_arr.data.length >0){
        this.condition += ` and (( f_class in (${classes_str})  or f_class is null or f_class = '') or ( f_outlets in (${outlets_arr.data.map(outlets => { return `'${outlets.name.substring(3)}'` }).join()}) or f_outlets is null or f_outlets = '' ))`
      }else
      if (classes_arr.data && classes_arr.data.length >0){
        this.condition += ` and ( f_class in (${classes_str})  or f_class is null or f_class = '')`
      }else
      if (outlets_arr.data && outlets_arr.data.length >0){
        this.condition += ` and ( f_outlets in (${outlets_arr.data.map(outlets => { return `'${outlets.name.substring(3)}'` }).join()}) or f_outlets is null or f_outlets = '' )`
      }
    },
    reload() {
      //tag
      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
    },
    getlocalCheckPlan() {
      let value = this.$androidUtil.path({ alias: 'getLocalCheckPlan', data: {} })
      //tag
      this.localcheckPlanInfo = value.data
      // this.$androidUtil.path({alias: 'getLocalCheckPlan', data:{}}).then((value)=>{
      //   //tag
      //   this.localcheckPlanInfo = value.data
      // })
    },
    downloadHand(row) {
      HostApp.__this__ = this
      this.$showMessage('正在进行共享计划下载，请确认！', ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          HostApp.logicWithHint({
            'logic': 'DownCheckPlanInfo',
            'callback': 'javascript: HostApp.__this__.downloadHandCallback()',
            'data': { id: row.id },
            'backresult': 1
          })
        }
      })
    },
    downloadHandCallback(jo) {
      // 安卓端
      //tag
      if (jo.state == 'ok') {
        let result = JSON.parse(jo.result)
        if (result.state == 0) {
          if (result.data.length > 0) {
            this.getlocalCheckPlan()
            this.$showMessage('下载成功，您可前往计划导航进行查看！')
          } else {
            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>
