<template>
  <div id="stand-work-list" class="flex">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' v-ref:criteria @condition-changed='$parent.search'>
          <div  novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row" >
              <div class="col-sm-3">
                <label class="font_normal_body">客户编号</label>
                <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                       v-model="model.f_userinfo_code"
                       placeholder='客户编号'
                       condition="f_userinfo_code like '%{}%'"
                >
              </div>
              <div class="col-sm-3">
                <label class="font_normal_body">客户名称</label>
                <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                       v-model="model.f_user_name"
                       placeholder='客户名称'
                       condition="f_user_name like '%{}%'"
                >
              </div>
              <div class="col-sm-3">
                <label class="font_normal_body" style="word-break:keep-all;">安装时间</label>
                <datepicker placeholder="起始时间"
                            style="width:60%"
                            :value.sync="model.f_start_date"
                            v-model="model.f_start_date"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            condition="f_gas_date > '{}'"
                ></datepicker>
              </div>
              <div class="col-sm-3">
                <label class="font_normal_body" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                <datepicker placeholder="结束时间"
                            style="width:60%"
                            :value.sync="model.f_end_date"
                            v-model="model.f_end_date"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            condition="f_gas_date < '{}'"
                ></datepicker>
              </div>

<!--              <res-select-group style="col-sm-3" @re-res="$parent.$parent.getRes"></res-select-group>-->
              <div style="float:right">
                <button class="button_search button_spacing" @click="search()" v-el:cba>查询</button>
                <export-excel
                  :data="{condition: $parent.$parent.condition}"
                  :field="$parent.$parent.getfield"
                  sqlurl="rs/logic/saleExport" sql-name="iot_getNewMeterBrandAndModel" template-name='表具管理'
                  :choose-col="true"></export-excel>
                <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" v-show="$parent.$parent.criteriaShow">
              <div class="col-sm-3">
                <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;</label>
                <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                       v-model="model.f_meternumber"
                       placeholder='表号'
                       condition="f_meternumber like '%{}%'">
              </div>

                <div class="col-sm-3">
                  <label class="font_normal_body">用气地址</label>
                  <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                         v-model="model.f_address"
                         placeholder='用气地址'
                         :size="model.f_address ? model.f_address.length : 6"
                         condition="f_address like '%{}%'"
                  >
                </div>
                <div class="col-sm-3">
                  <label class="font_normal_body">客户类型</label>
                  <v-select
                    placeholder='客户类型'
                    value-single="true"
                    style="width:60%"
                    :value.sync="model.f_usertype"
                    v-model="model.f_usertype"
                    :options='$parent.$parent.Gasusertype'
                    close-on-select condition="f_usertype ='{}'">
                  </v-select>
                </div>

                <!--<div class="col-sm-3">-->
                  <!--<label class="font_normal_body">用气性质</label>-->
                  <!--<v-select-->
                    <!--placeholder='用气性质'-->
                    <!--value-single="true"-->
                    <!--:value.sync="model.f_gasproperties"-->
                    <!--style="width:60%"-->
                    <!--v-model="model.f_gasproperties"-->
                    <!--:options='$parent.$parent.Gasproperties'-->
                    <!--close-on-select condition="f_gasproperties ='{}'">-->
                  <!--</v-select>-->
                <!--</div>-->
              <div class="col-sm-3">
                <label class="font_normal_body">用气性质</label>
                <v-select :options='$parent.$parent.Gasproperties'
                          :value.sync="model.f_gasproperties"
                          close-on-select
                          condition="uf.f_gasproperties = '{}'"
                          id="f_gasproperties"
                          placeholder='用气性质'
                          style="width:60%"
                          v-model="model.f_gasproperties"
                          value-single="true">
                </v-select>
              </div>

                <div class="col-sm-3">
                  <label class="font_normal_body">气表状态</label>
                  <v-select
                    placeholder='气表状态'
                    :value.sync="model.f_table_state"
                    style="width:60%"
                    v-model="model.f_table_state"
                    :options='$parent.$parent.TableStates'
                    close-on-select
                    condition="f_userstate='{}'">
                  </v-select>
                </div>
                <div class="col-sm-3">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select
                    placeholder='气表品牌'

                    :value.sync="model.f_gasbrand"
                    style="width:60%"
                    v-model="model.f_gasbrand"
                    :options='$parent.$parent.meterbrand'
                    close-on-select
                    condition="f_meter_brand='{}'">
                  </v-select>
                </div>
                <div class="col-sm-3">
                  <label class="font_normal_body">气表型号</label>
                  <v-select placeholder='气表型号'
                            :value.sync="model.f_gasmodel"
                            v-model="model.f_gasmodel"
                            style="width:60%"
                            :options='$parent.$parent.gasmodel'
                            close-on-select
                            condition="f_meter_style='{}'">
                  </v-select>
                </div>
              <div class="col-sm-3 ">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid="$parent.$parent.orgid"
                            style="width:60%"
                            @res-select="$parent.$parent.getRes"
                            restype='organization'>
                </res-select>
              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
                <div class="col-sm-3">
                  <label class="font_normal_body">安装年分大于 </label>
                  <input @keyup.enter="search" type="text" class="input_search" style="width:60%"
                         v-model="model.number"
                         placeholder='大于'
                         condition="number>='{}'">
                </div>
              </div>
            </div>

          </div>
        </criteria>

        <data-grid id='meterlist' partial='list' class="list_area table_sy"  v-ref:grid :model="model">
          <template partial='head'>
            <tr>
              <th style="text-align:center">
                <nobr>客户编号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>客户类型</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气性质</nobr>
              </th>
              <th style="text-align:center">
                <nobr>客户名称</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气地址</nobr>
              </th><th style="text-align:center">
                <nobr>SIM信息</nobr>
              </th>
              <th style="text-align:center;color:#3c763d">
                <nobr>表号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表品牌</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表型号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表底数</nobr>
              </th>
<!--              <th style="text-align:center">-->
<!--                <nobr>累计充值金额(元)</nobr>-->
<!--              </th>-->
<!--              <th style="text-align:center">-->
<!--                <nobr>累计用气量(m³)</nobr>-->
<!--              </th>-->
<!--              <th style="text-align:center">-->
<!--                <nobr>累计用气金额(元)</nobr>-->
<!--              </th>-->
<!--              <th style="text-align:center">-->
<!--                <nobr>剩余金额(元)</nobr>-->
<!--              </th>-->
              <th style="text-align:center">
                <nobr>气表状态</nobr>
              </th>
              <th style="text-align:center">
                <nobr>安装年份</nobr>
              </th>
              <th style="text-align:center">
                <nobr>分公司</nobr>
              </th>
              <th style="text-align:center">
                <nobr>别名</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表类型</nobr>
              </th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="text-align:center">
                <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{row.f_userinfo_code}}</a></span>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_usertype}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasproperties}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_address}}</nobr>
              </td><td>
                <nobr>{{row.f_device_id}}</nobr>
              </td>
              <td style="text-align:center;color:#3c763d" >
                <nobr>
                  {{row.f_meternumber}}
                </nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gaswatchbrand}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_metertype}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasmeteraccomodations}}</nobr>
              </td>
<!--              <td style="text-align:center">-->
<!--                <nobr>{{row.f_collection}}</nobr>-->
<!--              </td>-->
<!--              <td style="text-align:center">-->
<!--                <nobr>{{row.f_initial_base}}</nobr>-->
<!--              </td>-->
<!--              <td style="text-align:center">-->
<!--                <nobr>{{row.f_total_usegas_amount}}</nobr>-->
<!--              </td>-->
<!--              <td style="text-align:center">-->
<!--                <nobr>{{row.f_balance}}</nobr>-->
<!--              </td>-->
              <td style="text-align:center">
                <nobr>{{row.f_userstate}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.year}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_filiale}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_bieming}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasmeterstyle}}</nobr>
              </td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
</template>
<script>
  import {PagedList} from 'vue-client'
  import plugins from '../../../plugins/GetLoginInfoService'
  let readyGen = async function (self) {
    // await self.$LoadParams.loadParam()
    // self.initQueryParam()
    // await self.$getConfig(self, 'HandManager')
    console.log('表具管理config', self.config)
    self.getfield = self.config.excelHeaders
    // self.reflash()
  }
  export default {
    title: '表具管理',
    data() {
      return {
        model: new PagedList('rs/sql/iot_getNewMeterBrandAndModel', 50),
        row: null,
        // meterbrand: [],
        orgid:[this.$login.f.orgid],
        orgCondtionStr: '(' + this.$login.f.orgid + ')',
        searchshow: false,
        orgcondition:"",
        getfield: {},
        criteriaShow:false,
        config: {
          excelHeaders: {
            'f_userinfo_code': '客户编号',
            'f_address': '客户地址',
            'f_device_id': 'SIM信息',
            'f_user_name': '客户姓名',
            'f_usertype': '客户类型',
            'f_gasproperties': '用气性质',
            'f_meternumber': '表号',
            'f_gaswatchbrand': '气表品牌',
            'f_metertype': '气表型号',
            'f_gasmeteraccomodations': '气表底数',
            // 'f_collection': '累计充值金额(元)',
            // 'f_initial_base': '累计用气量(m³)',
            // 'f_total_usegas_amount': '累计用气金额(元)',
            // 'f_balance': '剩余金额(元)',

            'f_userstate': '气表状态',
            'year':'安装年份',
            'f_filiale':'分公司',
            'f_bieming':'别名',
            'f_gasmeterstyle' : '气表类型',
          }
        },
        condition:'',
        obj: {
          userid: this.$login.f.id,
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: this.$login.f.f_fengongsi,
          resids: this.$login.f.f_orgids
        },
        WarningType: [
          {label: '全部', value: ''}
        ],
        Warningstyle: [
          {label: '全部', value: ''}
        ],
        Warningstyles: [
          {label: '全部', value: ''}
        ],
        styles: false,
        softVwareersion: [],
        Gasusertype: [],
        Gasproperties:[],
        // Gasproperties: this.$refs.paged.$refs.criteria.model.f_user_type.length === 1 ? this.$appdata.getParam(this.model.f_user_type[0]) : [],
        Gasproperties2: [],
        f_signal_1: '',
        f_signal_2: '',
        str: '',
        isBusy: false,
        f_batterylevel_1: 0,
        f_batterylevel_2: 0
      }
    },
    props: ['searchobj', 'isdeal'],
    ready() {
      // this.$refs.paged.$refs.criteria.model.f_start_date = Util.toStandardDateString() + ' 00:00:00'
      // this.$refs.paged.$refs.criteria.model.f_end_date = Util.toStandardDateString() + ' 23:59:59'
      //this.$refs.paged.$refs.criteria.search()
      // console.log(this.$refs.paged.$refs.criteria.model.f_meter_brand + "+this.f_meter_brand")
      //初始化气表品牌下拉框
      //初始化客户类型，用气性质，用气属性，软件版本号下拉框
      readyGen(this)
    },
    watch: {
      'searchobj'(val) {
        if (this.searchobj != null) {
          this.$refs.paged.$refs.criteria.model.f_meternumber = this.searchobj.f_meternumber
          this.$refs.paged.$refs.criteria.search()
        }
      }
    },
    methods: {
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      // SaveAsFile(str) {
      //   this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
      //     if (res === 'confirm') {
      //       let style = '<style>' +
      //         'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
      //       let strHtml = style + document.getElementById(str).innerHTML;
      //       console.log(strHtml);
      //       let LODOP = getLodop();
      //       LODOP.PRINT_INIT('');
      //       LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
      //       LODOP.SAVE_TO_FILE('表具管理.xls')
      //     }
      //   })
      // },
      clearmsg() {
        this.$refs.paged.$refs.criteria.model = {}
      },
      clickshow() {
        this.searchshow = !this.searchshow
      },
      dealmsg(val) {
        val.model = this.model.model
        this.$emit('deal-msg', val)
      },
      search(args) {
        this.isBusy = true
        this.condition=args.condition
        this.model.search(args.condition, args.model)
      },
      getRes(obj) {
        this.orgcondition = obj
        this.orgCondtionStr = plugins.convertToIn(obj)
      },
      // userTypeChange () {
      //   this.gasproperties = []
      //   if (this.model.f_user_type.length === 1) {
      //     if (this.model.f_user_type[0]) {
      //       this.gasproperties = this.$appdata.getParam(this.model.f_user_type[0])
      //     } else {
      //       this.$refs.paged.$refs.cri.model.f_gasproperties = ''
      //     }
      //   }
      // },
      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]
      }
    },
    computed: {
     /* Warningstyle () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]
      },*/
      meterbrand () {
        return [{label:'全部',value:''},...this.$appdata.getParam('气表品牌')]
      },
      gasmodel(){
        return [{label:'全部',value:''},...this.$appdata.getParam('气表型号')]
      },
      MeterTypes() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      TableStates() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      },
       // Gasproperties() {
       //   let rs = []
       //   if (this.model.model.f_user_type) {
       //     rs = this.$appdata.getParam(this.model.model.f_user_type[0])
       //   }
       //   return rs
       //   // return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
       // },
      Gasusertype() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      signtype1() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
      },
      // Gasproperties(){
      //   return [{lobel: '全部',  value:''}, ...this.$appdata.getParam('用气性质')]
      // },
      parameterState() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记状态')]
      },
      userfilesState() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('上报状态')]
      },
      /*softVwareersion() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('软件版本号')]
      },*/
      valvestate() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
      },
      meterbrands() {
        return this.$GetSaleParam.getGasbrand()
      },
      Gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.criteria.model.f_usertype.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_usertype[0])
        }
        return [{label: '全部', value: ''}, ...rs]
      }
    }
  }
</script>
<style>
  .form-input-group label {
    text-align: right;
    width: auto;
  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
    padding: 10px 30px 10px 30px;
    border-radius: 15px;
  }
</style>

