<template>
  <div id="unit" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex">
        <div style="flex:1;" class="flex" >
          <criteria-paged :model="model" v-ref:paged>
            <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
              <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
                <div class="row">
                  <div class="col-sm-2">
                    <label class="font_normal_body">客户编号</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                           condition="f_userinfo_code = '{}' " placeholder="客户编号">
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">客户名称</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                           condition="f_user_name = '{}'" placeholder="客户名称">
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">客户电话</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_user_phone"
                           condition="f_user_phone like '%{}%'" placeholder="客户电话">
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">客户地址</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_address"
                           condition="f_address like '%{}%'" placeholder='客户地址'>
                  </div>
                  <div class="span" style="float:right;">
                    <button class="button_search button_spacing" @click="$parent.$parent.confirmaddress()">关联到集中器</button>
                    <button class="button_search button_spacing" @click="search()">查询</button>
                    <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
                    <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                  </div>
                </div>
                <div class="row" style="margin-top: 11px;" v-show="$parent.$parent.criteriaShow">
                  <div class="col-sm-2">
                    <label class="font_normal_body">小&emsp;&emsp;区</label>
                    <v-select :value.sync="model.f_residential_area" condition="f_residential_area in {}"
                              v-model="model.f_residential_area" style="width: 60%"
                              :options='$parent.$parent.residentialArea' placeholder='选择小区'
                              close-on-select>
                    </v-select>
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_meternumber"
                           condition="f_meternumber like '%{}%'" placeholder='表号'>
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_card_id"
                           condition="f_card_id like '%{}%'" placeholder='卡号'>
                  </div>
                  <div class="col-sm-2">
                    <label class="font_normal_body">气表状态</label>
                    <v-select :value.sync="model.f_table_state"
                              v-model="model.f_table_state"
                              :options='$parent.$parent.tablestate' placeholder='请选择'
                              condition="f_table_state = '{}'"
                              close-on-select></v-select>
                  </div>
                </div>
              </div>
            </criteria>

            <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy" :classname="$parent.classname" optional>
              <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>
                  <th>
                    <nobr>气表品牌</nobr>
                  </th>
                  <th>
                    <nobr>气表型号</nobr>
                  </th>
                  <th>
                    <nobr>气表状态</nobr>
                  </th>
                </tr>
              </template>
              <template partial='body'>
                <td style="text-align: center;"><nobr>
                  <span >{{$index+1}}</span>
                </nobr> </td>
                <td style="text-align: center;"><nobr>
                  <span >{{row.f_userinfo_code}}</span>
                </nobr> </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_user_name}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_user_phone}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_idnumber}}</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_gasproperties}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_meternumber}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_card_id}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_price_name}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_meter_brand}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_meter_style}}</nobr>
                </td>
                <td style="text-align: center;">
                  <nobr>{{row.f_table_state}}</nobr>
                </td>
              </template>
              <template partial='foot'>
              </template>
            </data-grid>
          </criteria-paged>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
let readySomething = async function (self) {
    // await self.$MagLoadParams.loadParam()
   // self.initParams();
  self.sumsmodel = self.$refs.paged.$refs.grid.model.sums
  self.search()
}

export default {
  data () {
    return {
      model: new PagedList('rs/sql/concentratormeterQuery', 20, {}, {f_balance_amount: 0, f_balance_gas: 0}),
      criteriaShow: false,
      modelval: [],
      printshow: false,
      all: false,
      fields: {},
      rowdata: {},
      meterbrands: [],
      pricenames: [],
      gasproperties: [],
      prices: [],
        // 合计数据
      sumsmodel: {},
      selectfields: [],
      usertypes: [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')],
      metertypes: [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')],
      pricetypes: [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')],
      areacondition: `1=1 and s.f_filialeid = '${this.$login.f.orgid}'`,
      residentialArea: []
    }
  },
  props: ['f_filialeid', 'fileinfo'],
  ready () {
    this.getaddress()
    readySomething(this).then(() => {
      this.$emit('ready')
    }).catch((error) => {
      this.$emit('error', error)
    })
  },
  methods: {
      // 获取小区下拉框
    async getaddress () {
      console.log('开始获取小区')
      let temp = {
        condition: this.areacondition
      }
      let HttpReset = new HttpResetClass()
      var data = await HttpReset.load('POST', 'rs/sql/manage_getarealist', {data: temp},
          {resolveMsg: null, rejectMsg: '获取小区失败!'})
      console.log('小区', data)
      this.residentialArea = []
      let house = []
      for (let row of data.data) {
        console.log('开始保存小区')
        house.push({label: row.f_residential_area, value: row.f_residential_area})
      }
      this.residentialArea = house
    },
    async confirmaddress () {
      let res = await this.$showMessage('确定将选择表具关联到此集中器吗?', ['confirm', 'cancel'])
      if (res === 'confirm') {
        let rowdata = this.$refs.paged.$refs.grid.getRowData()
        if (rowdata.length <= 0) {
          this.$showMessage('请至少选择一个表具!')
          return
        }
        console.log(rowdata)
        let userfilesids = []
        for (let row of rowdata) {
          userfilesids.push({f_userfiles_id: row.f_userfiles_id})
        }
        let param = {
          concentratorid: this.fileinfo.id,
          userfilesid: '',
          userfilesids: userfilesids,
          state: 'add'
        }
        await this.$resetpost('rs/logic/concentratorsaveoper', param, {resolveMsg: '添加关联成功,请在已关联页面查看!', rejectMsg: '添加关联失败!'})
        this.search()
      }
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      this.$refs.paged.$refs.grid.selectInit()
      args.condition = `${args.condition} and f_concentrator_id is null `
      args.condition = `${args.condition}` + ' and f_orgid = ' + this.f_filialeid
      args.condition = `${args.condition} `
      this.model.search(args.condition, args.model)
    },
    clear () {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = ''
      })
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },

    close () {
      this.printshow = false
      this.all = false
    },
    userTypeChange () {
      this.gasproperties = []
      if (this.$refs.paged.$refs.cri.model !== null) {
        this.$refs.paged.$refs.cri.model.f_gasproperties = ''
        this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
      } else {
        this.gasproperties = [{label: '全部', value: ''}]
      }
    },
    initParams () {
        // 初始化气表品牌
      let brandArr = []
      this.$MagGetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        brandArr.push(temp)
      })
      this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
        // 初始化气表价格
      this.prices = this.$MagGetSaleParam.getPrices()
    },
      // 对选择的列进行排序
    sortModelval () {
      let sortModel = []
      Object.keys(this.fields).forEach((key) => {
        if (this.modelval.includes(key)) {
          sortModel.push(key)
        }
      })
      this.modelval = sortModel
      console.log('选择的打印的字段', this.modelval)
    },
    async updateParams () {
      await this.$MagLoadParams.loadParam(this.f_filialeid)
      this.initParams()
    }
  },
  watch: {
    'all' (val) {
      if (val) {
        this.modelval = this.bodyData
      } else {
        this.modelval = defaultPrint.config
        this.put()
      }
    },
    'modelval.length' () {
      this.put()
    }
  },
  computed: {
    getPricenames () {
      let f_user_type = this.$refs.paged.$refs.cri.model.f_user_type
      let f_gasproperties = this.$refs.paged.$refs.cri.model.f_gasproperties
      let pricetype = this.$refs.paged.$refs.cri.model.pricetype
      if (this.$refs.paged.$refs.cri.model !== null) {
        let rs = []
        let priceArr = []
        if (f_user_type.length > 0 && f_gasproperties.length > 0 && pricetype.length > 0) {
          let params = {
            f_user_type: f_user_type[0],
            f_gasproperties: f_gasproperties[0],
            f_price_type: pricetype[0],
            filter: this.f_filialeid,
            prices: this.prices
          }
          this.$MagGetSaleParam.getPrice(params).forEach((item) => {
            let temp = {}
            temp.label = item.label
            temp.value = item.value.f_price_name
            priceArr.push(temp)
          })
          rs = [{label: '全部', value: ''}, ...priceArr]
        }
        if (rs.length === 0) {
          console.log('rs读出来是空')
          this.$refs.paged.$refs.cri.model.f_price_name = ''
        }
        return rs
      }
    },
    areas () {
      let rs = []
      for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
        let temp = {
          label: this.$login.f.f_allArea[i].label,
          value: this.$login.f.f_allArea[i].label
        }
        rs.push(temp)
      }
      return [{label: '全部', value: ''}, ...rs]
    },
    sliceArea () {
      let rs = []
      if (this.$refs.paged.$refs.cri.model.f_area.length > 0) {
        for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
          if (this.$login.f.f_allArea[i].label === this.$refs.paged.$refs.cri.model.f_area[0]) {
            rs = this.$login.f.f_allArea[i].value
          }
        }
      }
      return [{label: '全部', value: ''}, ...rs]
    },

    tablestate () {
      return [{label: '全部', value: ''}, {label: '正常', value: '正常'}, {label: '停用', value: '停用'}]
    },
    bgl () {
      return [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}]
    }
  }
}
</script>
<style scoped>
</style>
