<template>

    <criteria-paged :model="model" v-ref:paged>
    <p class="bg-info text-center" style="padding: 8px;font-size: 20px">欠费信息</p>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
        <div class="form-horizontal select-overspread container-fluid auto" novalidate  partial>
          <div class="row">
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户状态</label>
              <v-select id=""
                        v-model="$parent.$parent.f_whether"
                        placeholder='用户状态'
                        :value.sync="$parent.$parent.f_whether"
                        :options='$parent.$parent.whether'
                        style="width: 60%"
                        close-on-select >
              </v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">气表类型</label>
              <v-select :value.sync="model.f_meter_classify" v-model="model.f_meter_classify"
                        :options='$parent.$parent.meters' placeholder='气表类型'
                        close-on-select
                        condition="f_meter_classify = '{}'"
                        style="width: 60%"
                        default-value="'机表'">

              </v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户类型</label>
              <v-select :value.sync="model.f_user_type" v-model="model.f_user_type"
                        :options='$parent.$parent.getusertype' placeholder='用户类型'
                        close-on-select
                        condition="f_user_type = '{}'"
                        style="width: 60%">

              </v-select>
            </div>

            <div class="span" style="float:right;">
              <button class="button_search button_spacing width-60" @click="search()" v-el:cx>查询</button>
              <button class="button_clear button_spacing width-60" @click="$parent.$parent.arrcreate()">生成短信</button>
              <button v-show="$parent.$parent.rollback" class="button_clear button_spacing width-60" @click="$parent.$parent.retrun()"  v-el:cba>返回</button>

              <div
                :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                @click="$parent.$parent.hidden()" 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>
              <datepicker placeholder="开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">结束日期</label>
              <datepicker placeholder="结束日期"
                          style="width:60%"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户编号</label>
              <input  type="text" class="form-control" v-model="model.f_userinfo_code" placeholder='用户编号' v-filter v-figure_filter
                      condition="f_userinfo_code = '{}'" v-next-el='username'  style="width: 60%"
                      :size="model.f_userinfo_code ? model.f_userinfo_id.length  : 4">
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">用户姓名</label>
              <input  type="text" class="form-control" v-model="model.f_user_name" placeholder='用户姓名'
                      condition="f_user_name like '{}'" v-next-el='area'  style="width: 60%"
                      :size="model.f_user_name ? model.f_user_name.length * 2 : 4">
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">选择小区</label>
              <v-select :value.sync="model.f_residential_area" :value-single="true"
                        class="select_list select"
                        style="width: 60%"
                        condition="f_residential_area like '%{}%'"
                        :options='$parent.$parent.residentialArea' placeholder='选择小区'
                        close-on-select search="true">
              </v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">付款类型</label>
              <v-select :value.sync="model.f_payment" :value-single="true"
                        class="select_list select"
                        v-model="model.f_payment"
                        style="width: 60%"
                        :options='$parent.$parent.chonetype' placeholder='付款类型'
                        condition="f_cost_type like '{}'"
                        close-on-select search="true">
              </v-select>
            </div>
            <div class="form-group col-sm-3">
              <label class="font_normal_body">应交金额</label>
              <v-input :value.sync="$parent.f_oughtfee" :expression.sync = 'model.f_oughtfee'
                       condition="f_oughtfee {}" v-model="model.f_oughtfee"  style="width: 60%"
                       placeholder="应交金额" v-next-el="cx" ></v-input>
            </div>
          </div>



        </div>
      </criteria>
      <data-grid  :model="model" partial='list' class="table_sy"  v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <input type="checkbox"  @click="$parent.$parent.$parent.isAll(model.pageIndex)">
            </th>
            <th>序号</th>
            <th>用户信息</th>
            <th>用户编号</th>
            <th>用户类型</th>
            <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">
            <input type="checkbox" v-model="$parent.$parent.$parent.ids"
                   :value="row.f_userinfo_id">
          </td>
          <td>{{$index+1}}</td>
          <td style="text-align:center">{{row.f_userinfo_id}}&nbsp;&nbsp;{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone}}</td>
          <td style="text-align:center">{{row.f_userinfo_code}}</td>
          <td style="text-align:center">{{row.f_user_type}}</td>
          <td style="text-align:center">{{row.f_residential_area}}</td>
          <td style="text-align:center">{{row.f_input_date}}</td>
          <td style="text-align:center">{{row.f_last_tablebase.toFixed(2)}}</td>
          <td style="text-align:center">{{row.f_tablebase.toFixed(2)}}</td>
          <td style="text-align:center">{{row.f_oughtamount.toFixed(2)}}</td>
          <td style="text-align:center">{{row.f_oughtfee.toFixed(2)}}</td>
          <td style="text-align:center">{{row.f_balance.toFixed(2)}}</td>
          <td style="text-align:center">{{row.f_oughtfee_all.toFixed(2)}}</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">
          {{msg}}
        </div>
        <div class="form-group" style="margin-top: 80px">
          <label class="label-control">发送截至日期</label>
          <!-- <input  type="text" class="form-control" v-model="downDate" placeholder='下发日期'> -->
          <datepicker  placeholder="发送截至日期" :value.sync="arrdownDate" :disabled-days-of-Week="[]" :format="'yyyy-MM-dd HH:mm:ss'" :show-reset-button="reset"></datepicker>
        </div>
        <!-- <div class="form-group" style="color: red;" v-if="dateError">
          日期格式错误
        </div> -->
        <!-- <div class="form-group">
          为保证数据统一，下发日期格式统一为yyyyMM，例如："201709"
        </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>
</template>

<script>
  /**
   *阶梯水价查询列表
   */
  import { PagedList, HttpResetClass } from 'vue-client'
  import Vue from 'vue'
  export default {
    data () {
      return {
        model: new PagedList('rs/sql/arrearsQuery', 50, {startDate: 'this.model.startDate', endDate: 'this.model.endDate',condValue:'` 1=1 `',orderitem: '"' + this.orderitem + '"'}),
        definedShow: false,
        userdefinedMessage: '',
        arrdownDate: '',
        arrshow: false,
        // 小区
        residentialArea: [],
        chonetype: this.$appdata.getParam('付款类型'),
        criteriaShow: false,
        ids: [],
        pages: [],
        whether: [{ label: '欠费', value: '欠费' },
          { label: '全部', value: '全部' }],
        f_whether: '欠费',
        meters: [
          {label: '全部', value: ''},
          {label: '机表', value: '机表'},
          {label: '远传表', value: '远传表'}
        ],
        getusertype: [{ label: '全部', value: '' },
          { label: '民用', value: '民用' },
          { label: '非民用', value: '非民用' }],
        filialeName: [],
        outletsname: [],
        filiale: '',
        filialetype: '',
        isFirst: true,
        msg: `'[梅河燃气]用户编号:'+f_userinfo_code+'截止目前为止，表数'+f_tablebase+'欠费'+f_oughtfee
               +'元,为了不影响您正常用气，请及时缴费，详询：4660001 。'`
      //   msg: `'尊敬的客户:您'+f_hand_date+'-'
      // +f_hand_date +'月份燃气费为'
      // +f_oughtfee
      // +'元(不含违约金),至今尚未缴费,用户地址：'+f_address+',用户名:'+f_user_name+',用户编号:'+f_userinfo_code+',请您尽快前往我司'+f_depname+'或通过微信公众号（梅河燃气) 进行缴费，逾期未交将收取违约金。如您已缴费，请忽略，谢谢！'`
      }
    },
    props: {
      orderitem: {
        type: String,
        default: 'p.f_userinfo_id'
      },
      rollback: false
    },
    ready () {
      this.getaddress()
      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.search({condition: `1=1 `, model: this.$refs.paged.$refs.cri.model})
    },
    watch: {
      'f_whether' (val) {
        if (val[0] === '全部') {
          this.f_whether = '欠费'
          this.$dispatch('all', '全部')
        }
      }
    },
    methods: {
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      async  getaddress () {
        console.log('开始获取小区')
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'rs/sql/address_getarealist', {
          data: {
            condition: '1=1'
          }
        }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
        console.log('小区', data)
        let house = []
        for (let row of data.data) {
          console.log('开始保存小区')
          house.push({label: row.f_residential_area, value: row.f_residential_area})
        }
        this.residentialArea = house
      },

      retrun () {
        this.alllist = false
        this.$dispatch('allchange6')
      },
      cleanOutlet () {
        this.outletsname = []
      },
      create () {
        this.arrshow = false
        this.model.condition = this.model.condition + " and f_orgid = \'" + Vue.$login.f.orgid + "\'"
        if (this.ids.length !== 0) {
          this.model.condition = this.model.condition + 'and f_userinfo_id in (' + this.ids + ')'
        }
        if (this.arrdownDate === '' || this.arrdownDate === null) {
          this.$showAlert('发送截至时间不能为空！', 'danger', 3000)
        } else {
          console.log('this.model.condition=====>', this.model.condition)
          this.$dispatch('create', this.model.condition, this.userdefinedMessage, this.arrdownDate,null,this.$refs.paged.$refs.cri.model.startDate,this.$refs.paged.$refs.cri.model.endDate)
        }
      },
      search (args) {
        args.condition = `${args.condition} and f_orgid = ` + `'${Vue.$login.f.orgid}'`
        if (args.model.f_meter_brand && args.model.f_meter_brand.length > 0) {
          if (args.model.f_meter_brand[0].f_meter_brand) {
            args.condition = `${args.condition} and f_meter_brand = '${args.model.f_meter_brand[0].f_meter_brand}'`
          }
        }
        console.log('查看条件', args.condition)
        this.model.search(args.condition, args.model)
        if (this.isFirst) {
          this.isFirst = false
        } else {
          this.$dispatch('allchange5')
          this.alllist = true
        }
      },

      arrcreate () {
        this.arrshow = true
      },
      defined () {
        this.definedShow = true
      },
      close () {
        this.arrshow = false
        this.definedShow = false
      },
      isAll (page) {
        if (this.pages.includes(page)) { // 已添加,取消动作
          // 从ids中删除本页所有数据的ids
          this.addOrRemove(false)
          this.pages = this.pages.filter((item) => {
            return item !== page
          })
        } else { // 未添加
          this.pages.push(page) // 添加id，添加动作
          this.addOrRemove(true)
        }
      },
      addOrRemove (is) {
        let that = this
        if (is) { // 添加本页所有数据到ids中
          this.model.rows.forEach((row) => {
            if (!that.ids.includes(row.f_userinfo_id)) {
              that.ids.push(row.f_userinfo_id)
            }
          })
        } else { // 从ids中取消所有的数据
          this.model.rows.forEach((row) => {
            that.ids = that.ids.filter((item) => {
              return item !== row.f_userinfo_id
            })
          })
        }
      }
    },
    computed: {

    }
  }
</script>
<style>
  .form-group{
    height: 30px;
  }
</style>
