<template>
  <div class="auto">
    <criteria-paged :model='model' v-ref:paged>
      <criteria :model='model' partial='criteria'>
        <div novalidate class="form-inline col-sm-12" partial>
          <div class="form-group form-input-group col-sm-12">
            <div class="form-group col-sm-12">
              <v-select placeholder='指令类型'
                        @change="$parent.$parent.instructType"
                        :options="$parent.$parent.instructTypes">
              </v-select>
              <v-select placeholder='指令状态'
                        @change="$parent.$parent.instructState"
                        :options="$parent.$parent.instructStates">
              </v-select>
              <button class="btn btn-success width-100" @click="$parent.$parent.sqlCondition">查询</button>
              <button class="btn btn-success width-100" @click="$parent.$parent.sqlCondition">刷新</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid id="sbTable">
        <template partial='head'>
          <tr>
            <!--f_userinfo_id-->
            <th v-if="user">用户编号</th>
            <!--f_user_name-->
            <th v-if="user">用户姓名</th>
            <!--f_user_id-->
            <th v-if="user">表编号</th>
            <!--f_manufacturers-->
            <th v-if="user">气表厂家</th>
            <!--f_instruct_type-->
            <th>指令类型</th>
            <!--f_instruct_content-->
            <!--<th>指令内容</th>-->
            <!--f_instruct_state-->
            <th>指令状态</th>
            <!--f_instruct_date-->
            <th>生成时间</th>
            <!--f_inputtor-->
            <th>操作人</th>
          </tr>
        </template>
        <template partial='body' partial='list' v-ref:grid>
          <tr>
            <td v-if="user" style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_userinfo_id}}
            </td>
            <td v-if="user" style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_user_name}}</td>
            <td v-if="user" style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_user_id}}</td>
            <td v-if="user" style="text-align:center;overflow: hidden;text-overflow: ellipsis;">
              {{row.f_manufacturers}}
            </td>
            <td style="text-align:center;overflow: hidden;text-overflow: ellipsis;">
              {{row.f_instruct_type}}{{row.f_instruct_content.indexOf("isOpen")==-1?'':row.f_instruct_content.indexOf('"isOpen":1')!=-1?'--开阀':'--关阀'}}
            </td>
            <td style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_instruct_state}}</td>
            <td style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_instruct_date}}</td>
            <td style="text-align:center;overflow: hidden;text-overflow: ellipsis;">{{row.f_inputtor}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  //组合数据填充类型选择下拉框
  let getherData = async (data) => {
    let instructState = [], meterType = [], dataState = [{label: '全部', value: '%%'}],
      dataType = [{label: '全部', value: '%%'}]
    let groupBrand = async (data) => {
      for (let i = 0; i < data.length; i++) {
        if (instructState.indexOf(data[i].f_instruct_state) == -1) {
          instructState.push(data[i].f_instruct_state)
          dataState.push({label: data[i].f_instruct_state, value: data[i].f_instruct_state})
        }
      }
    }
    let groupType = async (data) => {
      for (let i = 0; i < data.length; i++) {
        if (meterType.indexOf(data[i].f_instruct_type) == -1) {
          meterType.push(data[i].f_instruct_type)
          dataType.push({label: data[i].f_instruct_type, value: data[i].f_instruct_type})
        }
      }
    }
    await groupBrand(data)
    await groupType(data)
    let res = {f_instruct_state: dataState, f_instruct_type: dataType}
    return res
  }

  let getGroup = async (self) => {
    let result
    await self.$resetpost('rs/sql/getInstructType', {data: {}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
      result = getherData(res.data)
      result.then((res) => {
        self.instructStates = res.f_instruct_state
        self.instructTypes = res.f_instruct_type
      })
    })
  }
  export default {
    title: '物联网表指令查看',
    name: "WebMeterInstruct",
    props: ['rowdata', 'user'],
    data() {
      return {
        model: new PagedList("rs/sql/getAllInstructInfo", 20),
        instructStates: [],
        instructTypes: [],
        condition: '',
        type: undefined,
        state: undefined
      }
    },
    ready() {
      getGroup(this)
      if (!this.user)
        this.model.search(`1=1 AND f_user_id='${this.rowdata.f_user_id}' AND f_userinfo_id='${this.rowdata.f_userinfo_id}'`, this.model)
      else
        this.model.search('1=1', this.model)
    },
    methods: {
      sqlCondition() {
        if (!this.type && !this.state) {
          this.condition = `1=1 AND f_user_id='${this.rowdata.f_user_id}' AND f_userinfo_id='${this.rowdata.f_userinfo_id}'`
        } else if (!this.type && this.state) {
          this.condition = `1=1 AND f_user_id='${this.rowdata.f_user_id}' AND f_userinfo_id='${this.rowdata.f_userinfo_id}' AND f_instruct_state like '${this.state}'`
        } else if (this.type && !this.state) {
          this.condition = `1=1 AND f_user_id='${this.rowdata.f_user_id}' AND f_userinfo_id='${this.rowdata.f_userinfo_id}' AND f_instruct_type like '${this.type}'`
        } else if (this.type && this.state) {
          this.condition = `1=1 AND f_user_id='${this.rowdata.f_user_id}' AND f_userinfo_id='${this.rowdata.f_userinfo_id}' AND f_instruct_type like '${this.type}' AND f_instruct_state like '${this.state}'`
        }
        this.model.search(this.condition, this.model)
      },
      instructState(val) {
        if (val.length == 0)
          return
        this.state = val
      },
      instructType(val) {
        if (val.length == 0)
          return
        this.type = val
      }
    }
  }
</script>

<style>
  #sbTable table {
    table-layout: fixed;
  }

</style>
