<template>
  <el-dialog :visible.sync="dialogFormVisible" title="报警详情">
    <el-form v-loading="loading" ref="dataForm" :model="alarmForm" label-well-code="right" label-width="100px">
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <el-form-item label="报警时间" prop="alarmTime">
            <el-input v-model.trim="alarmForm.alarmTime" disabled type="text"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" justify="center">
          <el-form-item label="报警原因" prop="alarmContent">
            <el-input v-model.trim="alarmForm.alarmContent" disabled type="text"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="12" justify="center">
          <el-form-item label="报警场站" prop="stationName">
            <el-input v-model.trim="alarmForm.stationName" disabled type="text"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" justify="center">
          <el-form-item label="报警点位" prop="monitorName">
            <el-input v-model.trim="alarmForm.monitorName" disabled type="text"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="12" justify="center">
          <el-form-item label="报警浓度值" prop="alarmValue">
            <el-input v-model.trim="alarmForm.alarmValue" disabled type="text"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" justify="center">
          <el-form-item label="报警阈值" prop="alarmThresh">
            <el-input v-model.trim="alarmForm.alarmThresh" disabled type="text"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="play-window-block">
      <iframe name="play" scrolling="no" zIndex="-1" frameBorder="0" height="360px" width="100%" src="/static/webCtrl/demo-easy.html"/>
    </div>
  </el-dialog>
</template>

<script>
// import { } from '@/api/strategy'
import { getDayTime } from '@/utils/dateutils'

export default {
  name: 'AlarmDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      alarmForm: {
        id: '', // id
        alarmTime: '', // 报警时间
        alarmContent: '', // 报警类型
        stationName: '', // 报警场站
        monitorName: '', // 报警点位
        alarmValue: '', // 报警值
        alarmThresh: '' // 报警阈值
      }, // 表单
      loading: false // 加载
    }
  },
  watch: {
  },
  created() {
    // 接收iframe的传值
    window['vueDefined'] = (receiveParams) => {
      this.receiveParamsFromHtml(receiveParams)
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(row = null) {
      this.dialogFormVisible = true
      this.alarmForm = {
        id: row.id, // id
        alarmTime: row.alarmTime, // 报警时间
        alarmContent: row.alarmContent, // 报警类型
        stationName: row.stationName, // 报警场站
        monitorName: row.monitorName, // 报警点位
        alarmValue: row.alarmValue, // 报警值
        alarmThresh: row.alarmThresh // 报警阈值
      }
      var arr1 = this.alarmForm.alarmTime.split(' ')
      var sdate = arr1[0].split('-')
      var date = new Date(sdate[0], sdate[1] - 1, sdate[2])
      var startTime = getDayTime(date.getTime() - 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
      var endTime = getDayTime(date.getTime() + 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
      console.log(startTime)
      debugger
      window.frames['play'].stopPlayReal()
      window.frames['play'].search(0, startTime, endTime)
    },
    // 重置表单
    resetForm() {
      this.alarmForm = {
        id: '', // id
        alarmTime: '', // 报警时间
        alarmContent: '', // 报警类型
        stationName: '', // 报警场站
        monitorName: '', // 报警点位
        alarmValue: '', // 报警值
        alarmThresh: '' // 报警阈值
      }
    },
    receiveParamsFromHtml(res) {
      if (res.indexOf('0') > -1) this.$message.success(res.replace('0', ''))
      else if (res.indexOf('-1') > -1) this.$message.error(res.replace('-1', ''))
      else this.$message.info(res.replace('1', ''))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .play-window-block {
    margin: 15px 70px 15px 70px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    //height: calc(100vh - 175px);
  }
</style>