<template >
  <div style="flex:1;" 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">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;</label>
                <input @keyup.enter="search" class="input_search" style="width:60%" type="text"
                       v-model="model.f_meternumber"
                       placeholder='表号'
                       :size="model.f_meternumber ? model.f_meternumber.length : 6"
                       condition="f_meternumber like '%{}%'">
              </div>
              <div class="col-sm-3">
                  <label class="font_normal_body">客户编号</label>
                  <input @keyup.enter="search" class="input_search" style="width:60%" type="text"
                         v-model="model.f_userinfo_code"
                         placeholder='客户编号'
                         :size="model.f_userinfo_code ? model.f_userinfo_code.length : 6"
                         condition="f_userid like '%{}%'">
                </div>

                <div class="col-sm-3">
                  <label class="font_normal_body">客户名称</label>
                  <input @keyup.enter="search" class="input_search" style="width:60%" type="text"
                         placeholder='客户名称'
                         :size="model.f_user_name ? model.f_user_name.length : 6"
                         v-model="model.f_user_name"
                         condition="f_username like '%{}%'"
                  >
                </div>
                <div style="float:right">
                    <button class="button_search" @click="search()" v-el:cba>查询</button>
                    <button class="button_clear" @click="$parent.$parent.clearmsg">清空</button>
                    <!--<label class="font_normal_body"></label>
                    <button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('queryinstruct')">导出</button>-->
                    <export-excel
                      :data="{condition: $parent.$parent.condition}"
                      :field="$parent.$parent.getfield"
                      sqlurl="rs/logic/saleExport" sql-name="iot_getNewQueryInstruct" 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">用气地址</label>
                  <input @keyup.enter="search" class="input_search" style="width:60%" type="text"
                         placeholder='用气地址'
                         :size="model.f_address ? model.f_address.length : 6"
                         v-model="model.f_address"
                         condition="f_address like '%{}%'"
                  >
                </div>
                <div class="col-sm-3">
                  <label class="font_normal_body">客户类型</label>
                  <v-select style="width:60%" :value.sync="model.f_usertype" v-model="model.f_usertype"
                            placeholder='客户类型'
                            value-single="true"
                            :options='$parent.$parent.userType'
                            close-on-select
                            condition="f_usertype ='{}'"
                  ></v-select>
                </div>
                <div class="col-sm-3">
                  <label class="font_normal_body">用气性质</label>
                  <v-select style="width:60%" :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                            placeholder='用气性质'
                            value-single="true"
                            :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 style="width:60%" :value.sync="model.f_gasproperties2" v-model="model.f_gasproperties2"
                            placeholder='用气属性'
                            value-single="true"
                            :options='$parent.$parent.Gasproperties2'
                            close-on-select
                            condition="u.f_gasproperties2 {}"
                  ></v-select>
                </div>-->
              <div class="col-sm-3">
                <label class="font_normal_body">指令类型</label>
                <v-select style="width:60%" :value.sync="model.f_instruct_type" v-model="model.f_instruct_type"
                          placeholder='指令类型'
                          :options='$parent.$parent.instructType'
                          close-on-select
                          condition="f_instruct_type='{}'"></v-select>
              </div>

              <div class="col-sm-3" >
                  <label class="font_normal_body" >安装时间</label>
                  <datepicker style="width:60%" placeholder="起始时间"
                              :value.sync="model.f_start_date1"
                              v-model="model.f_start_date1"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_instruct_date >= '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-3" >
                  <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                  <datepicker style="width:60%" placeholder="结束时间"
                              :value.sync="model.f_end_date1"
                              v-model="model.f_end_date1"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_instruct_date <= '{}'"
                  ></datepicker>
                </div>
                 <div class="col-sm-3" >
                  <label class="font_normal_body" >指令时间</label>
                  <datepicker style="width:60%" placeholder="起始时间"
                              :value.sync="model.f_start_date"
                              v-model="model.f_start_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_instruct_date >= '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-3" >
                  <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                  <datepicker style="width:60%" placeholder="结束时间"
                              :value.sync="model.f_end_date"
                              v-model="model.f_end_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_instruct_date <= '{}'"
                  ></datepicker>
                </div>

                <div class="col-sm-3">
                  <label class="font_normal_body">指令状态</label>
                  <v-select style="width:60%" :value.sync="model.f_instruct_state" v-model="model.f_instruct_state"
                            placeholder='指令状态'
                            :options='$parent.$parent.instructState'
                            close-on-select
                            condition="f_instruct_state='{}'"
                  ></v-select>
                </div>
                <res-select-group style="col-sm-3" @re-res="$parent.$parent.getRes"></res-select-group>
              </div>



            </div>

        </criteria>
        <data-grid  id="queryinstruct" partial='list' v-ref:grid :model="model"  class="list_area table_sy">
          <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>表号</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_userid}}</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_username}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_address}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_meternumber}}</nobr></td>
              <td style="text-align:left"><nobr>{{row.f_instruct_content}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_instruct_type}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_instruct_state}}</nobr></td>
              <td style="text-align:center"><nobr>{{row.f_instruct_date}}</nobr></td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
</template>
<script>
  import {PagedList} from 'vue-client'
  import co from 'co'
  import * as Util from '../../../Util'
  import getLodop from '../../../plugins/LodopFuncs'
  import {HttpResetClass} from 'vue-client'
  let readyGen = async function (self) {
    self.getfield = self.config.excelHeaders
    self.reflash()
    await self.$getConfig(self, 'HandManager')
    console.log('指令查看config', self.config)
  }
  export default {
    title: '指令查看',
    data () {
      return {
          model: new PagedList('rs/sql/iot_getNewQueryInstruct', 50),
        row: null,
        isLoading: true,
        searchshow: true,
        criteriaShow:false,
        // Gasproperties2:[],
        Gasproperties:[],
        userType:[],
        orgcondition:'',
        show: false,
        condition:'',
        getfield: {},
        config: {
          excelHeaders: {
            'f_userid': '客户编号',
            'f_address': '客户地址',
            'f_username': '客户姓名',
            'f_usertype': '客户类型',
            'f_gasproperties': '用气性质',
            'f_meternumber': '表号',
            'f_instruct_type': '指令类型',
            'f_instruct_state': '指令状态',
            'f_instruct_date': '指令生成时间'
          }
        },
      }
    },
    ready () {
      readyGen(this)
      //this.search({condition:'1=1'})
    },
    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;
            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.obj.resids = this.obj.resids.replace(/\./g, ''),
        //args.condition =  `${args.condition}`+this.orgcondition
        console.log(args.condition+"args.condition")

        this.condition = args.condition
        this.model.search(args.condition, args.model)
      },
      getRes (obj) {
        this.orgcondition = obj
      }
    },
    computed: {
      instructType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令类型')]
      },
      instructState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令状态')]
      },
       userType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
    //    Gasproperties () {
    //   return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
    // },
      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>
