<template>
  <div class="span">
    <criteria-paged :model="model" class="list_area table_sy" 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="col-sm-4">
              <label class="font_normal_body">指令类型</label>
              <v-select :value.sync="model.f_instruct_type" v-model="model.f_instruct_type"
                        style="width: 60%"
                        placeholder='指令类型'
                        :options='$parent.$parent.instructType'
                        close-on-select
                        condition="f_instruct_type='{}'"></v-select>
            </div>
            <div class="col-sm-4">
              <label class="font_normal_body">&nbsp;指令状态</label>
              <v-select :value.sync="model.f_instruct_state" v-model="model.f_instruct_state"
                        style="width: 60%"
                        placeholder='指令状态'
                        :options='$parent.$parent.instructState'
                        close-on-select
                        condition="f_instruct_state='{}'"
              ></v-select>
            </div>

            <div class="col-sm-4">
              <label class="font_normal_body">&nbsp;开始时间</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_instruct_date > '{}'"
              ></datepicker>
            </div>
            <div class="col-sm-4">
              <label class="font_normal_body">结束时间</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_instruct_date < '{}'"
              ></datepicker>
            </div>
          <div class="span" 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>
            <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;">
              <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>
            <td style="text-align:center;">
              <nobr>{{row.f_inputtor}}</nobr>
            </td>
            <td style="text-align:center;" v-if="row.f_instruct_state === '待发送' && row.f_instruct_state !== '取消发送'">
              <nobr>
                <span><a href="#" @click.stop="$parent.$parent.$parent.backSend(row)">取消发送</a></span>
              </nobr>
            </td>
            <td style="text-align:center;" v-if="row.f_instruct_state !== '待发送' && row.f_instruct_state !== '取消发送'">
              <nobr>
                {{row.f_receive_state}}
              </nobr>
            </td>
            <td style="text-align:center;" v-if="row.f_instruct_state === '取消发送'">
              <nobr>
                <span title="操作人:{{row.f_cancel_inputtor}},操作原因:{{row.f_comments}}">已取消</span>
              </nobr>
            </td>
            <!-- <td style="text-align:center;"><nobr>{{row.f_info}}</nobr></td>
             <td style="text-align:center;"><nobr>{{row.f_comments}}</nobr></td>-->
            <td style="text-align:center;">
              <nobr><span title="原因:{{row.f_info}}">{{row.f_instruct_title}}</span></nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="handcental" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">取消发送</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <label  class="font_normal_body" >取消发送原因</label>
          <textarea class="form-control" v-model="cancelreason" rows="3" placeholder="请填写取消发送原因"></textarea>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="handcental" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="handcental" type="button" class="button_search" @click='confirmcenta()'>确认</button>
      </footer>
    </modal>
  </div>

</template>
<script>
  import {PagedList} from 'vue-client'

  export default {
    title: '指令页面',
    name: 'Querylnstruct',
    props: {
      row: {},
      tablename: {
        type: String,
        default: 't_instruct'
      },
      orderitem: {
        type: String,
        default: 'f_instruct_date desc'
      },
      items: {
        type: String,
        default: '*'
      }
    },
    data() {
      return {
        handcental: false,
        cancelreason: '',
        cancelid: '',
        f_userfiles_id: '',
        model: new PagedList('rs/sql/singleTable_OrderBy', 30, {
          tablename: "'" + this.tablename + "'",
          orderitem: "'" + this.orderitem + "'", items: "'" + this.items + "'"
        }),
        // model: null,
        row: null,
        searchshow: false,
        show: false
      }
    },

    ready() {
      this.$refs.paged.$refs.criteria.search()
    },
    watch: {
      'row'(val) {
        this.f_userfiles_id = val.f_userfiles_id;
        if (this.row != null) {
          this.$refs.paged.$refs.criteria.search()
        }
      }
    },
    methods: {
      clickshow() {
        this.searchshow = !this.searchshow
      },
      backSend(megrow) {
        if (megrow.f_inputtor != '系统必需') {
          this.handcental = true
          this.cancelid = megrow.id
        } else {
          this.$showAlert('该指令为系统必需状态，无法取消发送。', 'warning', 3000)
        }
      },
      confirmcenta() {
        let send = {
          id: this.cancelid,                                       //当前记录ID
          f_cancel_inputtor_id: this.$login.f.id,         //撤销人id
          f_cancel_inputtor: this.$login.f.name,         //撤销人姓名
          f_instruct_state: '取消发送',
          f_comments: this.cancelreason,
        }
        let param = {
          tablename: 't_instruct',
          basedata: send
        }
        this.$resetpost('rs/logic/iot_saveTable', param).then(() => {
          // this.params.rows.splice(index, 1)
          console.log("更新成功！")
        })
        this.handcental = false
        this.$refs.paged.$refs.criteria.search()
      },
      search(arg) {
        arg.condition = `${arg.condition} and f_userfiles_id='${this.row.f_userfiles_id}'`
        this.model.search(arg.condition, arg.model)
      }
    },
    computed: {
      instructType() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令类型')]
      },
      instructState() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令状态')]
      }
    },
  }
</script>
<style>
  .form-input-group label {
    text-align: right;
    width: auto;
  }
</style>
