<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search'>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <label class="col-sm-12 control-label">选择年月：</label>
            <div class="col-sm-12">
              <datepicker placeholder="请选择年月"
                :value.sync="$parent.$parent.model.f_ym"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM'">
              </datepicker>
              <button class="btn btn-default" @click="search()">查询</button>
              <div class="form-group">
                部门:
                <chooser :userid.sync='$parent.$parent.f.id' resource-type="organization" :width='200' :select-data.sync='$parent.$parent.model.chosenOrg'></chooser>
              </div>
              {{$parent.$parent.model.chosenOrg.fullname}}
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>手机使用者</th>
            <th>流量Mb</th>
          </tr>
        </template>
        <template partial='body'>
          <td v-on:click.stop.prevent='$parent.$parent.$parent.dailyTraffic(row)'>{{row.f_user_name}}&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-option-horizontal"></span></td>
          <td>{{row.f_traffic}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import * as Util from '../Util'

export default {
  title: '月流量统计',
  props: ['f'],
  data () {
    let model = new PagedList('rs/rcq/月度流量统计', 20, {f_loggedOnUserId: 'this.f_loggedOnUserId', f_loggedOnOrgId: 'this.chosenOrg.id', f_ym: 'this.f_ym'})
    model.f_ym = Util.toStandardYearMonth()
    model.chosenOrg = {id:0}
    return {
      model: model,
    }
  },
  methods: {
    dailyTraffic (row) {
      this.$goto('daily-traffic', {f_userinfoid: row.f_userinfoid, f_user_name: row.f_user_name, f_ym: this.model.f_ym}, 'self')
    }
  },
  ready () {
    this.model.f_loggedOnUserId = this.f.id
    this.model.chosenOrg.id = this.f.parent.id
    this.model.search()
  }
}
</script>
