<template>
  <div @keyup.enter="search" class="flex">
    <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="form-group col-sm-3" >
              <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-3 form-group">
              <label class="font_normal_body" for="f_meter_type">气表类型</label>
              <v-select :options='$parent.$parent.meterType'
                        :value.sync="model.f_meter_type"
                        close-on-select condition="f_meter_type = '{}'"
                        placeholder='气表类型'
                        style="width: 60%"  v-model="model.f_meter_type"></v-select>
            </div>
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">气表品牌</label>
              <input  class="input_search" condition="f_meter_brand like '%{}%'" placeholder='气表品牌'  style="width:60%" type="text"
                      v-model="model.f_meter_brand"
              >
            </div>
            <div class="col-sm-3 form-group button-range"  style="margin-right: 10px;">
              <button @click="$parent.$parent.showGasModel()" class="button_search button_spacing" v-el:cx>查看气表品牌型号对照表</button>
              <button @click="$parent.$parent.search()" class="button_search button_spacing" v-el:cx>查询</button>
              <button @click="$parent.$parent.addNew()" class="button_new 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><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'>
          <tr>
            <td style="text-align:center"><nobr>{{$index+1}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_meter_brand}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_meter_type}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_alias}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_cardnumber}}</nobr></td>
            <td style="text-align:center"><button @click.stop="$parent.$parent.$parent.operates(row.id,row.f_meter_brand)" class="btn btn-link"><b>{{row.counts}}</b></button></td>
            <td style="text-align:center"><nobr><button type="button" name="button" class="button_search button_spacing width-60"
              @click.stop="$parent.$parent.$parent.operate(row.id)" class="btn btn-link">使用公司</button></nobr></td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>

    <modal :show.sync="showGasModelPrice" v-ref:modal backdrop="false" style="height:100%;overflow: scroll;">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closestopinfo"><span>&times;</span></button>
        <h4 class="modal-title">表品牌表具id对照表</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <data-grid  :model="gasmodelbrand" class="list_area table_sy" partial='list'  v-ref:grid >
          <template partial='head'>
            <tr>
              <th><nobr>序号</nobr></th>
              <th><nobr>气表品牌id</nobr></th>
              <th><nobr>气表品牌</nobr></th>
              <th><nobr>气表型号id</nobr></th>
              <th><nobr>气表型号</nobr></th>
              <th><nobr>气表类型</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="text-align:center"><nobr>{{$index+1}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.meter_brand_id}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_brand}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.gasmodel_id}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_style}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meter_type}}</nobr></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>

    <add-usering-org :f_gasbrand_id="f_gasbrand_id" :show.sync="allBrandsView" @select-changed="selected" @success="success"></add-usering-org>

  </div>
</template>

<script>
/**
*阶梯气价查询列表
*/
import { PagedList } from 'vue-client'
import AddUseringOrg from './AddUseringOrg'
// import ResSelectGroup from "system-clients/src/components/server/ResSelectGroup";

let asyncReadyGen = async function (self) {
  await self.search()
  await self.$LoadParams.loadParam()
  self.initQueryParam()
}

export default {
  components: {AddUseringOrg},
  title: '气表品牌管理导航',
  data () {
    return {
      isChange: false,
      model: new PagedList('rs/sql/getBrandsList', 20),
      gasmodelbrand: new PagedList('rs/sql/getGasModelAll', 9999),
      meterbrand: [],
      f_gasbrand_id: '',
      allBrandsView: false,
      meterType: [{label: '金额卡表', value: '金额卡表'}, {label: '气量卡表', value: '气量卡表'}, {label: '机表', value: '机表'}, {label: '物联网表', value: '物联网表'}],
      // 公司下拉
      curorgid: [this.$login.f.orgid],

      f_orgid: '',

      f_filialename: '',
      showGasModelPrice: false
    }
  },
  props: {
    items: {
      type: String,
      default: '*'
    },
    tablename: {
      type: String,
      default: 't_gasbrand'
    },
    orderitem: {
      type: Number,
      default: 'id'
    },
    row: {},
    visiable: true,
    f_filialeid: {
      type: String
    }
  },
  ready () {
    asyncReadyGen(this)
  },
  methods: {
    closestopinfo () {
      this.showGasModelPrice = false
    },
    showGasModel () {
      this.showGasModelPrice = true
    },
    selfSearch (args) {
      this.allBrandsView = false
      // if (!this.f_orgid) {
      //   this.getorg([this.$login.f.orgid])h
      // }
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      if (this.f_orgid) {
        this.model.params.orgcondition = ` and f_orgid in ${this.f_orgid} `
      }
      args.condition = `${args.condition}`
      this.model.search(args.condition, args.model)
      this.gasmodelbrand.search(args.condition, args.gasmodelbrand)
    },
    search () {
      this.$dispatch('search')
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.$parent.f_orgid = this.f_orgid
    },
    selected () {},
    success () {
      console.log('============')
      this.allBrandsView = false
    },
    addNew () {
      this.$dispatch('add')
    },
    operate (id) {
      console.log(id, '=============')
      this.f_gasbrand_id = id
      this.allBrandsView = true
    },
    operates (id, f_meter_brand) {
      this.$parent.usershow = true
      this.$parent.isChange = false
      this.$parent.listpage = true
      this.$parent.brand_id = id
      this.$parent.meter_brand = f_meter_brand
    },
    async delFromOrg (row) {
      console.log('删除关联关系', row)

      // 删除气表与组织的关系
      try {
        await this.$resetdelete('rs/entity/t_gasbrand_orgid', {id: row.f_connec_id}, {resolveMsg: '删除成功', rejectMsg: '删除失败！！'})
        this.$dispatch('success')
      } catch (error) {
        this.$dispatch('error')
      }
    },
    initQueryParam () {
      let arr = []
      this.$GetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        arr.push(temp)
      })
      this.meterbrand = [{label: '全部', value: ''}, ...arr]
    }
  },
  watch: {
    'model.rows.length' (val) {
      if (val === 1) {
        this.$refs.paged.$refs.grid.select(this.model.rows[0])
      }
    }
  }
}
</script>
