<template>
  <div id='ChargeList' class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <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_name"
                     condition="f_user_name = '{}'" placeholder='用户姓名'>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">是否开票</label>
              <v-select :value.sync="model.f_invoiceuse_id" v-model='model.f_invoiceuse_id' style="width:60%"
                        :options='$parent.$parent.invoiceuse' placeholder='是否开票' close-on-select @change="$parent.$parent.invoiceuseChange(model.f_invoiceuse_id)"
                        condition="f_invoiceuse_id {}" :value-single="true" :search="false">
              </v-select>
            </div>
            <div class="col-sm-2 form-group button-range" style="float: right">
              <button class="button_search button_spacing" @click="search()">查询</button>
              <button class="button_clear button_spacing" @click="clear">清空</button>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top': criteriaShow,'button_shrink_bottom': !criteriaShow}"
                   @click="criteriaShow = !criteriaShow"></div>
            </div>
          </div>
          <div class="row" v-show="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_invoice_dm" style="width:60%"
                      condition="f_invoice_dm like '%{}%'" 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_invoice_num" style="width:60%"
                      condition="f_invoice_num like '%{}%'" placeholder="发票号码"/>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">抄表日期</label>
              <datepicker placeholder="抄表开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.handstartDate"
                          :value.sync="model.handstartDate"
                          condition="f_input_date >= '{} 00:00:00'"
                          :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">&emsp;&ensp;至&ensp;&emsp;</label>
              <datepicker placeholder="抄表结束日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.handendDate"
                          :value.sync="model.handendDate"
                          condition="f_input_date <= '{} 23:59:59'"
                          :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">收费日期</label>
              <datepicker placeholder="收费开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.salestartDate"
                          :value.sync="model.salestartDate"
                          condition="f_operate_date >= '{} 00:00:00'"
                          :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">&emsp;&ensp;至&ensp;&emsp;</label>
              <datepicker placeholder="收费结束日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.saleendDate"
                          :value.sync="model.saleendDate"
                          condition="f_operate_date <= '{} 23:59:59'"
                          :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">计划月份</label>
              <datepicker placeholder="开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.planStartDate"
                          :value.sync="model.planStartDate"
                          :select-month="true"
                          :format="'yyyy-MM'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">&emsp;&ensp;至&ensp;&emsp;</label>
              <datepicker placeholder="结束日期"
                          style="width:60%"
                          v-model="model.planEndDate"
                          :value.sync="model.planEndDate"
                          :select-month="true"
                          :format="'yyyy-MM'"
              ></datepicker>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid class="list_area table_sy" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <th></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>
          <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>
            <input :id="'body'+model.pageIndex" type='checkbox' @change="$parent.$parent.$parent.selectOne($event,row,$index)"
                   :checked="$parent.$parent.$parent.ischecked(model.pageIndex-1,$index)" v-if="!row.f_invoiceuse_id"/>
          </td>
          <td>{{$index+1}}</td>
          <td>{{row.f_userinfo_code}}</td>
          <td>{{row.f_user_name}}</td>
          <td>{{row.f_operate_date}}</td>
          <td>{{row.f_input_date}}</td>
          <td>{{row.f_last_tablebase}}</td>
          <td>{{row.f_tablebase}}</td>
          <td>{{row.f_pregas}}</td>
          <td>{{row.f_preamount}}</td>
          <td>{{row.f_collection}}</td>
          <td>{{row.f_payment}}</td>
          <td>{{row.f_invoice_dm}}</td>
          <td>{{row.f_invoice_num}}</td>
          <td>{{row.f_bill_state}}</td>
        </template>
      </data-grid>
    </criteria-paged>
    <table class="table-hover">
      <tr style="position: relative" class="table-bordered">
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
          汇总信息
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
          选中条数&emsp;{{selectNumber}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
          金额合计&emsp;{{selectMoney}}
        </td>
      </tr>
    </table>
  </div>
</template>

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

  export default {
    name: 'ChargeList',
    data () {
      return {
        invoiceuse: [{label: '是', value: 'is not null'}, {label: '否', value: 'is null'}],
        model: new PagedList('rs/sql/sale_getSeliinggas', 20),
        f_orgstr: this.$login.f.orgid,
        // 要操作的用户
        rowsdata: [],
        // 控制全选
        all: [],
        // 控制单选
        radio: [],
        // 选中条数
        selectNumber: 0,
        // 选中金额
        selectMoney: 0
      }
    },
    created () {
    },
    ready () {
      this.$refs.paged.$refs.cri.model.salestartDate = this.$login.toStandardYearMonth() + '-01'
      this.$refs.paged.$refs.cri.model.f_invoiceuse_id = 'is null'
    },
    methods: {
      invoiceuseChange (val) {
        // 查询已开票记录清空选项
        if (val == 'is not null') {
          this.rowsdata = []
          this.radio = []
        }
      },
      selfSearch (args) {
        console.log(args)

        if (this.$refs.paged.$refs.cri.model.planStartDate) {
          let tmpDate = this.$refs.paged.$refs.cri.model.planStartDate
          args.condition += ` and f_hand_date >= '${tmpDate}-01 00:00:00'`
        }
        if (this.$refs.paged.$refs.cri.model.planEndDate) {
          let year = this.$refs.paged.$refs.cri.model.planEndDate.split('-')[0]
          let month = this.$refs.paged.$refs.cri.model.planEndDate.split('-')[1]
          let day = this.getLastDayOfMonth(year, month)
          args.condition += ` and f_hand_date <= '${year}-${month}-${day} 23:59:59'`
        }

        args.condition += ` and f_orgid = '${this.f_orgstr}' and f_payment <> '免交'`
        this.model.search(args.condition, args.model)
      },
      // 获得本月的最后一天。
      getLastDayOfMonth (year, month) {
        let new_year = year    // 取当前的年份
        let new_month = month++// 取下一个月的第一天，方便计算（最后一天不固定）
        if (month > 12)            // 如果当前大于12月，则年份转到下一年
        {
          new_month -= 12        // 月份减
          new_year++            // 年份增
        }
        let new_date = new Date(new_year, new_month, 1)                // 取当年当月中的第一天
        let date_count = (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate()// 获取当月的天数
      // let last_date = new Date(new_date.getTime() - 1000 * 60 * 60 * 24);//获得当月最后一天的日期
        return date_count
      },
      selectOne (event, row, i) {
        console.log('单选', event.target.checked)
        let index = this.model.pageIndex - 1
        if (!this.rowsdata[index]) {
          this.rowsdata[index] = []
        }
        if (!this.radio[index]) {
          this.radio.$set(index, [])
        }
        if (event.target.checked) {
          // 数据
          this.rowsdata[index][i] = row.id
          // 勾选
          this.radio[index].$set(i, true)
          // 判断是否全部选中
          var allState = true
          if (this.model.rows.length != this.radio[index].length) {
            allState = false
          }
          for (var state of this.radio[index]) {
            if (!state) {
              allState = false
            }
          }
          if (allState) {
            this.all.$set(index, true)
          } else {
            this.all.$set(index, false)
          }
          this.selectNumber++
          this.selectMoney = (Number(row.f_collection) + this.selectMoney).toFixed(2) - 0
        } else {
          // 数据
          this.rowsdata[index][i] = null
          // 不勾选
          this.radio[index].$set(i, false)
          // 任意取消一个则全选状态设为false
          this.all.$set(index, false)
          this.selectNumber--
          this.selectMoney = (this.selectMoney - row.f_collection).toFixed(2) - 0
        }
      }
    },
    computed: {
      ischecked () {
        return function (index, i) {
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    }
  }
</script>

<style lang="less">
  #ChargeList {
    tr {
      th {
        text-align: center;
      }
      td {
        text-align: center;
      }
    }
  }
</style>
