<template>
  <div style="flex:1;" class="flex auto">
    <ul class="nav nav-tabs" style="margin-bottom:10px">
      <li class="active"><a href="#">发票详细信息</a></li>
    </ul>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div >
            <input  type="text" class="form-control" v-model="model.f_bill_id_start" placeholder='起始票号'
                    condition="f_bill_id >= '{}'"
                    :size="model.f_bill_id_start ? model.f_bill_id_start.length  : 4">
          </div>
          <div >
            <input  type="text" class="form-control" v-model="model.f_bill_id_end" placeholder='终止票号'
                    condition="f_bill_id <= '{}'"
                    :size="model.f_bill_id_end ? model.f_bill_id_end.length  : 4">
          </div>
          <div >
            <v-select id="f_operator"
                      v-model="model.f_operator"
                      placeholder='使用人'
                      :value.sync="model.f_operator"
                      :options='$parent.$parent.operator'
                      condition= "f_operator = '{}'"
                      close-on-select>
            </v-select>
          </div>
          <div >
            <datepicker id="startDate" placeholder="开始日期"
                        v-model="model.startDate"
                        :value.sync="model.startDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyyMMdd'"
                        condition= "CONVERT(varchar(100), f_operate_date, 112) >= {}"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div >
            <!-- <label for="endDate">结束日期:</label> -->
            <datepicker id="endDate" placeholder="结束日期"
                        v-model="model.endDate"
                        :value.sync="model.endDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyyMMdd'"
                        condition= "CONVERT(varchar(100), f_operate_date, 112) <= {}"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div >
            <v-select id="f_bill_type"
                      v-model="model.f_bill_type"
                      placeholder='业务类型'
                      :value.sync="model.f_bill_type"
                      :options='$parent.$parent.billType'
                      condition= "f_bill_type = '{}'"
                      close-on-select>
            </v-select>
          </div>
          <div >
            <v-select id="f_bill_style"
                      v-model="model.f_bill_style"
                      placeholder='发票类型'
                      :value.sync="model.f_bill_style"
                      :options='$parent.$parent.billStyle'
                      condition= "f_bill_style = '{}'"
                      close-on-select>
            </v-select>
          </div>
          <!-- <div >
            <v-select id="f_filiale"
              v-model="model.f_filiale"
              placeholder='分公司'
              :value.sync="model.f_filiale"
              :options='$parent.$parent.filiale'
              condition= "f_filiale = '{}'"
              close-on-select>
          </v-select>
          </div> -->
          <div >
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div >
            <export-excel :data="{items: 'f_bill_id,f_userinfo_id,f_user_name,f_user_id,f_billdetail_id,f_bill_type,f_total_money,f_paid_money,f_bill_state,f_operator,f_operate_date,f_operator',
            orderitem: 'f_bill_id',tablename: 't_billdetail',
            condition: condition}" bean='发票使用详情导出' sqlurl="rs/logic/exportfile"></export-excel>
          </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>
          </tr>
        </template>
        <template partial='body':model="model">
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_bill_id}}</td>
            <td style="text-align:center">{{row.f_userinfo_id}}</td>
            <td style="text-align:center">{{row.f_user_id}}</td>
            <td style="text-align:center">{{row.f_user_name}}</td>
            <td style="text-align:center">{{row.f_total_money}}</td>
            <td style="text-align:center">{{row.f_paid_money}}</td>
            <td style="text-align:center">{{row.f_bill_type}}</td>
            <td style="text-align:center">{{row.f_bill_style}}</td>
            <td style="text-align:center">{{row.f_bill_state}}</td>
            <td style="text-align:center">{{row.f_operate_date}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  /**
   *阶梯水价查询列表
   */
  import { PagedList } from 'vue-client'

  export default {
    data () {
      return {
        isshow: false,
        model: new PagedList('rs/sql/singleTable_OrderBy', 50, {tablename: "'" + this.tablename + "'",
          orderitem: "'" + this.orderitem + "'",
          items: "'" + this.items + "'"}),
        xiugai: false,

        billType: this.$appdata.getParam('发票业务类型') ? [{label: '全部', value: ''}, this.$appdata.getParam('发票业务类型')] : [],
        billStyle: this.$appdata.getParam('发票打印类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('发票打印类型')] : []
      }
    },
    props: {
      data: {},
      condition: {
        type: String
      },
      tablename: {
        type: String,
        default: 't_billdetail'
      },
      orderitem: {
        type: String,
        default: 'id'
      },
      items: {
        type: String,
        default: '*'
      }
    },
    watch: {
      'data' (val) {
        if (val.id) {
          this.xiugai = true
        }
        this.condition = ` and f_bill_id >= ${val.f_start_number} and f_bill_id <= ${val.f_end_number} and f_bill_state != '未用'`
        this.search()
      }
    },
    methods: {
      selfSearch (args) {
        if (!Util.f.parent.parent.name.includes('统一资源管理')) {
          args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
        }
        args.condition += this.condition
        this.model.search(args.condition, this.model)
      },
      search () {
        this.$refs.paged.$refs.cri.search()
      }
    }
  }
</script>
