<template>
  <div class="flex" style="justify-content: space-between;">
    <div @keyup.enter="search" style="">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div style="float: right">
                <button @click="search()" class="button_search" style="margin-right: 10px" v-el:cba>查询</button>
                <print-data :defaultfield="$parent.$parent.defaultfield" :field="$parent.$parent.fields"
                            :is-selected="true" :model="$parent.$parent.printModel"
                            @print-data="$parent.$parent.print()" print-name="用户设备查询"></print-data>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" class="list_area table_sy" 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>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr>
              <td style="text-align: center;">
                <nobr>{{ row.f_devices_type }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_devices_no }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_brand }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_devices_model }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_pipe_type }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_input_person }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_install_type }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_input_date }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_make_date }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_userinfodevices_state }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{ row.f_comments }}</nobr>
              </td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>

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

export default {
  title: '用户设备查询',
  data () {
    return {
      condition: '1=1',
      model: new PagedList('rs/sql/singleTable_OrderBy', 8, {
        items: '"*"',
        tablename: '"t_devices"',
        orderitem: '"id"'
      }),
      // 控制单选
      radio: [],
      // 选中的页
      all: [],
      // row数据
      rowsdata: [],
      fields: {
        'f_devices_type': '设备类型',
        'f_devices_no': '设备编号',
        'f_brand': '设备品牌',
        'f_devices_model': '设备型号',
        'f_pipe_type': '管道类型',
        'f_input_person': '安装人',
        'f_install_type': '安装方式',
        'f_input_date': '安装日期',
        'f_make_date': '生产日期',
        'f_userinfodevices_state': '设备状态'
      },
      defaultfield: [
      ],
      printModel: {
        rows: []
      }
    }
  },
  props: ['row'],
  ready () {
    this.$refs.paged.$refs.criteria.search()
  },
  methods: {
    async search () {
      this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_userfiles_id = '${this.row.f_userfiles_id}'`
      this.model.search(this.condition, this.model)
      let http = new HttpResetClass()
      let res = await http.load('POST', 'rs/sql/singleTable_OrderBy', {
        data: {
          items: '"*"',
          tablename: '"t_devices"',
          orderitem: '"id"',
          condition: this.condition
        }
      }, {resolveMsg: null, rejectMsg: null})
      this.printModel.rows = res.data
    },
    // 多选框初始化
    selectInit () {
      this.rowsdata = []
      this.all = []
      this.radio = []
    },
    print () {
      this.selectInit()
    },
    select () {
      let index = this.model.pageIndex - 1
      if (!this.radio[index]) {
        this.radio.$set(index, [])
      }
      if (this.all[index]) {
        // 数据
        this.rowsdata[index] = Object.assign([], this.model.rows)
        // 勾选
        for (var i = 0; i < this.model.rows.length; i++) {
          this.radio[index].$set(i, true)
        }
      } else {
        // 数据
        this.rowsdata[index] = []
        // 不勾选
        for (var i = 0; i < this.model.rows.length; i++) {
          this.radio[index].$set(i, false)
        }
      }
      let z = 0
      this.printModel.rows = []
      for (let i = 0; i < this.all.length; i++) {
        for (let j = 0; this.rowsdata[i] && j < this.rowsdata[i].length; j++) {
          if (this.rowsdata[i][j] && this.rowsdata[i][j].f_user_id) {
            this.printModel.rows[z++] = this.rowsdata[i][j]
          }
        }
      }
    },
    selectOne (event, row, i) {
      let index = this.model.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.model.rows.length != this.radio[index].length) {
          allState = false
        }
        for (var state of this.radio[index]) {
          if (!state) {
            allState = false
          }
        }
        this.all.$set(index, allState)
      } else {
        // 数据
        this.rowsdata[index][i] = []
        // 不勾选
        this.radio[index].$set(i, false)
        // 任意取消一个则全选状态设为false
        this.all.$set(index, false)
      }
      let z = 0
      this.printModel.rows = []
      for (let i = 0; i < this.all.length; i++) {
        for (let j = 0; this.rowsdata[i] && j < this.rowsdata[i].length; j++) {
          if (this.rowsdata[i][j] && this.rowsdata[i][j].f_user_id) {
            this.printModel.rows[z++] = this.rowsdata[i][j]
          }
        }
      }
    }
  },
  computed: {
    ischecked() {
      return function (index, i) {
        if (!this.radio[index]) {
          return false
        }
        return this.radio[index][i]
      }
    },
    changeType() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('换表类型')]
    }
  }
}
</script>
