<template>
  <div class="app-container" style="padding-top:0px;overflow-y: hidden">
    <div style="overflow-y: hidden">
      <!--左半部分-->
      <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 size="small" @change="fetchData"/>
            </div>
            <el-tree
              ref="tree"
              :data="data"
              :highlight-current="true"
              :expand-on-click-node="true"
              node-key="monitorPointId"
              default-expand-all
              style="height: calc(100vh - 265px);"
              @node-click="nodeClick">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span v-if="data.deptId">{{ data.stationName }}</span>
                <span v-else>{{ data.monitorPointName }}</span>
                <span v-if="data.deptId" style="margin-left: 100px">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    @click="() => editNode(node, data)"/>
                  <el-button
                    :disabled="data.monitorPointCount>0"
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    style="margin-left: -10px"
                    @click="() => removeNode(node, data)"/>
                </span>
              </span>
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <!--右半部分-->
      <el-col :span="18">
        <!--筛选条件-->
        <div class="search-div">
          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
            <el-row>
              <el-button class="filter-item" type="primary" size="small" @click="addStation">新增场站</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="addMonitor">新增监控点</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="editMonitor">编辑监控点</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="delMonitor">删除监控点</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="setThresh">设置报警阈值</el-button>
            </el-row>
          </el-form>
        </div>
        <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: 10px">
            <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>
          <el-row class="play-window-block">
            <el-col :span="12" style="padding-top: 15px;padding-left: 15px">
              <!--v-show="videoShow"-->
              <iframe name="play" scrolling="no" border="0" height="460px" width="600px" vspale="0" frameBorder="0" src="/static/webCtrl/demo-easy.html"/>
            </el-col>
            <el-col :span="8" :offset="4" style="margin-top: 10px;padding-right: 10px" class="table-prelist">
              <el-row class="table-title" style="margin-bottom: 10px">
                <span>预置点列表</span>
              </el-row>
              <el-table :data="list" class="table-prelist" size="small" border height="calc(100vh - 320px)">
                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="column.class">{{ scope.row[column.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </div>
    <!--编辑用户的对话框-->
    <edit-monitor v-show="editMonitorShow" ref="editmonitor" @watchChild="fetchData"/>
    <edit-station v-show="editStationShow" ref="editstation" @watchChild="fetchData"/>
    <set-thresh v-show="setThreshShow" ref="setthresh" style="z-index: 9999" @watchChild="fetchData"/>
  </div>
</template>

<script>
import EditStation from './components/editStation'
import EditMonitor from './components/editMonitor'
import SetThresh from './components/setThresh'
import { getMonitorList, delMonitor, delStation, getPresetList } from '@/api/station'

export default {
  name: 'ListStation',
  components: {
    EditStation,
    EditMonitor,
    SetThresh
  },
  data() {
    return {
      listQuery: {
        keyword: ''
      },
      videoShow: true,
      editMonitorShow: false,
      editStationShow: false,
      setThreshShow: false,
      monitorInfo: {
        stationName: '',
        stationId: '',
        monitorPointId: '',
        monitorPointName: '',
        devcode: '',
        location: '',
        setupDate: '',
        deviceIp: '',
        devicePort: '',
        deviceUser: '',
        devicePassword: '',
        high: '' // 报警阈值
      },
      list: [],
      columns: [
        {
          text: '巡航线',
          value: 'lineNum',
          align: 'center',
          width: 60
        },
        {
          text: '巡航点',
          value: 'serialNum',
          align: 'center',
          width: 60
        },
        {
          text: '水平角',
          value: 'direction',
          align: 'center'
        },
        {
          text: '垂直角',
          value: 'pitch',
          align: 'center'
        }
        // {
        //   text: '停留时间',
        //   value: 'stopTime',
        //   align: 'center',
        //   width: 80
        // }
      ],
      data: [],
      listLoading: false,
      dialogFormVisible: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          src: require('../../assets/test.mp4'), // 路径
          type: 'video/mp4' // 类型
        }],
        poster: '../../assets/global_images/photo.jpg', // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  beforeCreate: function() { // 从后台获取系统配置，根据配置判断是否加载验证码控件

  },
  created() {
    // this.fetchData()
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 编辑场站
    editNode(node, data) {
      this.videoShow = false
      this.editMonitorShow = false
      this.editStationShow = true
      this.setThreshShow = false
      this.$refs.editstation.initDialog(true, data)
    },
    // 删除场站
    removeNode(node, data) {
      this.$confirm(
        '确定要删除此场站吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delStation(data.stationId).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.fetchData()
          }
        })
      })
    },
    // 打开新增对话框
    addStation() {
      this.videoShow = false
      this.editMonitorShow = false
      this.editStationShow = true
      this.setThreshShow = false
      this.$refs.editstation.initDialog(true, null)
    },
    addMonitor() {
      this.videoShow = false
      this.editMonitorShow = true
      this.editStationShow = false
      this.setThreshShow = false
      this.$refs.editmonitor.initDialog(true, null)
    },
    editMonitor() {
      this.videoShow = false
      this.editMonitorShow = true
      this.editStationShow = false
      this.setThreshShow = false
      this.$refs.editmonitor.initDialog(true, this.monitorInfo)
    },
    delMonitor() {
      this.$confirm(
        '确定要删除此监控点吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delMonitor(this.monitorInfo.monitorPointId).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.fetchData()
          }
        })
      })
    },
    setThresh() {
      this.videoShow = false
      this.editMonitorShow = false
      this.editStationShow = false
      this.setThreshShow = true
      this.$refs.setthresh.initDialog(true, this.monitorInfo)
    },
    nodeClick(node) {
      if (node.monitorPointId) {
        this.monitorInfo = node
        var finded = false
        for (var j = 0; j < this.data.length; j++) {
          if (finded) break
          if (this.data[j].children.length > 0) {
            var parent = this.data[j]
            for (var i = 0; i < parent.children.length; i++) {
              if (node.monitorPointId === parent.children[i].monitorPointId) {
                this.monitorInfo.stationId = parent.stationId
                this.monitorInfo.stationName = parent.stationName
                finded = true
                break
              }
            }
          }
        }
        this.$nextTick(() => {
          this.$refs['tree'].setCurrentKey(node.monitorPointId)
        })
        // 获取预置点列表
        getPresetList(node.monitorPointId).then(response => {
          this.list = response.data
          this.listLoading = false
        })
      }
    },
    // 查询数据
    search() {
      this.fetchData()
    },
    // 获取数据
    fetchData() {
      this.listLoading = true
      this.videoShow = 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
          var cur
          for (var j = 0; j < this.data.length; j++) {
            if (this.data[j].children.length > 0) {
              cur = j
              // this.nodeClick(this.data[j].children[0])
              // 获取预置点列表
              getPresetList(this.data[j].children[0].monitorPointId).then(response => {
                const compare = function (x,y) {
                  if(x.lineNum<y.lineNum) return -1
                  else if(x.lineNum>y.lineNum) return 1
                  else return 0
                }
                this.list = response.data.sort(compare)
                this.listLoading = false
              })
              break
            }
          }
          this.monitorInfo = this.data[cur].children[0]
          this.monitorInfo.stationId = this.data[cur].stationId
          this.monitorInfo.stationName = this.data[cur].stationName
          console.log(jsonArray)
          console.log(this.data)
          this.listLoading = false
          window.frames['play'].login()
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .table-prelist {
    .el-table td {
      padding: 2px 0px !important;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .form-container{
    margin-bottom: 20px;
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .el-date-editor{
    .el-range-separator{
      width: 7% !important;
    }
  }
  .el-range-separator{
    width: 7% !important;
  }
  .input_video{
    width: 650px;
    height: 650px;
    margin: 40px;
  }
  .item-value{
    color: #8c939d;
  }
  .play-window-block {
    margin: 15px 15px 15px 0px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 270px);
  }
</style>