<template lang="pug">
  <div class='m_i_dialog'>
    <el-dialog  width="1100px" :close-on-click-modal='false' :visible.sync='visible' :modal-append-to-body='false'>
      .title-bold(slot='title') 指令详情
      <div style="height:430px;">
        <div class="m_i_dialog_lift">
          <div class="header_title">基本信息</div>
          <el-form :model='dataForm'  ref='dataForm' :inline='true'  label-width="100px">
            <el-form-item label='指令ID:' prop='port'>
              <el-input size="medium" :title='dataForm.instruction' v-model='dataForm.instruction' readonly></el-input>
            </el-form-item>
            <el-form-item label='资源点名称:' prop='port'>
              <el-input  size="medium" :title='dataForm.resourceName' v-model='dataForm.resourceName' readonly></el-input>
            </el-form-item>
            <el-form-item label='资源点编码:' prop='port'>
              <el-input  size="medium" v-model='dataForm.code' readonly></el-input>
            </el-form-item>
            <el-form-item label='资源点类型:' prop='port'>
              <el-input  size="medium" v-model='dataForm.type' readonly></el-input>
            </el-form-item>
            <el-form-item label='资源点状态:' prop='port'>
              <el-input  size="medium" v-model='dataForm.status' readonly></el-input>
            </el-form-item>
            <el-form-item label='IP-PORT:' prop='port'>
              <el-input  size="medium" v-model='dataForm.addressCode+":"+dataForm.port' readonly></el-input>
            </el-form-item>
            <el-form-item label='线路站点:' prop='port'>
              <el-input  size="medium" :title='dataForm.lineStationName' v-model='dataForm.lineStationName' readonly></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="m_i_dialog_right">
          <div class="header_title">运行信息</div>
          <el-form :model='dataForm' ref='dataForm' :inline='true'  label-width="100px" style='padding-left: 20px;'>
            <el-form-item label='子系统:' prop='port'>
              <el-input size="medium" v-model='dataForm.subSystem' readonly></el-input>
            </el-form-item>
            <el-form-item label='执行人:' prop='port'>
              <el-input  size="medium" v-model='dataForm.createUser' readonly></el-input>
            </el-form-item>
            <el-form-item label='执行完成时间:' prop='port'>
              <el-input  size="medium" v-model='dataForm.createTime' readonly></el-input>
            </el-form-item>
            <el-form-item label='执行结果:' prop='port'>
              <el-input  size="medium" v-model='dataForm.result' readonly></el-input>
            </el-form-item>
            <el-form-item label='告警等级:' prop='port'>
              <el-input v-if="!dataForm.eventLevel" value="" size="medium" readonly></el-input>
              <el-input v-if="dataForm.eventLevel==1" value="特别重大" size="medium" readonly></el-input>
              <el-input v-if="dataForm.eventLevel==2" value="重大" size="medium" readonly></el-input>
              <el-input v-if="dataForm.eventLevel==3" value="一般" size="medium" readonly></el-input>
            </el-form-item>
            <el-form-item label='故障等级:' prop='port'>
              <el-input  size="medium" v-model='dataForm.xx' readonly></el-input>
            </el-form-item>
            <el-form-item label='触发方式:' prop='port'>
              <el-input v-if="dataForm.createUser!='系统'" value="手动" size="medium" readonly></el-input>
              <el-input v-if="dataForm.createUser=='系统'" value="自动" size="medium" readonly></el-input>
            </el-form-item>
            <el-form-item label='指令来源:' prop='port'>
              <el-input v-if="!dataForm.source || dataForm.source==1" value="手动操作" size="medium" readonly></el-input>
              <el-input v-if="dataForm.source==2" value="系统联动" size="medium" readonly></el-input>
              <el-input v-if="dataForm.source==3" value="预案执行" size="medium" readonly></el-input>
            </el-form-item>
            <el-form-item label='部署位置:' prop='port'>
              <el-input  size="medium" :title='dataForm.deployLocation' v-model='dataForm.deployLocation' readonly></el-input>
            </el-form-item>
            <el-form-item label='附属信息:' prop='port'>
              <el-input  size="medium" :title='dataForm.attachedInfo' v-model='dataForm.attachedInfo' readonly></el-input>
            </el-form-item>
            <el-form-item label='动作编号:' prop='port'>
              <el-input  size="medium" v-model='dataForm.xx' readonly></el-input>
            </el-form-item>
            <el-form-item label='动作名称:' prop='port'>
              <el-input  size="medium" v-model='dataForm.actionName' readonly></el-input>
            </el-form-item>
            <el-form-item label='动作参数:' prop='port'>
              <el-input type="textarea" resize="none" readonly v-model="paramStr"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span class="dialog-footer" slot='footer'>
        <el-button type="primary" @click='visible = false'>关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      visible: false,
      paramStr: '',
      dataForm: {
      }
    }
  },
  created() {
      this.dataForm = {
      }
  },
  methods: {
    init (res) {
      // console.log(res)
     this.visible = true

     this.$http({
        url: this.$http.adornUrlEq(`/orVideoMonitor/getId`),
        method: 'get',
        params: { id: res.id,
                source: res.source,
                stationId: res.stationId,
                byx3: res.byx3 }
      }).then(data => {
        if (data && data.code === 0) {
          this.dataForm = data.bean
          console.log('dataForm:', this.dataForm)
          this.dataForm.status == 1 ? this.dataForm.status = '正常' : this.dataForm.status = '不可用'
          this.dataForm.result == 1 ? this.dataForm.result = '成功' : this.dataForm.result = '失败'

          this.paramStr = ''.concat((this.dataForm.paramsName1 ? this.dataForm.paramsName1 : ''), (this.dataForm.paramsValue1 ? this.dataForm.paramsValue1 : ''), (this.dataForm.paramsName2 ? ',' + this.dataForm.paramsName2 : ''), (this.dataForm.paramsValue2 ? this.dataForm.paramsValue2 : ''))

          // this.dataForm.params = (this.dataForm.paramsName1 ? this.dataForm.paramsName1 : '') + (this.dataForm.paramsValue1 ? this.dataForm.paramsValue1 : '') + (this.dataForm.paramsName2 ? this.dataForm.paramsName2 : '') + (this.dataForm.paramsValue2 ? this.dataForm.paramsValue2 : '')
          // console.log('dataForm:', this.dataForm)
          // console.log('params:', this.paramStr)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .m_i_dialog_lift{
    width:364px;
    height:450px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(23, 41, 71, 0.08);

    float: left;
    box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    .header_title{
      height: 40px; width: 344px; background: #EEF8FF; line-height: 40px; padding-left: 20px; font-family:Microsoft YaHei; font-weight:bold; margin-bottom: 10px;
    }
    .el-form-item{
      margin: 10px 0 0 0 ;
    }
  }
  .m_i_dialog_right{
    width:670px;
    height:450px;
    float: left;
    background:rgba(255,255,255,1);
    border:1px solid rgba(23, 41, 71, 0.08);
    margin-left: 20px;
    box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    .header_title{
      height: 40px; width: 650px; background: #EEF8FF; line-height: 40px; padding-left: 20px; font-family:Microsoft YaHei; font-weight:bold; margin-bottom: 10px;
    }
    .el-form-item{
      margin: 10px 0 0 0 ;
    }
    .el-textarea{
      width: 267%;
    }
  }
</style>
