<template>
  <div class="auto basic-main" style="height:95%">
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">用户编号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_user_id"
                         condition="f_userinfo_code like '%{}%'" placeholder='用户编号'>
                </div>
                <div :class="$parent.$parent.styles">
                  <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 like '%{}%'" placeholder='用户姓名'>
                </div>

                <!--<div :class="$parent.$parent.styles">-->
                <!--<label class="font_normal_body">补卡日期</label>-->
                <!--<datepicker id="f_fillcard_date" placeholder="补卡日期" style="width:60%"-->
                <!--v-model="model.f_fillcard_date"-->
                <!--:value.sync="model.f_fillcard_date"-->
                <!--:format="'yyyy-MM-dd'"-->
                <!--:show-reset-button="true"-->
                <!--condition="f_fillcard_date = '{}'">-->
                <!--</datepicker>-->
                <!--</div>-->
                <div style="float:right;margin-top: 8px" class="span">
                  <button class="button_search" @click="search()">查 询</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 class="row" v-show="$parent.$parent.criteriaShow">
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body" title="打印格式">用户类型</label>
                  <v-select id="f_user_type"
                            :value.sync="model.f_user_type"
                            v-model="model.f_user_type"
                            placeholder='用户类型'
                            :options='$parent.$parent.equipmentType'
                            condition="f_user_type = '{}'"

                            close-on-select clear-button>
                  </v-select>
                </div>
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body" title="打印格式">用气性质</label>
                  <v-select id="f_gasproperties"
                            :value.sync="model.f_gasproperties"
                            v-model="model.f_gasproperties"
                            placeholder='用气性质'
                            :options='$parent.$parent.chargestate'
                            condition="f_gasproperties = '{}'"
                            close-on-select clear-button>
                  </v-select>
                </div>
<!--                <div :class="$parent.$parent.styles">-->
<!--                  <label class="font_normal_body" title="补卡类型">补卡类型</label>-->
<!--                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_fillcard_type"-->
<!--                         condition="f_fillcard_type like '%{}%'" placeholder='补卡类型'>-->
<!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body" title="补卡类型">补卡类型</label>
                  <v-select id="f_fillcard_type"
                            :value.sync="model.f_fillcard_type"
                            v-model="model.f_fillcard_type"
                            placeholder='补卡类型'
                            :options='$parent.$parent.fillcardtype'
                            condition="f_fillcard_type like '%{}%'"
                            close-on-select clear-button>
                  </v-select>
                </div>
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body" title="卡号">卡&nbsp;&nbsp;&nbsp;号&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_card_id"
                         condition="f_card_id like '%{}%'" placeholder='卡号'>
                </div>
<!--                <div :class="$parent.$parent.styles">-->
<!--                  <label class="font_normal_body">付款方式</label>-->
<!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_payment"-->
<!--                         condition="f_payment like '%{}%'" placeholder="付款方式">-->
<!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">付款方式</label>
                  <v-select :value.sync="model.payment" :value-single="true" placeholder="付款方式"
                            v-model="model.payment"
                            class="select_list select"
                            :options='$parent.$parent.payments'
                            condition="f_payment like '%{}%'"
                            close-on-select>
                  </v-select>
                </div>
<!--                <div :class="$parent.$parent.styles">-->
<!--                  <label class="font_normal_body">票据类型</label>-->
<!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_bill_type"-->
<!--                         condition="f_bill_type like '%{}%'" placeholder='票据类型'>-->
<!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">票据类型</label>
                  <v-select :value.sync="model.bill_style" :value-single="true" placeholder='票据类型'
                            v-model="model.bill_style"
                            class="select_list select"
                            condition="f_bill_style like '%{}%'"
                            :options='$parent.$parent.bill_styles'
                            close-on-select>
                  </v-select>
                </div>
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">是否接表</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_ispick_table"
                         condition="f_ispick_table like '{}%'" placeholder='是否接表'>
                </div>
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">补卡原因</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_reason"
                         condition="f_reason like '{}%'" placeholder='补卡原因'>
                </div>
<!--                <div :class="$parent.$parent.styles">-->
<!--                  <label class="font_normal_body">补卡日期</label>-->
<!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_fillcard_date"-->
<!--                         condition="f_fillcard_date like '%{}%'" placeholder='补卡日期'>-->
<!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">补卡日期</label>
                  <datepicker  placeholder="补卡日期" style="width: 60%"
                               v-model="model.f_fillcard_date"
                               condition=" f_fillcard_date >= '{}'"
                               :value.sync="model.f_fillcard_date"
                               :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
<!--                <div :class="$parent.$parent.styles">-->
<!--                  <label  class="font_normal_body">补气状态</label>-->
<!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_fillcard_state"-->
<!--                         condition="f_fillcard_state like '%{}%'" placeholder='补气状态'>-->
<!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label  class="font_normal_body">补气状态</label>
                  <v-select id="f_state"
                            :value.sync="model.f_state"
                            v-model="model.f_state"
                            placeholder='补气状态'
                            :options='$parent.$parent.fillcardstate'
                            condition="f_state = '{}'"
                            close-on-select clear-button>
                  </v-select>
                </div>
                <!--                <div :class="$parent.$parent.styles">-->
                <!--                  <label class="font_normal_body">组织编号</label>-->
                <!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_orgid"-->
                <!--                         condition="f_orgid like '%{}%'" placeholder='组织编号'>-->
                <!--                </div>-->
                <!--                <div :class="$parent.$parent.styles">-->
                <!--                  <label class="font_normal_body">部门编号</label>-->
                <!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_depid"-->
                <!--                         condition="f_depid like '%{}%'" placeholder='部门编号'>-->
                <!--                </div>-->
                <!--                <div :class="$parent.$parent.styles">-->
                <!--                  <label class="font_normal_body">登录人编号</label>-->
                <!--                  <input type="text" style="width:60%" class="input_search" v-model="model.f_operatorid"-->
                <!--                         condition="f_operatorid like '%{}%'" placeholder='登录人编号'>-->
                <!--                </div>-->
                <div :class="$parent.$parent.styles">
                  <label class="font_normal_body">流水号&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_serial_id"
                         condition="f_serial_id like '%{}%'" placeholder='流水号'>
                </div>
              </div>
            </div>

          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <th><nobr>操作id</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>
                <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'>
              <td style="text-align: center;"><nobr>{{row.id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_userinfo_code}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_user_name}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_user_type}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_gasproperties}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_fillcard_type}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_card_id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_cardfees}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_payment}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_bill_style}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_ispick_table}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_reason}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_fillcard_date}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_state}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_orgname}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_depname}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_operator}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_serial_id}}</nobr></td>
              <td style="text-align: center;"><nobr>
                <button v-if="row.is_has_file=='是'" class="btn btn-link" @click.stop="$parent.$parent.$parent.view(row)">查看</button>
              </nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_comments}}</nobr></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">
              卡费合计:&nbsp;&nbsp;&nbsp;{{sumsmodel.f_cardfees}}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import {PagedList} from 'vue-client'
const myMap = new Map()

  export default {
    'title': '',
    data () {
      return {
        model: new PagedList('rs/sql/getFillCard', 20, {}, {
          f_cardfees: 0
        }),
        // model: new PagedList('rs/sql/saleSingleTable',   {data: {tablename: 't_sellinggas', condition: '1=1'}}),
        // 控制查询条件显示
        searchshow: true,
        bill_styles: this.$appdata.getParam('票据类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('票据类型')] : [],
        payments: this.$appdata.getParam('付款方式') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('付款方式')] : [],
        equipmentType: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
        chargestate: this.$appdata.getParam('用气性质') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')] : [],
        fillcardtype: this.$appdata.getParam('补卡类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('补卡类型')] : [],
        fillcardstate: this.$appdata.getParam('补气状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('补气状态')] : [],
        da: {
          rows: []
        },
        f_meternumber: '',
        criteriaShow: false,
        sumsmodel: {}
      }
    },
    ready () {
      this.search()
    },
    props: ['showMessage', 'styles'],
    methods: {
      init () {
        this.f_meternumber = ''
        this.da.rows = []
        myMap.clear()
      },
      cancelSet () {
        this.showSetModal = false
        this.init()
      },
      view (row) {
        this.$parent.showupload = true
        this.$parent.row = row
      },
      jump () {
        this.joinshow2 = false
        this.showSetModal = true
      },
      async getwarehouse () {

      },

      join1 (row) {
        this.joinrow = row
        this.joinshow = true
      },

      joinclose () {
        this.joinshow = false
      },
      joinclose2 () {
        this.joinshow2 = false
      },

      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      importFile () {
        this.show = true
      },
      selfSearch (args) {
        this.model.search(args.condition, args.model)
        this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
      },
      mergeRowData (joinrows) {

      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      // 多选框初始化
      selectInit () {
        this.rowsdata = []
        this.all = []
        this.radio = []
      },
      select () {
        let index = this.model1.pageIndex - 1
        console.log('全选', this.all[index])
        if (!this.radio[index]) {
          this.radio.$set(index, [])
        }
        if (this.all[index]) {
          // 数据
          this.rowsdata[index] = Object.assign([], this.model1.rows)
          // 勾选
          for (var i = 0; i < this.model1.rows.length; i++) {
            this.radio[index].$set(i, true)
          }
        } else {
          // 数据
          this.rowsdata[index] = []
          // 不勾选
          for (var i = 0; i < this.model1.rows.length; i++) {
            this.radio[index].$set(i, false)
          }
        }
      },
      selectOne (event, row, i) {
        console.log('单选', event.target.checked)
        let index = this.model1.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
          // 勾选
          this.radio[index].$set(i, true)
          // 判断是否全部选中
          var allState = true
          if (this.model1.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)
          }
        } else {
          // 数据
          this.rowsdata[index][i] = []
          // 不勾选
          this.radio[index].$set(i, false)
          // 任意取消一个则全选状态设为false
          this.all.$set(index, false)
        }
      }
    },
    computed: {
      ischecked () {
        return function (index, i) {
          // console.log("计算属性")
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      },
      distributionstate () {
        return [{label: '全部', value: ''}, {label: '待分配', value: 'is null'}, {label: '已入库', value: 'is not null'}]
      },
      payment () {
        return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('付款方式')]
      }
    }
  }
</script>

<style scoped>

</style>
