<template>
  <div class="basic-main" style="height:100%" @keyup.enter="search" >
    <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">
                <res-select-group :initres="$parent.$parent.initres"
                                  :show-component="$parent.$parent.defaultshow"
                                  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">设&nbsp;&nbsp;备&nbsp;号</label>
              <input  type="text" class="input_search" v-model="model.f_terminal_number" placeholder='设备号'
                      condition="f_terminal_number like '%{}%'"  v-el:userinfo
                      :size="model.f_terminal_number ? model.f_terminal_number.length: 4">
            </div>
            <div class="span"  style="float:right;">
              <button class="button_search button_spacing" @click="search()" v-el:cx>查询</button>
              <button class="button_spacing button_clear" @click="search()" v-el:cx>清空</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" v-show="$parent.$parent.criteriaShow">

            <div class="form-group col-sm-2" title="操作时间">
              <label class="font_normal_body">操作时间</label>
              <datepicker id="endDate" placeholder="操作时间"
                          v-model="model.f_operate_date"
                          :value.sync="model.f_operate_date"
                          condition="f_operate_date >'{}'"
                          :format="'yyyy-MM-dd'"
                          style="width:60%">
              </datepicker>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
              <v-select id="f_pos_state"
                        v-model="model.f_state"
                        placeholder='状态'
                        condition="f_state ='{}'"
                        :value.sync="model.f_state"
                        :options='$parent.$parent.whetherPay'
                        close-on-select clear-button>
              </v-select>
            </div>

          </div>


        </div>
         <!-- <div class="form-group" title="pos收费开始时间">
              <datepicker id="startDate" placeholder="开始日期"
                v-model="model.f_start_date"
                :value.sync="model.f_start_date"
                :format="'yyyy-MM-dd'"
                width="140px">
              </datepicker>
          </div>-->


          <!--<div class="form-group">-->
            <!--<export-excel :data="{orderitem: 'f_userinfo_id',condition: condition}" bean="欠费用户信息导出" sqlurl="rs/logic/exportfile"></export-excel>-->
          <!--</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>
            <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 :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{$index+1}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_terminal_number}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_equipment_type}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_terminal_name}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_username}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_state}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_operator}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_battery_level}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_is_login}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_appVer}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>{{row.f_hybrid_version}}</nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center; color: #00A3F0"><nobr><b>{{row.f_operate_date}}</b></nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center; color: #00A3F0"><nobr><b>
            <button class="btn btn-info width-50" @click="$parent.$parent.$parent.operaterecord(row)">历史</button>
          </b></nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>
            <button class="btn btn-info width-50" @click="$parent.$parent.$parent.editBeizhu(row)">编辑</button></nobr></td>
          <td :class="row.f_pos_state === '失联'? 'back-red' : 'back-blue'" style="text-align: center;"><nobr>
            <button class="btn btn-success width-50" @click="$parent.$parent.$parent.getEditState(row)"  v-if="row.f_state !== '正常'">启用</button>
            <button class="btn btn-danger width-50" @click="$parent.$parent.$parent.getEditState(row)"  v-if="row.f_state === '正常'">停用</button>
            <!--<button class="width-30" @click="editBeizhu(row)">编辑</button>-->
          </nobr></td>
        </template>
        <template partial='foot'>
          <td style="text-align: center;">合计</td>
          <td style=" text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;">{{model.sums.f_total_fee.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.f_collection.toFixed(2)}}</td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
        </template>
      </data-grid>
  </criteria-paged>
    <modal :show.sync="editshow" v-ref:modal backdrop='false'>
     <!-- <header slot="modal-header" class="modal-header">
        <h4 class="modal-title" style="text-align: center;"><b>终端号：{{posBase.id}}</b></h4>
      </header>-->
      <article slot="modal-body" class="modal-body center-block" style="width:80%">
       <!-- <div class="row auto">
          <div class="form-group form-input-group">
            <label for="" class="control-label">别名：</label>
            <input type="text" width="300px" class="form-control" v-model="posBase.f_other_name" >
          </div>
        </div>-->
        <div class="row auto">
          <div class="form-group">
            <label for="" class="col-sm-3 control-label">设&nbsp;&nbsp;备&nbsp;号：</label>
            <input type="text"  class="form-control" v-model="posBase.f_terminal_number" >
          </div>
        </div>
        <div class="row auto">
          <div class="form-group">
            <label for="" class="col-sm-3  control-label">设备类型：</label>
            <input type="text" class="form-control" v-model="posBase.f_equipment_type" >
          </div>
        </div>
        <div class="row auto">
          <div class="form-group">
            <label for="" class="col-sm-3 control-label">设备名称：</label>
            <input type="text"  class="form-control" v-model="posBase.f_terminal_name" >
          </div>
        </div>
        <div class="row auto">
          <div class="form-group">
            <label for="" class="col-sm-3 control-label">所属银行：</label>
            <input type="text"  class="form-control" v-model="posBase.f_bank_name" >
          </div>
          <div class="row auto">
            <div class="form-group">
              <label for="" class="col-sm-3 control-label">mac&nbsp;&nbsp;&nbsp;号：</label>
              <input type="text" class="form-control" v-model="posBase.f_mac_number" >
            </div>
          </div>
          <div class="row auto">
            <div class="form-group ">
              <label for="" class=" col-sm-3 control-label">使用人员：</label>
              <input type="text"  class="form-control" v-model="posBase.f_username" >
            </div>
          </div>
        </div><div class="row auto">
          <div class="form-group">
            <label for="" class="col-sm-3 control-label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
            <input type="text"  class="form-control" v-model="posBase.f_comments" >
          </div>
        </div>
        <!--<div class="row auto">
          <div class="form-group form-input-group" title="安装时间">
            <label for="" class="control-label">安装时间：</label>
            <datepicker placeholder="安装时间"
                        v-model="posBase.f_install_startdate"
                        :value.sync="posBase.f_install_startdate"
                        :format="'yyyy-MM-dd'">
            </datepicker>
          </div>
        </div>-->
        <!--<div class="row auto">-->
          <!--<div class="form-group form-input-group" title="安装结束时间">-->
            <!--<label for="" class="control-label">结束时间：</label>-->
            <!--<datepicker placeholder="安装结束时间"-->
                        <!--v-model="posBase.f_install_enddate"-->
                        <!--:value.sync="posBase.f_install_enddate"-->
                        <!--:format="'yyyy-MM-dd'">-->
            <!--</datepicker>-->
          <!--</div>-->
        <!--</div>-->
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default" @click='editclose' id="vc-messagebox-close">取消</button>
        <button type="button" class="btn btn-success" @click='editSave' id="vc-messagebox-confirm">确认</button>
      </footer>
    </modal>
    <modal :show.sync="infoshow" width="800px" title="终端历史信息" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body">
        <criteria-paged :model="model2" v-ref:paged2>
          <data-grid :model="$parent.$parent.model2" v-ref:grid2  partial='list'>
            <template partial='head'>
              <tr>
                <!--<th style="padding: 0;border: 0">
                  <input type="checkbox" id="f_operator" v-model="$parent.$parent.$parent.all[model.pageIndex-1]"
                         @change="$parent.$parent.$parent.select()" style="width: 22px;height: 22px"/>
                </th>-->
                <th><nobr>序号</nobr></th>
                <th><nobr>终端号</nobr></th>
                <th><nobr>上次上报时间</nobr></th>
                <th><nobr>本次上报时间</nobr></th>
                <th><nobr><b>状态</b></nobr></th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">{{$index + 1}}</td>
              <td style="text-align: center;">{{row.ename}}</td>
              <td style="text-align: center;">{{row.f_last_update_date}}</td>
              <td style="text-align: center;">{{row.f_update_date }}</td>
              <td style="text-align: center;"><b>{{row.f_pos_state}}</b></td>
            </template>
          </data-grid>
        </criteria-paged>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" @click='infoclose'>关闭</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  /**
   *用户档案查询列表以及添加操作组件
   */
  import {HttpResetClass, PagedList} from 'vue-client'
  // import AppData from '../../stores/AppData'

export default {
  title: '自助终端查询',
  data () {
    return {
      model: new PagedList('rs/sql/getPosList', 50),
      model2: new PagedList('rs/sql/getPosUpdate', 30, {orderitem: '`id DESC`'}),
      infoshow: false,
      rows: null,
      whetherPay: [
                  {label: '正常', value: '正常'},
                  {label: '已删除', value: '已删除'}],
      filialeName: [],
      outletsname: [],
      filiale: '',
      defaultshow: ['company', 'department', 'operator'],
      filialetype: '',
      editshow: false,
      posBase: '',
      criteriaShow: false,
      orgCondtionStr: '',
      initres: {
        org: [this.$login.f.orgid],
        dep: [],
        user: []
      }

    }
  },
  props: {
    excelurl: {
      type: String
    },
    row: {}
  },
  ready () {
    this.model.f_start_date = "''"
    this.model.f_end_date = "''"
    this.search()
  },
  methods: {
    getRes (obj) {
      this.orgCondtionStr = obj
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    operaterecord (row) {
      let condition = `ename = '${row.ename}'`
      this.model2.search(condition)
      this.infoshow = true
    },
    infoclose () {
      this.infoshow = false
    },
    editclose () {
      this.posBase = ''
      this.editshow = false
    },
    editSave () {
      this.editshow = false
      let setpos = {
        /* f_ename: this.posBase.ename, */
        f_terminal_number: this.posBase.f_terminal_number,
        f_equipment_type: this.posBase.f_equipment_type,
        f_terminal_name: this.posBase.f_terminal_name,
        f_bank_name: this.posBase.f_bank_name,
        f_mac_number: this.posBase.f_mac_number,
        f_username: this.posBase.f_username,
        f_comments: this.posBase.f_comments
        // f_reason: this.posBase.f_reason,
        // f_othereason: this.posBase.f_othereason
      }
      // if (this.posBase.f_posbase_state === '有') {
      //   setpos.id = this.posBase.f_posbase_id
      // }
      this.$resetpost('rs/entity/t_equipment', setpos, {resolveMsg: '保存成功', rejectMsg: '基本信息保存失败'})/* .then((res) => {
        this.$resetpost('rs/logic/getEditPosState',
          {data: {ename: this.posBase.ename, state: '', f_other_name: this.posBase.f_other_name}}, {}, 0)
      }) */
    },
    getEditState (val) {
      if (val.f_state === '正常') {
        this.$showMessage(`当前设备号： ${val.f_terminal_number} ,确认停用该设备？`, ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$showAlert(`设备号： ${val.f_terminal_number}，已停用`, 'success', 2000)
            val.f_state = '已删除'
            try {
              this.$resetpost('rs/logic/updatePosState', {data: {number: val.f_terminal_number, state: '已删除'}}, {}, 0).then((res) => {
              })
            } catch (error) {
              this.search()
            }
          }
        })
      } else {
        this.$showMessage(`当前设备号： ${val.f_terminal_number} ,确认启用该设备？`, ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$showAlert(`设备号： ${val.f_terminal_number}，已启用`, 'success', 2000)
            // this.model.rows.forEach((item) => {
            //   if (item.ename === val.ename) {
            //     item.f_state = '正常'
            //   }
            // })
            val.f_state = '正常'
            try {
              this.$resetpost('rs/logic/getEditPosState', {data: {number: val.f_terminal_number, state: '正常'}}, {}, 0).then((res) => {
              })
            } catch (error) {
              this.search()
            }
          }
        })
      }
    },
    editBeizhu  (val) {
      this.editshow = true
      this.posBase = val
    },
    getLoginFiliale (val) {
      if (val.orgtype === '总公司' || val.orgtype === '分公司') {
        this.filiale = val.name
        this.filialetype = val.orgtype
      } else {
        this.getLoginFiliale(val.parent)
      }
    },
    getAllFiliale (data, type) {
      if (data === undefined || data === '') {
        return
      }
      let val = {source: `tool.getChildrenOfResName($${data}$)`, userid: ''}
      let http = new HttpResetClass()
      http.load('POST', '/rs/search', {data: val}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        res.data.forEach((item) => {
          if (item.orgtype === type) {
            if (type === '分公司') {
              this.filialeName.push({label: item.name, value: item.name})
            }
            if (type === '营业厅') {
              this.outletsname.push({label: item.name, value: item.name})
            }
            this.getAllFiliale(item.name, type)
          }
        })
      })
    },
    selfSearch (args) {
      args.condition = `${args.condition} ` + this.orgCondtionStr
      this.model.search(args.condition, args.model)
    },
    cleanOutlet () {
      this.outletsname = []
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    clean () {
      this.$refs.paged.$refs.grid.select(null)
      this.$dispatch('clean')
    }
  },
  computed: {
    filiales () {
      return [{label: '全部', value: this.filiale}, ...this.filialeName]
    },
    outlets () {
      return [{label: '全部', value: ''}, ...this.outletsname]
    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
  .back-red{		/* 红色背景 */
    background-color: #F6C6CE;
    font-weight: bold;
  }
  .back-blue{		/* 蓝色背景 */

  }
</style>
