<template>
  <div class="flex" style="flex:1;">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial="criteria" @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <label class="control-label">表具编号:</label>
            <input type="text" class="form-control" placeholder="表具编号" v-model="model.f_meternumber"
                   v-on:keyup.enter="search" :size="model.f_meternumber ? model.f_meternumber.length*2 : 4"
                   condition="f_meternumber like '%{}%'">
          </div>
          <div class="form-group">
            <label class="control-label">表具状态:</label>
            <v-select id="f_meter_brand"
                      v-model="model.f_meterstates"
                      placeholder='表具状态'
                      condition="f_meter_state = '{}'"
                      :value.sync="model.f_meterstates"
                      :options='$parent.$parent.meterstate'
                      close-on-select >
            </v-select>
          </div>

          <div class="form-group">
            <button class="btn btn-success width-80" type="button" @click="$parent.$parent.search()">查询</button>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" type="button" @click="$parent.$parent.add()">入库</button>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>序号</th>
            <th>表具编号</th>
            <th>表具类型</th>
            <th>表具底数</th>
            <th>表具流程</th>
            <th>表具状态</th>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index + 1}}</td>
          <td style="text-align: center;">{{row.f_meternumber}}</td>
          <td style="text-align: center;">{{row.f_gasmodel_id}}</td>
          <td style="text-align: center;">{{row.f_meter_base}}</td>
          <td style="text-align: center;">{{row.f_meter_state}}</td>
          <td style="text-align: center;">{{row.f_table_state}}</td>
          <td style="text-align: center;">
            <dropdown v-if="row.f_meter_state != '报废'">
              <button type="button" data-toggle="dropdown" style="border: 0px;background: none;"
                      @click.stop="$parent.$parent.$parent.meterflow(row.f_meter_state)">
                <span class="glyphicon glyphicon-th-list" style="position: inherit;"></span>
              </button>
              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
                <li v-for="met in $parent.$parent.$parent.meters">
                  <a href="#" @click.stop="$parent.$parent.$parent.$parent.check(row,met)">{{met}}</a>
                </li>
              </ul>
            </dropdown>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
  import {PagedList} from 'vue-client'
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'

  let meterReady = async function (self,defname) {
    let http = new HttpResetClass()
    let meter = await http.load('GET', "rs/logic/meterflow", {}, {resolveMsg: null, rejectMsg: null})
    console.log('获取meter参数', meter)
    self.meterFlow = meter.data
    let arr = []
    let tem = {
      label: '全部',
      value: ''
    }
    arr.push(tem)
    for ( let k in meter.data){
      console.log("k",k)
      let temp = {
        label: k,
        value: k
      }
      arr.push(temp)
    }
    self.meterstate = arr
    self.search()
  }

  export default {
    title: '调拨',
    data() {
      return {
        model: new PagedList('/rs/sql/querymeter', 20),
        meterFlow: {},
        meters: [],
        meterstate: []
      }
    },
    ready() {
      meterReady(this)
    },
    methods: {
      search() {
        this.$refs.paged.$refs.cri.search()
      },
      selfSearch(args) {
        // TODO 之后添加分公司限制
        args.condition = `${args.condition}`
        this.model.search(args.condition, args.model)
      },
      add() {
        this.$dispatch('add')
      },
      meterflow(defname) {
        this.meters = this.meterFlow[defname]
      },
      async check(row, met) {
        let user = this.$login.f
        let data = {
          f_processid: row.f_processid,
          f_user_id: row.f_user_id,
          f_meter_state: met,
          version: row.version,
          subdep: met,
          id: user.id,
          name: user.name,
          ename: user.ename
        }
        await Vue.resetpost('rs/logic/nextsavemeter', {data: data})
        this.search()
      }
    }
  }
</script>
