<template>
  <div class="app-container">
    <el-row>
      <!--左半部分-->
      <el-col :span="6">
        <div style="width:90%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model.trim="listQuery.keyword" placeholder="场站名称/监控点" clearable @change="fetchData"/>
            </div>
            <el-tree
              :data="data"
              ref="tree"
              :v-loading="listLoading"
              node-key="monitorPointId"
              :highlight-current="true"
              default-expand-all
              :expand-on-click-node="true"
              @node-click="nodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="data.monitorPointName">{{ data.monitorPointName }}</span>
                <span v-else>{{ data.stationName }}</span>
              </span>
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <!--右半部分-->
      <el-col :span="18">
        <!--筛选条件-->
        <div class="search-div">
          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
            <el-form-item class="selectForm-container-item" prop="startTime">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="搜索起始时间"
                end-placeholder="搜索截止时间"
                @focus="dateClick"
                @blur="dateBlur"/>
            </el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button class="filter-item" type="primary" @click="live">实时预览</el-button>
          </el-form>
        </div>
        <el-card class="box-card" style="z-index: -1">
          <div class="body-right">
            <el-row>
              <el-col :span="7">
                <div class="item-div">
                  <span class="item-title">监控点名称：</span>
                  <span class="item-value">{{ monitorInfo.monitorPointName }}</span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="item-div">
                  <span class="item-title">安装位置：</span>
                  <span class="item-value">{{ monitorInfo.location }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="item-div">
                  <span class="item-title">设备IP：</span>
                  <span class="item-value">{{ monitorInfo.deviceIp }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="item-div">
                  <span class="item-title">设备用户名：</span>
                  <span class="item-value">{{ monitorInfo.deviceUser }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="7">
                <div class="item-div">
                  <span class="item-title">设备编号：</span>
                  <span class="item-value">{{ monitorInfo.devcode }}</span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="item-div">
                  <span class="item-title">安装时间：</span>
                  <span class="item-value">{{ monitorInfo.setupDate }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="item-div">
                  <span class="item-title">设备端口号：</span>
                  <span class="item-value">{{ monitorInfo.devicePort }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="item-div">
                  <span class="item-title">设备密码：</span>
                  <span class="item-value">{{ monitorInfo.devicePassword }}</span>
                </div>
              </el-col>
            </el-row>
            <div v-show="videoShow" class="play-window-block">
              <iframe name="play" scrolling="no" zIndex="-1" frameBorder="0" height="420px" width="100%" src="/static/webCtrl/demo-easy.html"/>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ListGasHistory from './components/ListGasHistory'
  import ChartGasHistory from './components/ChartGasHistory'
  import { getMonitorList } from '@/api/station'

  export default {
    name: 'GasData',
    components: { ListGasHistory, ChartGasHistory },
    data() {
      const validTime = (rule, value, callback) => {
        if (value !== '' && value.length > 0) {
          if(this.timeRange[1] === ''){
            callback(new Error('请选择搜索起止时间'))
          } else {
            callback()
          }
        } else {
          callback(new Error('请选择搜索起止时间'))
        }
      }
      return {
        videoShow: true,
        activeName: 'list',
        data: [],
        timeRange: [],
        listLoading: false,
        monitorInfo: {
          stationName: '',
          stationId: '',
          monitorPointId: '',
          monitorPointName: '',
          devcode: '',
          location: '',
          setupDate: '',
          deviceIp: '',
          devicePort: '',
          deviceUser: '',
          devicePassword: '',
          high: '' // 报警阈值
        },
        listQuery: {
          monitorId: '',
          startTime: '',
          endTime: '',
          offset: 1,
          limit: 20,
          sort: 'logTime',
          order: 'desc'
        }, // 筛选条件
        fullscreenLoading: false, // 全屏加载动画
        rules: {
          startTime: [{ required: true, validator: validTime, trigger: ['blur'] }]
        } // 前端校验规则
      }
    },
    watch: {
      // 当时间范围变化时，填充listQuery时间
      timeRange(val) {
        if (val && val.length > 0) {
          this.listQuery.startTime = val[0]
          this.listQuery.endTime = val[1]
        } else {
          this.listQuery.startTime = ''
          this.listQuery.endTime = ''
        }
      }
    },
    created() {
      // 接收iframe的传值
      window['vueDefined'] = (receiveParams) => {
        this.receiveParamsFromHtml(receiveParams)
      }
      this.fetchData()
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      // 获取数据
      fetchData() {
        this.listLoading = true
        getMonitorList(this.listQuery).then(response => {
          if(response.data.length>0) {
            var jsonArray = response.data
            for (var i = 0; i < jsonArray.length; i++) {
              jsonArray[i].children = jsonArray[i].monipoiList
              delete jsonArray[i].monipoiList
            }
            this.data = jsonArray
            debugger
            for(var j = 0; j< this.data.length; j++) {
              if( this.data[j].children.length>0){
                this.nodeClick(this.data[j].children[0])
                break
              }
            }
            this.listLoading = false
          }
        })
      },
      nodeClick(data){
        debugger
        if(data.monitorPointId) {
          this.monitorInfo = data
          let currentNode = this.$refs.tree.getNode(data)
          var parent = currentNode.parent
          if (parent.data.stationId) {
            this.monitorInfo.stationId = parent.data.stationId
            this.monitorInfo.stationName = parent.data.stationName
          }
          this.listQuery.monitorId = data.monitorPointId
          window.frames['play'].startPlayReal(null,this.monitorInfo.deviceIp)
          this.$nextTick(() => {
            this.$refs['tree'].setCurrentKey(data.monitorPointId)
          })
        }
      },
      // 查询数据
      search() {
        this.videoShow = true
        this.$refs['dataForm'].validate((valid) => {
          if(valid) {
            window.frames['play'].search(0, this.listQuery.startTime, this.listQuery.endTime)
          }
        })
      },
      dateClick(){
        this.videoShow = false
      },
      dateBlur(){
        this.videoShow = true
      },
      live() {
        this.videoShow = true
        window.frames['play'].startPlayReal(null)
      },
      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>
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .play-window-block {
    margin: 15px 15px 15px 0px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 175px);
  }
</style>