<template>
  <div>
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged @sort="sort">
          <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="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">组织机构</label>
                  <res-select :initresid='$parent.$parent.curorgid'
                              @res-select="$parent.$parent.getorg"
                              class="select select_list"
                              restype='organization'
                              style="width: 60%">
                  </res-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">用户编号</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_userinfo_code"
                         condition="f_userinfo_code like '%{}%'" placeholder='用户编号'>
                </div>
                <div style="float:right;margin-top: 8px" class="span">
                  <button class="button_spacing button_search" @click="$parent.$parent.updateAll()" v-if="$parent.$parent.buttonShow">批量维护</button>
                  <button class="button_spacing button_search" @click="search()">查 询</button>
                  <export-excel v-if="$parent.$parent.excelTable"
                                class="auto"
                                :data="{condition: $parent.$parent.condition}"
                                :field="$parent.$parent.getfield"
                                sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="singlling"
                                template-name='缴费记录'
                                :choose-col="true"></export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()"
                    class="button_spacing"
                    style="float: right"></div>
                </div>
              </div>
              <div class="row" v-if="$parent.$parent.criteriaShow">
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">收费编号</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.id"
                         condition="id = '{}'" placeholder='用户编号'>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <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 = '{}'" placeholder='用户姓名'>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">有无附件</label>
                  <v-select :disabled=false
                            :options='$parent.$parent.pj'
                            :value-single="true"
                            :value.sync="model.is_has_file"
                            close-on-select
                            placeholder='请选择'
                            v-model="model.is_has_file"
                            condition="is_has_file = '{}'"
                            search=fasle
                  >
                  </v-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_user_type" v-model="model.f_user_type"
                            :options='$parent.$parent.usertypes' placeholder='客户类型'
                            style="width:60%"
                            close-on-select
                            condition="f_user_type = '{}'"></v-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">开始日期</label>
                  <datepicker placeholder="开始日期" v-model="model.startDate" :value.sync="model.startDate"
                              style="width:60%"
                              :format="'yyyy-MM-dd 00:00:00'" condition="f_operate_date >= '{}'">
                  </datepicker>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">结束日期</label>
                  <datepicker placeholder="结束日期" v-model="model.endDate" :value.sync="model.endDate"
                              style="width:60%"
                              :format="'yyyy-MM-dd 23:59:59'" condition="f_operate_date <= '{}'">
                  </datepicker>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <th>
                  <nobr>全选</nobr>
                  <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1'
                         :checked="$parent.$parent.$parent.checked1"
                         @click="$parent.$parent.$parent.checkedALL()"></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>
                  <data-order field="f_operate_date" name="收费时间"></data-order>
                </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;">
                <input @keyup.enter="search" style="width:60%" type="checkbox" checked="checked" name="opertioninput"
                       @click="$parent.$parent.$parent.checked(row)"></td>
              <td style="text-align: center;">
                <nobr>{{ row.id }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_meternumber }}</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.idnumber }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_payment }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_state }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_bill_style }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_operate_date }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_accounting_date }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_pregas }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_address }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_user_type }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_preamount }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_collection }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_operator }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_depname }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_orgname }}</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>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
  <modal :show.sync="updateall" width="1200px" backdrop="true">
    <header slot="modal-header" class="modal-header">
      <h3 style="color:black" class="modal-title">批量维护</h3>
    </header>
    <article slot="modal-body" class="modal-body">
      <validator name='v'>
        <form class="form-horizontal  select-overspread">
          <div class="row">
            <div class="col-sm-6 form-input-group">
              <label class="font_normal_body col-sm-3">财务核算日期</label>
              <datepicker style="width:60%" placeholder="财务核算日期"
                          v-model="updatemodel.f_accounting_date"
                          :value.sync="updatemodel.f_accounting_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
          </div>
        </form>
      </validator>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button class="button_search btn-gn" @click="confirm">确认</button>
      <button class="button_clear btn-gn" @click="cancel">取消</button>
    </footer>
  </modal>
</template>

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

const myMap = new Map()

export default {
  'title': '',
  data () {
    return {
      usertypes: this.$appdata.getParam('客户类型') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('客户类型')] : [],
      pj: this.$appdata.getParam('是否有附件') ? [{
        label: '全部',
        value: ''
      }, ...this.$appdata.getParam('是否有附件')] : [],
      model: new PagedList('rs/sql/singlling', 20, {orderitem: '"f_operate_date DESC"'}),
      // 排序
      orderitem: 'f_operate_date desc',
      orderFields: {
        f_operate_date: 'no'
      },
      // model: new PagedList('rs/sql/singleTable_OrderBy', 20, {items: '"s.*,ui.f_userinfo_code"', tablename: '"t_sellinggas s left join t_userinfo ui on s.f_userinfo_id=ui.f_userinfo_id"', orderitem: '"f_delivery_date"'}),
      // 控制查询条件显示
      searchshow: true,
      criteriaShow: false,
      // 控制样式
      editList: false,
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      excelTable: true,
      condition: '',
      getfield: {
        'id': '收费编号',
        'f_meternumber': '表号',
        'f_userinfo_code': '用户编号',
        'f_user_name': '用户姓名',
        'idnumber': '证件号码',
        'f_payment': '收费形式',
        'f_state': '是否有效',
        'f_bill_style': '收据类型',
        'f_operate_date': '收费时间',
        'f_accounting_date': '财务核算时间',
        'f_pregas': '购气气量',
        'f_address': '地址',
        'f_user_type': '气量用途',
        'f_preamount': '用气金额',
        'f_collection': '收费金额',
        'f_operator': '操作员',
        'f_depname': '所属部门',
        'f_orgname': '所属公司'
      },
      f_orgid: '',
      checked1: true,
      map: new Map(),
      updateall: false,
      da: {
        rows: []
      },
      f_meternumber: '',
      updatemodel: {
        f_accounting_date: this.$login.toStandardTimeString()
      },
      buttonShow: false
    }
  },
  ready () {
    this.$refs.paged.$refs.criteria.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
    this.$refs.paged.$refs.criteria.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
    // this.search()
    // this.getwarehouse()
    this.getButtonShow()
  },
  events: {
    'showfiles' (val) {
      console.log(val)
    }
  },
  props: ['showMessage'],
  methods: {
    getButtonShow () {
      if (this.$login.r.find(value => value == '展示批量维护')) {
        this.buttonShow = true
      }
    },
    updateAll () {
      this.updateall = true
    },
    cancel () {
      this.updateall = false
      this.updatemodel = {
        f_accounting_date: this.$login.toStandardTimeString()
      }
    },
    async confirm () {
      let array = []
      this.map.forEach((value, key, map) => {
        array.push(map.get(key))
      })
      console.log('asdasd', array)
      if (array.length > 0) {
        let condition = `id in (''`
        array.forEach((row) => {
          condition = condition + `,'${row.id}'`
        })
        condition = condition + `)`

        console.log('asdasd', condition)
        await this.$resetpost('rs/logic/updatesellinggas', {updatemodel: this.updatemodel, condition: condition})
        this.search()
        this.cancel()
      } else {
        this.$showMessage('当前未勾选用户，将为所有查询出来的用户添加限购，确定要操作吗？', ['confirm', 'cancel']).then(async (res) => {
          if (res === 'confirm') {
            await this.$resetpost('rs/logic/updatesellinggas', {
              updatemodel: this.updatemodel,
              condition: this.condition
            })
            this.search()
            this.cancel()
          }
        })

      }
    },
    checkedALL () {
      this.checked1 = !this.checked1
      let box = document.getElementsByName('opertioninput')
      for (var i = 0; i < box.length; i++) {
        box[i].checked = this.checked1
      }
    },
    checked (val) {
      let id = val.id
      if (this.map.has(id)) {
        this.map.delete(id)
      } else {
        this.map.set(id, {id: id})
      }
    },
    mapset (array) {
      this.map.clear()
      for (let i = 0; i < array.length; i++) {
        let id = array[i].id
        this.map.set(id, {id: id})
      }
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeid = val[0]
    },
    view (row) {
      this.$parent.showupload = true
      this.$parent.row = row
    },
    init () {
      this.f_meternumber = ''
      this.da.rows = []
      myMap.clear()
    },
    cancelSet () {
      this.showSetModal = false
      this.init()
    },

    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
    },

    sort (field, rule) {
      // 将所有排序方式设为不排序，实现相互排斥
      for (let key in this.orderFields) {
        if (key === field) {
          this.orderFields[key] = rule
        } else {
          this.orderFields[key] = 'no'
        }
      }
      // 如果新规则不排序，还原为默认排序
      if (rule === 'no') {
        this.model.paramSource.orderitem = `'${this.orderitem}'`
      } else {
        this.model.paramSource.orderitem = `'${field} ${rule}'`
      }

      this.search()
    },
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    importFile () {
      this.show = true
    },
    selfSearch (args) {
      if (!this.$refs.paged.$refs.criteria.model.startDate) {
        this.$refs.paged.$refs.criteria.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
      }
      if (!this.$refs.paged.$refs.criteria.model.endDate) {
        this.$refs.paged.$refs.criteria.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
      }
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      console.log('查询。。。', this.f_orgid)
      if (this.f_orgid) {
        args.condition = `${args.condition} and f_orgid  in ${this.f_orgid}`
      }
      this.model.search(args.condition, args.model)
      this.condition = args.condition
    },
    mergeRowData (joinrows) {

    },
    // 多选框初始化
    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'}]
    }
  },
  watch: {
    'model.pageIndex' () {
      this.checked1 = false
      this.mapset(this.model.rows)
      this.checkedALL()
    },
    'model.rows' () {
      this.checked1 = false
      this.mapset(this.model.rows)
      this.checkedALL()
    },
    'checked1' (val) {
      if (val) {
        this.mapset(this.model.rows)
      } else {
        this.map.clear()
      }
    }
  }
}
</script>
<style>
.datapanel {
  color: #333;
  background-color: white;
  padding: 10px 20px;
  border-radius: 15px;
}
</style>
