<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div >
            <v-select v-model="model.f_user"
                      placeholder='票据使用人'
                      :value.sync="model.f_user"
                      :options='$parent.$parent.billusers'
                      condition= "f_bill_user = '{}'"
                      close-on-select>
            </v-select>
          </div>
          <div >
            <button class="btn btn-success" @click="$parent.$parent.search()">查询</button>
          </div>
          <div >
            <button class="btn btn-success" @click="$parent.$parent.add()">新增</button>
          </div>
        </div>
      </criteria>
      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <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>票据状态</th>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_start_number}}</td>
            <td style="text-align:center">{{row.f_end_number}}</td>
            <td style="text-align:center">
              <input  type="number" style="width:50%;" v-model="row.f_using_number" :disabled="row.f_using_number > row.f_end_number"
                      v-next-el="{id: $index+1}" @click.stop  :id="$index" @blur="$parent.$parent.$parent.updateNumber(row)"></td>
            <td style="text-align:center">{{row.f_total_number}}</td>
            <td style="text-align:center">{{row.f_bill_code}}</td>
            <td style="text-align:center">{{row.f_bill_type}}</td>
            <td style="text-align:center">{{row.f_bill_user}}</td>
            <td style="text-align:center">{{row.f_distribution_person}}</td>
            <td style="text-align:center">{{row.f_distribution_date}}</td>
            <td style="text-align:center">{{row.f_use_type}}</td>
            <td style="text-align:center">
              <button class="btn btn-link" @click.stop="$parent.$parent.$parent.viewDetail(row)">查看</button>
            </td>
            <td style="text-align:center">已{{row.f_bill_state}}</td>
            <td style="text-align:center">
              <dropdown v-if="row.f_using_number != row.f_end_number">
                <button type="button" data-toggle="dropdown" style="border: 0px;background: none;">
                  <span class="glyphicon glyphicon-th-list" style="position: inherit;"></span>
                </button>
                <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
                  <li v-if=" row.f_bill_state ==='停用'" >
                    <a href="#" @click.stop="$parent.$parent.$parent.modifyState(row, 'startup')">启用</a>
                  </li>
                  <li v-if=" row.f_bill_state ==='启用'" >
                    <a href="#" @click.stop="$parent.$parent.$parent.modifyState(row, 'breakoff')">停用</a>
                  </li>
                  <li v-if=" row.f_bill_state ==='停用'" >
                    <a href="#" @click.stop="$parent.$parent.$parent.modifyState(row, 'delete')">删除</a>
                  </li>
                </ul>
              </dropdown>
            </td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  /**
   *阶梯水价查询列表
   */
  import { PagedList } from 'vue-client'
  export default {
    data () {
      return {
        model: new PagedList('rs/sql/getBillInfo', 20)
      }
    },
    props: {
      row: {}
    },
    ready () {
      this.search()
    },
    methods: {
      add () {
        this.$dispatch('add')
      },
      search () {
        this.$refs.paged.$refs.cri.search()
        this.$dispatch('refresh')
      },
      selfSearch (args) {
        args.condition = `${args.condition} and f_filialeids like '${this.$login.f.f_orgids}%'`
        this.model.search(args.condition, args.model)
      },
      modifyState (row, type) {
        this.$BillService.modifyState(row, type)
          .then((res) => {
            this.$dispatch('success', '发票管理', this.data, res)
          }).catch((error) => {
          this.$dispatch('error', '发票管理', this.data, error)
        })
      },
      viewDetail (val) {
        this.$dispatch('view', val)
      },
      async updateNumber (row) {
        console.log('当前使用号更新处理。。。', row)
        await this.$resetpost('rs/logic/billDistribution', {data: row}, {warnMsg: '确定要修改当前使用票号吗？', resolveMsg: '修改票号成功', rejectMsg: '修改票号失败'})
        this.$dispatch('success')
      }
    },
    computed: {
      'billusers' () {
        let rs = new Array()
        for (let i = 0; i < this.$login.f.f_paperUseman.length; i++) {
          let temp = {
            label: this.$login.f.f_paperUseman[i].name,
            value: this.$login.f.f_paperUseman[i].name
          }
          rs.push(temp)
        }
        return rs
      }
    }
  }
</script>
