<template>
  <div @keyup.enter="search" class="flex-row" id="unit">
    <div class="basic-main">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.selfSearch' partial='criteria' v-ref:cri>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid='$parent.$parent.curorgid'
                            @res-select="$parent.$parent.getorg"
                            is-mul="false"
                            restype='organization'>
                </res-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户姓名</label>
                <input class="input_search" condition="f_user_name like '%{}%'" placeholder="客户姓名" style="width:60%"
                       style="width:60%"
                       type="text" v-model="model.f_user_name"
                />
              </div>
              <div class="col-sm-2 form-group ">
                <label class="font_normal_body">客户编号</label>
                <input class="input_search" condition="f_userinfo_id = '{}'" placeholder="客户编号" style="width:60%"
                       style="width:60%"
                       type="text" v-model="model.f_building"
                />
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">客户地址</label>
                <input class="input_search" condition="f_address like '%{}%'" placeholder="客户地址" style="width:60%"
                       style="width:60%"
                       type="text" v-model="model.f_address"
                />
              </div>
              <div class="col-sm-2" >
                <label class="font_normal_body" >开始时间</label>
                <datepicker style="width:60% " placeholder="开始时间"
                            :value.sync="model.f_delivery_date"
                            v-model="model.f_delivery_date"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            condition="f_delivery_date >= '{}'"
                ></datepicker>
              </div>
              <div class="col-sm-2" >
                <label class="font_normal_body" >结束时间</label>
                <datepicker style="width:60% " placeholder="结束时间"
                            :value.sync="model.f_operate_date"
                            v-model="model.f_operate_date"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            condition="f_operate_date <= '{}'"
                ></datepicker>
              </div>
      <div class="form-group col-sm-2 button-range" style="float: left">
                <button @click="search()" class="button_search button_spacing">查询</button>
                <button @click="$parent.$parent.submit()" class="button_export button_spacing"
                        style="width: max-content">导入到T+系统中
                </button>
               <button @click="clear()" class="button_search button_spacing">清空</button>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th style="padding: 0;border: 0">选择导入</th>
              <th>
                <nobr>客户编号</nobr>
              </th>
              <th>
                <nobr>客户姓名</nobr><s></s>
              </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;padding: 0;border: 0">
                <input :checked="$parent.$parent.$parent.ischecked(row)"
                       @change="$parent.$parent.$parent.selectOne($event,row,$index)"
                       style="width: 22px;height: 22px;"
                       type='checkbox' v-show="row.f_state === '有效'"/>
              </td>
              <td style="text-align:center"><nobr>{{row.f_userinfo_id}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_user_name}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_payment}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_address}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_state}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_delivery_date}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_preamount}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_operate_date}}</nobr></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>

</template>

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

export default {
  data () {
    return {
      model: new PagedList('rs/sql/getSellinggas', 20, {}),
      selecteddata: {
        data: []
      },
      showmergeinfo: false
    }
  },
  title: '导入到T+系统中',
  ready () {
    this.search()
  },
  computed: {
    ischecked () {
      return function (row) {
        return this.selecteddata.data.includes(row)
      }
    }
  },
  events: {
    init (val) {
      this.showmergeinfo = false
      this.search()
    }
  },
  methods: {

    search () {
      this.$refs.paged.$refs.cri.search()
    },

    async selfSearch (args) {
      this.selecteddata.data = []
      this.rowsdata = []
      this.all = false
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }

      args.condition = `${args.condition} and f_orgid = '${this.f_filialeids}'`
      await this.model.search(args.condition, args.model)
      this.length = this.model.count
    },

    // 清空
    clear () {
      this.$refs.paged.$refs.cri.model = {}
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeids = val[0]
    },
    selectOne (event, row, i) {
      if (this.all) {
        this.all = !this.all
      }
      if (event.target.checked) {
        this.selecteddata.data.push(row.f_userinfo_id)
        if (this.length === this.selecteddata.data.length) {
          this.all = true
        }
      } else {
        this.all = false
        this.selecteddata.data.splice(this.selecteddata.data.indexOf(row), 1)
      }
    },
    submit () {
      this.$showAlert('测试点击后是否可以显示数据' + this.selecteddata.data, 'danger')
      this.$showMessage('开始进行测试')

      this.showmergeinfo = true
    }
  }

}
</script>
