<template>
<div class="flex " style="background: #f8f8f8">
  <div  class="auto bg-white" style="line-height: 32px;padding: 10px">
   <label style="float: left">指令：{{row.f_instruct_title}} </label>
    <div class="auto" style="float: right">
      <!--<button type="button" class="btn btn-default btn-sm"  @click="$back">返回</button>-->
      <button type="button" class="btn btn-default btn-sm"  @click="refresh">刷新</button>
      <button type="button" class="btn btn-primary btn-sm"  @click="cancle">取消</button>
      <button type="button" class="btn  btn-primary btn-sm"  @click="resend">重送</button>
    </div>
  </div>
  <div class="instruct-state flex-row bg-white" style="margin-top: 5px;height:auto;padding: 10px">
    <div class="instruct-left col-sm-12 auto">
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span >指令状态:</span>
          <span class="instruct-content" style="color: #499edf;font-size: 16px;font-weight: bold">{{row.f_instruct_state}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>执行状态:</span>
          <span class="instruct-content" style="color: #499edf;font-size: 16px;font-weight: bold">{{row.f_receive_state}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>指令编号:</span>
          <span class="instruct-content">{{row.id}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">

        <p  class="flex-row">
          <span>表编号:</span>
          <span class="instruct-content">{{row.f_user_id}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>表号:</span>
          <span class="instruct-content">{{row.f_meternumber}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>操作人员:</span>
          <span class="instruct-content">{{row.f_inputtor}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>指令说明:</span>
          <span class="instruct-content">{{row.f_instruct_state}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-6 auto">
        <p  class="flex-row">
          <span>表厂别名:</span>
          <span class="instruct-content">{{row.f_alias}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-12 auto">
        <p  class="flex-row">
          <span>生成时间:</span>
          <span class="instruct-content" style="flex:3 !important;">{{row.f_instruct_date}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-12 auto">
        <p  class="flex-row">
          <span>最后发送时间:</span>
          <span class="instruct-content" style="flex:3 !important;">{{row.f_send_date}}</span>
        </p>
      </div>
      <div class="col-sm-6 col-md-6 col-xs-12 auto">
        <p  class="flex-row">
          <span>最后响应时间:</span>
          <span class="instruct-content" style="flex:3 !important;">{{row.f_callback_date}}</span>
        </p>
      </div>
    </div>

  </div>
<div class="auto bg-white" style="margin-top: 5px;padding: 10px">
  <div class="title auto">
    <span>指令状态</span>
  </div>
  <div class="flex-row" style="font-size: 10px;padding: 10px">
    <timeline>
      <timeline-item color="#499edf">
        <p>待发送</p>
        <p>指令已就绪</p>
        <p>{{row.f_instruct_date}}</p>
      </timeline-item>
      <timeline-item :color="row.f_instruct_state==='已发送'?'#499edf':''" >
        <p>已发送</p>
        <p>已发送，等待响应结果</p>
        <p>{{row.f_send_date}}</p>
      </timeline-item>
      <timeline-item color="red" v-if="row.f_instruct_state==='执行失败'">
        <p>执行失败</p>
        <p>失败，请查看响应结果</p>
        <p>{{row.f_callback_date}}</p>
      </timeline-item>
      <timeline-item :color="row.f_instruct_state==='执行成功'?'#499edf':''" v-if="row.f_instruct_state!=='执行失败'">
        <p>执行成功</p>
        <p>指令已执行成功</p>
        <p>{{row.f_callback_date}}</p>
      </timeline-item>
    </timeline>
    <!--<div  class="step">-->
      <!--<div class="step-icon">-->
        <!--<img src="../../assets/对号.png" class="send-line" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
      <!--</div>-->
        <!--<p>待发送</p>-->
        <!--<p>指令已就绪</p>-->
        <!--<p>{{row.f_instruct_date}}</p>-->

    <!--</div>-->
    <!--<div class="step" >-->
      <!--<div class="step-icon">-->
        <!--<img src="../../assets/对号.png" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
      <!--</div>-->
      <!--<p  class="flex-row">待发送</p>-->
      <!--<p  class="flex-row">指令已发送</p>-->
      <!--<p>{{row.f_send_date}}</p>-->
      <!--</div>-->

    <!--<div class="step" >-->
      <!--<div  style="height: auto">-->
      <!--<img src="../../assets/对号.png" class="" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
      <!--</div>-->
      <!--<p  class="flex-row">待发送</p>-->
      <!--<p>指令已执行成功</p>-->
      <!--<p>{{row.f_callback_date}}</p>-->
    <!--</div>-->
  </div>

</div>
  <div class="row bg-white" style="margin-top: 5px;">
    <div class="content-head" style="background: #fafafa;height: 2em;">
      <p style="padding-left: 10px;line-height: 2em">指令内容</p>
    </div>
    <div  style="height: auto;padding: 10px" >
      <p>{</p>
      <p v-for="item in content">
        <span>{{item}}</span>
        <span v-if="$index<content.length-1">,</span>
      </p>
    <p>}</p>
    </div>
  </div>
</div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '指令信息',
    data () {
      return {
        content:[],
        msg: '',
        show: false
      }
    },
    props:['row'],
    methods:{
      refresh(){
        let data = {
          items: '*',
          tablename: 't_instruct',
          orderitem: 'id  desc',
          condition: ` id = '${this.row.id}'`
        }
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
          // console.log('查询返回'+JSON.stringify(row))
        this.row = row.data[0]
      }).catch((e) => {
        //   console.log('正在维护！')
        // console.log('错误信息+++++++'+JSON.stringify(e))
      })
      },
      cancle(){
        this.$showMessage(`您确认要取消指令吗？`, ['confirm', 'cancel']).then(async (res) => {
          if (res === 'confirm') {
          let http = new HttpResetClass()
          let condition = `id = '${this.row.id}'`
          // console.log('修改条件===' + JSON.stringify(condition))
          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/cancelSendInstruct`, {data: {condition: condition}}).then((row) => {
            this.$showMessage('取消指令操作成功！')
            this.refresh()
          //   console.log('修改返回' + JSON.stringify(row))
          // this.$showMessage('操作成功！将会在一段时间内重新生成开户指令！')
        }).catch((e) => {
            this.$showMessage('操作失败！请稍后重试！')
          // console.log('错误信息+++++++'+JSON.stringify(e))
        })
        }
      })
      },
      resend(){
        this.$showMessage(`您确认要重新发送指令？`, ['confirm', 'cancel']).then(async (res) => {
          if (res === 'confirm') {
          let http = new HttpResetClass()
          let condition = `id = '${this.row.id}'`
          // console.log('修改条件===' + JSON.stringify(condition))
          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/againSendInstruct`, {data: {condition: condition}}).then((row) => {
            // console.log('修改返回' + JSON.stringify(row))
          this.refresh()
          this.$showMessage('操作成功！将会在一段时间内重新发送指令！')
        }).catch((e) => {
            this.$showMessage('操作失败！请稍后重试！')
          // console.log('错误信息+++++++'+JSON.stringify(e))
        })
        }
      })
      },
      getInitData(){
        let data = JSON.parse(this.row.f_instruct_content)
        this.content = []
        for(let key in data){
          let param = key+':'+data[key]
          this.content.push(param)
        }
      },
    },
    watch:{
      'row'(val){
        if(val){
          this.getInitData()
        }
      }
    },
    ready () {
     this.getInitData()
    }
  }
</script>
<style media="screen" scoped>
div::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

div {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.font-head{
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.instruct-content{
 flex:1.5 !important;
}
.font-content{
  font-size: 12px;
  font-weight: normal;
  color: #666666;
}
  .meterinfo{
    border:1px solid #eeeeee;
    /*border-right: 2px solid #eeeeee;*/
  }
  .instruct-right div{
    height: auto;
  }
  .instruct-state{
    font-size: 14px;
  }
  .instruct{
    font-size: 10px;
  }
  .step{
    flex:1
  }
 .step-icon{
   height: auto;
 }
@media screen and (max-width: 1920px){
  .step-icon:after{
    content: "";
    width: 30%;
    height: 2px;
    margin-top: 16px;
    background-color: #6eb0e3;
    position: absolute;
    /*top: 10px;*/

  }
}
@media screen and (max-width: 768px){
  .step-icon:after{
    content: "";
    width: 22%;
    height: 2px;
    margin-top: 16px;
    background-color: #6eb0e3;
    position: absolute;
    /*top: 10px;*/

  }
}

.step p{
  margin-bottom: 5px !important;
}
  p span{
    flex:1
  }
</style>
