<template>

  <div style="" class="span">

    <criteria-paged :model="model" v-ref:paged >
      <criteria partial='criteria' v-ref:criteria @condition-changed='$parent.search' >
        <div v-show="$parent.$parent.isdeal" novalidate class="form-horizontal select-overspread container-fluid auto" partial>

            <div class="col-sm-2"  style="float: left;padding-left: 8px">
              <label class="font_normal_body">报警类型</label>
              <v-select
                style="width: 60%"
                placeholder='报警类型'
                :value.sync="model.f_meter_brand"
                v-model="model.f_meter_brand"
                :options='$parent.$parent.WarningType'
                close-on-select
                condition="f_error_type='{}'">
              </v-select>
            </div>

            <div  class="col-sm-2 ">
              <label class="font_normal_body" style="word-break:keep-all;">起始时间</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_insert_date > '{}'"
              ></datepicker>
            </div>
          <div  class="col-sm-2 "  >
              <label  class="font_normal_body">&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_insert_date < '{}'"
              ></datepicker>
            </div>
          <div style="float: right">
              <button  class="button_search" @click="search()" v-el:cba>查询</button>
            </div>
          </div>

      </criteria>

      <data-grid  partial='list' v-ref:grid :model="model" class="list_area table_sy">

        <template partial='head'>
          <tr style="margin-top: -10px">
            <th>序号</th>
            <th>上报时间</th>
            <th>上报级别</th>
            <th>报警类型</th>
            <th>报警详情</th>
            <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center;width: 170px;">{{row.f_insert_date}}</td>
            <td style="text-align:center;">{{row.f_error_level}}</td>
            <td style="text-align:center;">{{row.f_error_type}}</td>
            <td style="text-align:center;">{{row.f_error_msg}}</td>
            <td style="text-align:center;" v-if="row.f_is_read == false" >
              <span ><a href="#" @click.stop="$parent.$parent.$parent.backSend1(row.id)">故障处理</a></span>
            </td>
            <td style="text-align:center;" v-if="row.f_is_read === true"><span title="备注信息:{{row.f_error_reason}}">备注信息</span></td>
          </tr>

        </template>

      </data-grid>
    </criteria-paged>
    <modal :show.sync="watchshow"  v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="tableFault()"><span>&times;</span></button>
        <h4 class="modal-title">信息备注</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="col-sm-12">
          <label class="font_normal_body">添加信息备注</label>
          <textarea name="name" rows="2" style="width: 100%"
                    class="ver-textarea" class="form-control"
                    placeholder='请填写信息备注'
                    v-model='f_error_reason'></textarea>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="watchshow" type="button" class="btn btn-default" @click='tableFault()'>取消</button>
        <button v-show="watchshow" type="button" class="btn btn-danger btn-ln fr" @click='saveException()'>确认</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  import Checkbox from 'vue-strap/src/Checkbox'
  import { PagedList } from 'vue-client'
  export default {
    components: {Checkbox},
    data () {
      return {
        watchshow: false,
        cancelid: '',
        condition: '',
        error_condition: '',
        f_error_reason: '',
        searchobj: {},
        model: new PagedList('rs/sql/singleTable_OrderBy', 20, {tablename: "'" + this.tablename + "'",
          orderitem: "'" + this.orderitem + "'",
          items: "'" + this.items + "'"})
      }
    },
    name: 'WatchDealWarning',
    props: {
      searchobj: {},
      isdeal: {},
      tablename: {
        type: String,
        default: 't_exception'
      },
      orderitem: {
        type: String,
        default: 'f_insert_date desc'
      },
      items: {
        type: String,
        default: '*'
      }
    },
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {

      backSend1 (megrow) {
        this.watchshow = true
        this.cancelid = megrow
      },

      update () {
        // 更改按钮
        this.error_condition = `(`
        // 拿到所有查到的对象遍历 选出已经勾选的并记录id
        for (var row in this.$refs.paged.model.rows) {
          if (this.$refs.paged.model.rows[row].f_is_read == true) {
            this.error_condition = this.error_condition + this.$refs.paged.model.rows[row].id + ','
          }
        }
        // 拼到条件
        this.error_condition = this.error_condition.substring(0, this.error_condition.length - 1)
        this.error_condition = this.error_condition + ')'
        // 调用后台
        this.$resetpost('rs/logic/iot_updateExceptionIsRead',
          {data: {condition: this.error_condition}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
          })
        console.log(this.watchshow)
        this.tableFault(this.error_condition)
        this.search()
      },
      checked (e, val) {
        val.f_is_read = e.target.checked
      },
      search (args) {
        this.$refs.paged.model.rows = ''
        if (this.isdeal) {
          this.condition = `${args.condition} and f_is_read=1 and f_userfiles_id='${this.searchobj.f_userfiles_id}'`
          this.model.search(this.condition, args.model)
        } else {
          this.condition = `f_is_read = 0 and ${args.condition} and f_userfiles_id='${this.searchobj.f_userfiles_id}'`
          this.model.search(this.condition, args.model)
          this.condition = '1=1'
        }
      },
      tableFault (val) {
        if (val) {
          console.log('开启弹窗')
        } else {
          console.log('返回置空')
          this.watchExce = {}
          this.f_error_reason = ''
        }
        this.watchshow = !this.watchshow
      },

      saveException () {
        let send = {
          id: this.cancelid,      // 当前记录ID
          f_is_read: 1,
          f_error_reason: this.f_error_reason   // 备注原因
        }
        let param = {
          tablename: 't_exception',
          id: 1,
          basedata: send
        }
        this.$resetpost('rs/logic/iot_saveTable', param).then(() => {
          // this.params.rows.splice(index, 1)
          this.watchshow = false
          this.$refs.paged.$refs.criteria.search()
          this.f_error_reason = ''
        })
      }
    },
    computed: {
      WarningType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('报警类型')]
      }
    },
    watch: {
      // 监听查询对象
      'searchobj' (val) {
        console.log('f_userfiles_id1:', val.f_userfiles_id)
        if (this.searchobj != null) {
          this.$refs.paged.$refs.criteria.search()
        }
      },
      'isdeal' (val) {
        this.$refs.paged.$refs.criteria.search()
      }

    }
  }
</script>

<style scoped>

</style>
