<template>
  <div @keyup.enter="search" class="span">
    <criteria-paged :model="model" class="list_area table_sy" v-ref:paged>
      <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
        <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
          <div class="row">

            <div class="col-sm-2 form-group">
              <label class="font_normal_body">指令类型</label>
              <v-select :options='$parent.$parent.instructType' :value.sync="model.f_instruct_type"
                        close-on-select
                        condition="f_instruct_type='{}'"
                        placeholder='指令类型'
                        style="width: 60%"
                        v-model="model.f_instruct_type"></v-select>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">指令状态</label>
              <v-select :options='$parent.$parent.instructState' :value.sync="model.f_instruct_state"
                        close-on-select
                        condition="f_instruct_state='{}'"
                        placeholder='指令状态'
                        style="width: 60%"
                        v-model="model.f_instruct_state"
              ></v-select>
            </div>

            <div class="col-sm-2 form-group">
              <label class="font_normal_body">开始时间</label>
              <datepicker :format="'yyyy-MM-dd HH:mm:ss'"
                          :value.sync="model.f_start_date"
                          class="datepicker"
                          condition="f_instruct_date > '{}'"
                          placeholder="起始时间"
                          style="width: 60%"
                          v-model="model.f_start_date"
              ></datepicker>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">结束时间</label>
              <datepicker :format="'yyyy-MM-dd HH:mm:ss'"
                          :value.sync="model.f_end_date"
                          class="datepicker"
                          condition="f_instruct_date < '{}'"
                          placeholder="结束时间"
                          style="width: 60%"
                          v-model="model.f_end_date"
              ></datepicker>
            </div>
            <div style="float: right">
              <button @click="search()" class="button_search" v-el:cba>查询</button>
            </div>
          </div>

        </div>
      </criteria>
      <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
        <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>
            <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_title}}</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_send_date}}</nobr>
            </td>
            <td style="text-align:center;">
              <nobr>{{row.f_callback_date}}</nobr>
            </td>
            <td style="text-align:center;">
              <nobr>{{row.f_inputtor}}</nobr>
            </td>
            <td style="text-align:center;">
              <nobr>{{row.f_operate_date}}</nobr>
            </td>
<!--            <td style="text-align:center;">-->
<!--              <nobr>{{row.f_type}}</nobr>-->
<!--            </td>-->
<!--            这里-->
            <td style="text-align:center;">
              <nobr>{{$parent.$parent.$parent.stateFlow(row)}}</nobr>
<!--              <nobr>{{row.f_state}}</nobr>-->
            </td>
            <td style="text-align:center;">
              <nobr>{{row.f_operator}}</nobr>
            </td>
            <td style="text-align:center;">
              <nobr>{{row.f_operator_data}}</nobr>
            </td>
            <td style="text-align:center;" v-if="row.f_instruct_state === '待发送' && row.f_instruct_state !== '取消发送'">
              <nobr>
                {{row.f_instruct_state}}
              </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 >{{row.f_info}}</span></nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="handcental" backdrop="false" v-ref:modal>
      <header class="modal-header" slot="modal-header">
        <h4 class="modal-title">取消发送</h4>
      </header>
      <article class="modal-body" slot="modal-body">
        <div class="form-group">
          <label  class="font_normal_body" >取消发送原因</label>
          <textarea class="form-control" placeholder="请填写取消发送原因" rows="3" v-model="cancelreason"></textarea>
        </div>
      </article>
      <footer class="modal-footer" slot="modal-footer">
        <button @click='close' class="btn btn-default" type="button" v-show="handcental">取消</button>
        <button @click='confirmcenta()' class="button_search" type="button" v-show="handcental">确认</button>
      </footer>
    </modal>
  </div>

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

  export default {
    title: '历史指令查看',
    name: 'QueryHistorylnstruct',
    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/insturctDetailHistoryQuery', 30, {f_userfiles_id: this.row.f_userfiles_id}),
        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: {
      stateFlow: function (row) {
        console.log(row)
        let state = ""
        if (row.f_instruct_type.includes("阀门控制")) {
          let content = JSON.parse(row.f_instruct_content)
          if (content.isOpen !== null) {
            if (content.isOpen === 1) {
              state = "开阀"
            } else if (content.isOpen === 0) {
              state = "关阀"
            } else {
              state = row.f_state
            }
            return state
          }
        } else {
          return row.f_state
        }
      },
      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 scoped>
  .form-input-group label {
    text-align: right;
    width: auto;
  }
</style>
