<template>
  <div>
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">组织机构</label>
                  <res-select
                    :initresid='$parent.$parent.curorgid'
                    @res-select="$parent.$parent.getorg"
                    is-mul="false"
                    restype='organization'
                  >
                  </res-select>
                </div>
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_userinfo_code"
                         condition="f_userinfo_code = '{}'" placeholder='客户编号'>
                </div>
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">客户电话</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_user_phone"
                         condition="f_user_phone = '{}'" placeholder='客户电话'>
                </div>
                <div style="float: right">
                  <button class="button_search" @click="search()">查 询</button>
                  <button class="btn btn-default" @click="$parent.$parent.battchinsurance()" >批量保险收费</button>
                  <button  class="button_search button_spacing" style="width: 90px" @click="$parent.$parent.downloadFiles()">模板下载
                  </button>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.criteriaShow=!$parent.$parent.criteriaShow"
                    class="button_spacing"
                    style="float: right"></div>
                </div>
              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">客户姓名</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_user_name"
                         condition="f_user_name = '{}'" placeholder='客户姓名'>
                </div>
                <div class="col-sm-3  form-group">
                  <label for="f_ins_start_date" class="font_normal_body">开始日期</label>
                  <datepicker id="f_ins_start_date" placeholder="保费截止日期" style="width:60%"
                              v-model="model.f_ins_stop_date1"
                              :value.sync="model.f_ins_stop_date1"
                              :format="'yyyy-MM-dd'"
                              :show-reset-button="true"
                              condition="f_ins_stop_date >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="col-sm-3  form-group">
                  <label for="f_ins_stop_date" class="font_normal_body">截止日期</label>
                  <datepicker id="f_ins_stop_date" placeholder="保费截止日期" style="width:60%"
                              v-model="model.f_ins_stop_date"
                              :value.sync="model.f_ins_stop_date"
                              :format="'yyyy-MM-dd'"
                              :show-reset-button="true"
                              condition="f_ins_stop_date <= '{} 23:59:59'">
                  </datepicker>
                </div>
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">选择小区</label>
                  <v-select
                    v-model="model.f_residential_area"
                    placeholder='选择小区'
                    :value.sync="model.f_residential_area"
                    :options='$parent.$parent.residentialArea'
                    condition="f_residential_area = '{}'"
                    style="width: 60%"
                    close-on-select >
                  </v-select>
                </div>
                <div class="col-sm-3  form-group">
                  <label class="font_normal_body">客户地址</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_address"
                         condition="f_address like '%{}%'" placeholder='客户地址'>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <th>
                  <nobr>序号</nobr>
                </th>
                <th>
                  <nobr>客户编号</nobr>
                </th>
                <th>
                  <nobr>客户电话</nobr>
                </th>
                <th>
                  <nobr>小区</nobr>
                </th>
                <th>
                  <nobr>客户姓名</nobr>
                </th>
                <th>
                  <nobr>客户地址</nobr>
                </th>
                <th>
                  <nobr>截止日期</nobr>
                </th>
                <th>
                  <nobr>累计保费充值金额</nobr>
                </th>
            </template>
            <template partial='body'>
              <td style="text-align: center;">
                <nobr>{{$index + 1}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>
                  {{row.f_userinfo_code}}
                </nobr>
              </td>
              <td style="text-align: center;">
                <nobr>
                  {{row.f_user_phone}}
                </nobr>
              </td>
              <td style="text-align: center;">
                <nobr>
                  {{row.f_residential_area}}
                </nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_ins_stop_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_total_ins_charge}}</nobr>
              </td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
  <modal :show.sync="batchmoneyShow" width="500px" title="批量保险收费" v-ref:modal large backdrop="false">
    <article slot="modal-body" class="modal-body">
      <file-upload class="my-file-uploader" name="useraddressUploadFile" action="rs/file/uploadFile" tagname="确定" multiple v-ref:file></file-upload>
    </article>
    <footer slot="modal-footer" class="modal-footer">
    </footer>
  </modal>
  <modal :show.sync="progressShow" v-ref:modal backdrop="true"  width="50%" style="width:auto;" >
    <header slot="modal-header" class="modal-header">
      批量保险收费
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="progress" style="margin: 20px" >
        <div class="progress-bar progress-bar-success progress-bar-striped active" :style="{width: percent+'%'}">
          {{percent}}%
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click='progressclose'>关闭</button>
    </footer>
  </modal>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'

  export default {
    'title': '',
    data () {
      return {
        model: new PagedList('rs/sql/getInsuranceList', 20),
        // 控制查询条件显示
        criteriaShow: false,
        batchmoneyShow:false,
        progressShow:false,
        residentialArea: [],
        timer:'',
        curorgid: [this.$login.f.orgid],
        f_filialeid: this.$login.f.orgid,
        uuida:'',
        percent:0
      }
    },
    ready () {
      this.search()
    },
    methods: {
      downloadFiles(){
        let downurl='rs/downloadfile/file?filename=批量保险收费导入Excel模板';
        this.$downFile(downurl,'批量保险收费导入Excel模板.xlsx')
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      getorg (val) {
        this.f_filialeid = val[0]
      },
      selfSearch (args) {
        args.condition = `${args.condition} and ui.f_orgid = '${this.f_filialeid}'`
        this.model.search(args.condition, args.model)
        this.getaddress()
      },
      battchinsurance(){
        this.batchmoneyShow=true;
      },
      progressclose(){
        this.progressShow = false;
        if(this.timer != null){
          clearInterval(this.timer);
        }
      },
      getuuid(){
        let uuidA = '';
        var s = [];
        var hexDigits = '0123456789abcdef';
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = '4';
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = '-';
        uuidA = s.join('');
        this.uuida = uuidA;
      },
      async getaddress () {
        console.log('开始获取小区')
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'rs/sql/manage_getarealist', {
          data: {
            condition: `1=1 and s.f_orgid = '${this.f_filialeid}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
        console.log('小区', data)
        let house = []
        house.push()
        for (let row of data.data) {
          console.log('开始保存小区')
          house.push({label: row.f_residential_area, value: row.f_residential_area})
        }
        this.residentialArea = house
      }

    },
    computed: {},
    events:{
      'onFileUpload': async function (file, res) {
        if (this.batchmoneyShow) {
          this.percent = 0;
          this.getuuid();
          let param = {
            filepath: res.f_downloadpath,
            uuid: this.uuida,
            user:{
              f_operator: this.$login.f.name,
              f_operatorid: this.$login.f.id,
              f_orgid: this.$login.f.orgid,
              f_orgname: this.$login.f.orgs,
              f_depid: this.$login.f.depids,
              f_depname: this.$login.f.deps
            }
          };
          this.batchmoneyShow=false;
          try{
            await this.$resetpost('rs/logic/batchInsuranceCharge',{data: param},{resolveMsg: null, rejectMsg: null},1000).then((res)=>{
              if(res.data){
              }
            })
          }catch(error){}
          let getparam = {
            uuid: this.uuida
          }
          let self = this;
          this.progressShow=true;
          this.timer = setInterval(function(){
            self.$resetpost('/rs/logic/getBatchOperaPro',{data:getparam},{resolveMsg: null, rejectMsg: null}, 0).then((res)=>{
              if(res.data ){
                if(res.data.speed){
                  if(res.data.speed>= 100){
                    clearInterval(self.timer);
                    if(res.data.speed){
                      self.percent = 99;
                    }
                    setTimeout(()=>{
                      self.percent = 100;
                      self.progressclose();
                      self.$showMessage(`导入成功! 累计导入:${res.data.totalsum}, 成功:${res.data.successsum},失败:${res.data.errorsum},失败数据请在稽查查询中错误查询进行查看!!`);
                    },600);
                  }else{
                    self.percent = res.data.speed
                  }
                }else{
                  self.percent=0;
                }
              }
            });
          },3000);
        }
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>
