<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-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-3 ">
              <label   class="font_normal_body">票据使用人</label>
              <v-select v-model="model.f_user"
                        title="参数:票据使用人"
                        placeholder='票据使用人'
                        :value.sync="model.f_user"
                        :options='$parent.$parent.billusers'
                        condition= "f_bill_user = '{}'"
                        close-on-select>
              </v-select>
            </div>
            <div class="form-group col-sm-3 ">
              <label   class="font_normal_body">票据状态</label>
              <v-select v-model="model.f_bill_state"
                        placeholder='票据状态'
                        :value-single="true"
                        :value.sync="model.f_bill_state"
                        :options='$parent.$parent.billstate'
                        condition= "f_bill_state = '{}'"
                        close-on-select>
              </v-select>
            </div>
            <div style="float:right">
              <button class="button_search" style="width: 70px" @click="$parent.$parent.search()">查询</button>
              <button class="button_search" style="width: 70px" @click="$parent.$parent.add()">新增</button>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.hidden()"></div>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid style="overflow: scroll" class="list_area table_sy" :model="model" partial='list'  v-ref:grid>
        <template partial='head'>
          <tr>
            <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>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_start_number_str}}</td>
            <td style="text-align:center">{{row.f_end_number_str}}</td>
            <td style="text-align:center">
              <input  type="number" style="width:50%;" v-model="row.f_using_number_str" :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="button_search button_spacing width-60" v-if="row.f_using_number" @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>
                <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>
                  <li v-if="true">
                    <a href="#" @click.stop="$parent.$parent.$parent.cancelbillnumber(row, 'delete')">作废</a>
                  </li>
                </ul>
              </dropdown>
            </td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="show" >
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">作废{{bill.f_bill_type}}{{bill.f_bill_code}}的收据</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group row">
          <label class="col-sm-2 control-label">使用人</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" readonly v-model="bill.f_bill_user" >
          <label class="col-sm-2 control-label">状态</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" readonly v-model="bill.f_bill_state" >
        </div>
        <div class="form-group row">
          <label class="col-sm-2 control-label">起始收据</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" readonly v-model="bill.f_start_number" >
          <label class="col-sm-2 control-label">结束收据</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" readonly v-model="bill.f_end_number" >
        </div>
        <div class="form-group row">
          <label class="col-sm-2 control-label">当前使用</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" readonly v-model="bill.f_using_number" >
          <label class="col-sm-2 control-label">作废收据</label>
          <input type="text" class="col-sm-3 form-control" style="width:25%" v-model="bill.f_bill_number" >
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <div class="form-group">
          <button class="btn btn-success" @click="confirmcancel()">确认</button>
          <button type="button" class="btn btn-default" @click='close'>取消</button>
        </div>
      </footer>
    </modal>
  </div>
</template>

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

  export default {
    data () {
      return {
        criteriaShow: false,
        model: new PagedList('rs/sql/getBillInfo', 20),
        show: false,
        bill: {
          f_operator: this.$login.f.name,
          f_filiale: this.$login.f.f_fengongsi,
          f_outlets: this.$login.f.f_parentname,
          f_orgstr: this.$login.f.orgpathstr,
          f_filialeids: this.$login.f.orgid
        },
        billstate: [{label: '全部', value: ''}, {label: '启用', value: '启用'}, {label: '停用', value: '停用'}],
        billusers: this.$appdata.getParam('票据使用人')
      }
    },
    props: {
      row: {}
    },
    ready () {
      this.$refs.paged.$refs.cri.model.f_bill_state = '启用'
      this.search()
      console.log(this.$appdata.getParam('票据使用人'))
    },
    methods: {
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      add () {
        this.$dispatch('add')
      },
      search () {
        this.$refs.paged.$refs.cri.search()
        this.$dispatch('refresh')
      },
      selfSearch (args) {
        args.condition = `${args.condition} and f_orgid like '${this.$login.f.orgid}%'`
        console.log('看看此用户是否限制查询全部票据', this.$login.r.includes('限制查看全部票据'))
        if (this.$login.r.includes('限制查看全部票据')) {
          args.condition = `${args.condition} and f_bill_user = '${this.$login.f.name}'`
        }
        console.log(args.condition)
        this.model.search(args.condition, args.model)
      },
      cancelbillnumber (row) {
        this.show = true
        this.bill = row
      },
      close () {
        this.show = false
        this.bill = {
          f_operator: this.$login.f.name,
          f_filiale: this.$login.f.f_fengongsi,
          f_outlets: this.$login.f.f_parentname,
          f_orgstr: this.$login.f.orgpathstr,
          f_filialeids: this.$login.f.f_orgids
        }
      },
      async confirmcancel () {
        if ((this.bill.f_bill_number - 0) >= (this.bill.f_start_number - 0) && (this.bill.f_bill_number - 0) <= (this.bill.f_end_number - 0)) {
          await this.$resetpost('rs/logic/cancelBillNumber', {data: this.bill}, {
            warnMsg: '确定要作废该收据号？',
            resolveMsg: '已作废',
            rejectMsg: '失败'
          })
          this.close()
        } else {
          this.$showMessage('请核对作废的收据号码', ['confirm'])
        }
      },
      modifyState (row, type) {
        if (type === 'delete' && row.f_using_number > 0) {
          this.$showMessage('已使用,无法删除', ['confirm'])
        } else {
          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) {
        row.f_using_number = row.f_using_number_str - 0
        console.log('当前使用号更新处理。。。', row)
        await this.$resetpost('rs/logic/billDistribution', {data: row}, {
          warnMsg: '确定要修改当前使用票号吗？',
          resolveMsg: '修改票号成功',
          rejectMsg: '修改票号失败'
        })
        this.$dispatch('success')
      }
    }
  }
</script>
