<template>
  <div class="flex-row">
    <div @keyup.enter="search" class="basic-main">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户编号</label>
                <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                       condition="f_userinfo_code = '{}'" placeholder='客户编号'>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户姓名</label>
                <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                       condition="f_user_name = '{}'" placeholder='客户姓名'>
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body">开始时间</label>
                <datepicker id="startDate" placeholder="起始日期"
                            v-model="model.startDate"
                            :value.sync="model.startDate"
                            condition="f_createfile_date >'{}'"
                            :format="'yyyy-MM-dd'"
                            class="datepicker"
                            style="width:60%">
                </datepicker>
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body">结束时间</label>
                <datepicker id="endDate" placeholder="结束日期"
                            v-model="model.endDate"
                            :value.sync="model.endDate"
                            condition="f_createfile_date <'{}'"
                            :format="'yyyy-MM-dd'"
                            class="datepicker"
                            style="width:60%">
                </datepicker>
              </div>
              <div class="span" style="float:right;">
                  <button class="button_search button_spacing" @click="search()" v-el:cx>查询</button>
                    <button class="button_clear button_spacing" @click="$parent.$parent.batchtax()">批量销户</button>

              </div>
            </div>

          </div>
        </criteria>
        <data-grid :model="model" partial='list' class="table_sy" v-ref:grid>
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>客户编号</th>
              <th>客户姓名</th>
              <th>地址</th>
              <th>用户状态</th>
              <th>用户电话</th>
              <th>用户类型</th>
              <th>用气性质</th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align: center;">{{$index+1}}</td>
            <td style="text-align: center;">{{row.f_userinfo_code}}</td>
            <td style="text-align: center;">{{row.f_user_name}}</td>
            <td style="text-align: center;">{{row.f_address}}</td>
            <td style="text-align: center;">{{row.f_user_state}}</td>
            <td style="text-align: center;">{{row.f_user_phone}}</td>
            <td style="text-align: center;">{{row.f_user_type}}</td>
            <td style="text-align: center;">{{row.f_gasproperties}}</td>
          </template>
        </data-grid>
      </criteria-paged>
      <!--批量减免弹框-->
      <modal :show.sync="arrshow" v-ref:modal backdrop="false">
        <header slot="modal-header" class="modal-header">
          <h4 class="modal-title">请输入销户原因</h4>
        </header>
        <article slot="modal-body" class="modal-body">
          <div class="form-group">
            <input type="text" class="input_search" v-model="closeaccout" :value.sync="closeaccout"
                   placeholder='销户原因'/>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button v-show="arrshow" type="button" class="btn btn-default" @click='close'>取消</button>
          <button v-show="arrshow" type="button" class="btn btn-success" @click='create()'>确认</button>
        </footer>
      </modal>

    </div>
  </div>
</template>

<script>
  /**
   *违约金减免页面
   */
  import Vue from 'vue'
  import {PagedList, HttpResetClass} from 'vue-client'

  export default {
    title: '批量销户界面',
    data () {
      return {
        criteriaShow: false,
        model: new PagedList('rs/sql/closeaccount', 20),

        closeaccout: '',
        bathshow: false,
        arrshow: false,
        section_f_start_data: '',
        section_f_end_data: '',
        nowRowdate: '',
        nowUserfilesId: '',
        newUserId: '',
        newHandplanId: '',
        toDayDate: '',
        sectionShow: false
      }
    },
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
      this.$refs.paged.$refs.cri.search()
    },
    methods: {

      dealmsg (val) {
        val.model = this.model.model
        this.$dispatch('deal-msg', val)
      },

      hidden () {
        this.criteriaShow = !this.criteriaShow
      },

      search (args) {
        console.log('===>', args)
        console.log('=this.model==>', this.model)
        this.model.search(args.condition)
      },
      // 批量减免按钮
      batchtax () {
        this.arrshow = true
      },
      // 点击关闭
      close () {
        this.arrshow = false
      },

      // 点击批量减免确定触发
      create (row) {
        if (this.closeaccout === '' || this.closeaccout === null) {
          this.$showAlert('销户原因不能为空', 'warning', 2000)
          return
        }
        this.arrshow = false
        // 组织数据
        let batch = {
          // 批量减免金额
          f_comments: this.closeaccout,
          f_operator: Vue.$login.f.name,
          f_operatorid: Vue.$login.f.id,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          // 根据条件查询出符合批量销户的所有数据
          condition: this.model.condition
        }
        console.log('info数据', batch)
        this.$resetpost('rs/logic/closeaccout', batch, {
          resolveMsg: null,
          rejectMsg: '批量销户出错!!!'
        }).then((res) => {
          this.$refs.paged.$refs.cri.search()
        })
      }

    },
    watch: {

    }
  }
</script>
<style lang="less" scoped>

</style>

