<template>
  <div class="auto" style="height: 100%">
    <criteria-paged :model="model"  v-ref:paged :pager="false">
      <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 class="font text-left">上传状态：</label>
              </div>
              <div class="col-xs-8" >
                <v-select :value.sync="$parent.$parent.model.f_upload_state" class="input-font"
                          :options='$parent.$parent.upload_state' placeholder='请选择上传状态' :value-single="true"
                          v-model="$parent.$parent.model.f_upload_state" close-on-select clear-button></v-select>
              </div>
            </div>
            <!--            <button type="button" class="btn btn-lg btn-font"  style="position: fixed;right: 3%; bottom: 20%;" @click="$parent.$parent.search">加载更多</button>-->
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 30%;" @click="$parent.$parent.search(1)">查询</button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 30%;" @click="$parent.$parent.reload">本页重传</button>
            </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 font row-sty">
                  <div class="col-xs-3"><b>任务名称:</b></div>
                  <div class="col-xs-9 row-text-sty">{{ row.f_task_name }}</div>
                </div>
                <div class="row font row-sty">
                  <div class="col-xs-3"><b>图片名称:</b></div>
                  <div class="col-xs-9 row-text-sty">{{ row.f_tag1 }}</div>
                </div>
                <div class="row font row-sty">
                  <div class="col-xs-3"><b>发送时间:</b></div>
                  <div class="col-xs-9 row-text-sty">{{ row.f_create_time }}</div>
                </div>
                <div class="row font row-sty">
                  <div class="col-xs-3"><b>上传状态:</b></div>
                  <div class="col-xs-9 row-text-sty" :style="{color:row.f_task_status=='执行失败'?'red':'green'}">{{ row.f_task_status }}</div>
                </div>
                <!--                <div class="row font row-sty">
                                  <div class="col-xs-3"><b>图片:</b></div>
                                  <div class="col-xs-9 row-text-sty"><img style="width: 100px" :src="'http://newimg/storage/emulated/0/Download/safecheck/'+row.f_tag1"></div>
                                </div>-->
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <pager :page-index="model.pageIndex"
           :model="model" @page-changed='search' :count='model.count' :page-size.sync='model.pageSize' :attach="attach" :simple="simple">
    </pager>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
import Vue from 'vue'
import LocalPagedList from "../../plugins/LocalPagedList";

export default {
  title: '上传进度',
  data () {
    return {
      model:{
        rows:[],
        pageIndex:1,
        count:0,
        pageSize:50
      },
      showModal:false,
      signs: [
        {label:'请选择录入状态', value:''},
        {label:'录入', value:'1'},
        {label:'非录入', value:'0'},
      ],
      upload_state: [
        {label: '全部', value: ''},
        {label: '执行失败', value: '执行失败'},
        {label: '执行成功', value: '执行成功'},
      ],
      f_user_states: [
        {label:'请选择档案状态', value:''},
        {label:'正常', value:'正常'},
        {label:'点火', value:'点火'},
      ],
      f_check_types: [
        {label:'请选择安检类型', value:''},
        {label:'应检', value:'应检'},
        {label:'超期', value:'超期'},
      ],
      pageIndex:1
    }
  },
  ready () {
    this.model.f_filialeid=Vue.user.orgid
    this.search()
    // this.$refs.paged.$refs.cri.search()
  },
  computed: {
    selected () {
      return this.$refs.paged.$refs.grid.selected
    }
  },
  methods:{
    reload(){
      let param = {
        rows: this.model.rows
      }
      let paramStr = JSON.stringify(param)
      // 多长截断一次
      let subLength = 800
      for (let i = 0; i < paramStr.length; i += subLength) {
        HostApp.param_cache(paramStr.substr(i, subLength))
      }
      HostApp.__this__ = this
      HostApp.syncLogic({
        // logic别名，key必须为logic
        'logic': 'photoRetransmission',
        // 回调执行方法名，key必须为callback
        'callback': 'javascript:HostApp.__this__.saveCallBack()',
        // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
        // 执行回调方法传入key为backresult
        // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
        'backresult': 1
      })
    },
    saveCallBack(jo){
      if(jo.state == 'ok'){
        let res = JSON.parse(jo.result)
        console.log('保存结果===》'+JSON.stringify(res))
        if(res.code == 200){
          this.$showMessage(`重新上传完成,本次成功重新上传成功${res.successCon}条,失败${res.errorCon}条!`)
        }else{
          this.$showMessage(`上传失败，请稍后再试!`)
        }
      }
    },
    search(pageIndex){
      this.model.pageIndex=pageIndex?pageIndex:1
      let condition=`f_tag3='${Vue.user.id}'`
      if(this.model.f_upload_state){
        condition += ` and f_task_status = '${this.model.f_upload_state}'`
      }
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/api/af-task/logic/getProgress`, {
        condition: condition,
        pageNo: this.model.pageIndex,
        pageSize: this.model.pageSize
      }, {resolveMsg: null, rejectMsg: null}).then(res=>{
        console.log(res.data)
        this.model.count=res.data.count
        this.model.rows=res.data.value
      })
    },
    getNewOrder(){
      this.$refs.paged.$refs.cri.search()
    },
    // inspect (info){
    //   info.id = ''
    //   info.f_state = '未检'
    //   info.f_no_checkplan = '无计划安检'
    //   console.log("----------INFO---------"+JSON.stringify(info))
    //   this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/sql/查询计划项表信息`,{data:{f_userid:info.f_userinfo_id}}).then((response)=>{
    //     console.log(JSON.stringify(response))
    //     info['f_plan_meters'] = response.data
    //     var pardate = {
    //       _this:this,
    //       tittle:'安检详情',
    //       safe:true
    //     }
    //     this.$dispatch('gotoson',pardate)
    //     if(info.f_user_type=='民用'){
    //       this.$goto('safecheck-order-v', {item: info, role: 'inspect'}, 'self', this.reload)
    //     }else if(info.f_user_type=='非民用'){
    //       this.$goto('safecheck-order-v-cli', {item: info, role: 'inspect'}, 'self', this.reload)
    //     }else{
    //       this.$showMessage('当前用户类型不明确，请联系管理员！')
    //     }
    //
    //
    //   }).catch((err)=>{
    //     this.$showMessage('网络异常，请稍后再试！')
    //   })
    // }
  }
}
</script>
<style scoped>
.row-text-sty{
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略符号 */
}
.row-sty{
  margin-top: 8px;
}
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  display: flex;
  align-items: center;
}
.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{
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
</style>
