<!--  -->
<template>
  <div class="inner">
    <div class="mapCover">
      <el-amap
        class="bm-view"
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :plugin="plugin"
        :events="mapEvents"
      >
        <el-amap-marker vid="component-marker" v-if="componentMarker.position.length" :position="componentMarker.position"  ></el-amap-marker>
      </el-amap>
    </div>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图</el-radio>
      </el-radio-group>
    </div>
    <!-- tabs设备类型 -->
    <div class="equipTypebox">
      <div class="equipTypeBody">
        <div class="equipTypeList">
          <div v-for="(item,index) in equipType" @click="changeEquip(index,item)" @mouseover='mouseOve(index,item)' @mouseleave='mouseOut(index,item)' :key="item.type"  :class="[currSelectType==item.type?'active':'']" >{{item.name}}</div>
        </div>
        <div :style="'left:'+equipStyleLeft+'px'" class="equipHighLight"></div>
      </div>
    </div>
    <!-- 控制 -->
    <!-- <sidebar></sidebar> -->
    <components :is="sidebarComponents" @sidebarClear="sidebarClear()" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='queryInfo.type' :model="queryInfo.model"></components>
    <!-- 设备列表 -->
    <equip-list>
      <div class="searchEquipBox">
        <el-input
					style="cursor: pointer"
					placeholder="请输入内容"
					size="mini"
					clearable
					v-model="searchEquipVal"
					suffix-icon="el-icon-search"
					class="input-with-select"
          @change="getEquipList()"
				></el-input>
      </div>
      <div class="equipListBox" id="equipListBox"  v-loading="equipListloading" >
        <div class="equipList" >
          <div v-for="(item,index) in equipListCurr" :key="index" :class="[index==equipListActive?'active':'','equipItem']" @click="equipMarkerClick(item)">
            <div>
              <div class="equipId">
                <span :class="item.device_status?'online':'offline'"></span>
                {{item.device_id}}
              </div>
              <div class="equipCity">{{item.city}}</div>
            </div>
            <div>
              <div class="equipType">{{item.device_type_id | equipType}}</div>
              <div>{{item.addtime*1000 | formatTime}}</div>

            </div>
          </div>
        </div>
      </div>
      
    </equip-list>
    <!-- 杀虫灯数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <dialog-box v-if="detailsShow==2" width='800'>
          <template v-slot:header>
            <span class="dialog-title">杀虫灯数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['2']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <!-- <keep-alive> -->
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
                    <!-- </keep-alive> -->
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 测报灯数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <dialog-box v-if="detailsShow==3" width='800'>
          <template v-slot:header>
            <span class="dialog-title">测报灯数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['3']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 性诱设备数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <dialog-box v-if="detailsShow==4" width='800'>
          <template v-slot:header>
            <span class="dialog-title">性诱设备数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['4']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 气象站数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <dialog-box v-if="detailsShow==5" width='800'>
          <template v-slot:header>
            <span class="dialog-title">气象站数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info v-if="hackReset" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['5']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 监控数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <div v-if="detailsShow==6" class="jkDialog">
            <el-button type="blueInfo" size="small" @click="jkClose2()" >停止</el-button>
            <el-button type="blueInfo" size="small" @click="jkClose()" >刷新</el-button>
        <div id="videoCon"></div>
      </div>
      <!-- <dialog-box v-if="detailsShow==6" width='800'>
          <template v-slot:header>
            <span class="dialog-title">监控</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <div id="videoCon"></div>
          </template>
      </dialog-box> -->
    </transition>
    <!-- 孢子仪数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__zoomOut"
    >
      <dialog-box v-if="detailsShow==7" width='800'>
          <template v-slot:header>
            <span class="dialog-title">孢子仪数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info v-if="hackReset" @child-event="setTimeDialogShow" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['7']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 设置孢子仪载玻片、培养液更换时间配置弹框 -->
    <el-dialog
      title="配置（请及时填写）"
      :visible.sync="setTimeDialogVisible"
      width="420px"
    >
      <el-form ref="form" :model="time" label-width="130px">
        <el-form-item label="载玻片更换时间: ">
          <el-date-picker
            v-model="time.time01"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="培养液更换时间: ">
          <el-date-picker
            v-model="time.time02"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="grayInfo" @click="setTimeDialogVisible = false">取 消</el-button>
        <el-button type="blueInfo" @click="setTimeSubm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
import sidebar from "@/components/highStand/sidebar"
import equipList from "@/components/highStand/equipList"
import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "@/components/home/coordtransform_utils.js";  //纠偏方法
import dialogBox from './dialogHollow' //地图镂空弹框 
import equipState from './equipState' //设备状态
import qxzEquipState from './equipStateQxz' //气象站设备状态
import equipInfo from './equipInfo' //设备基础信息
import equipHistoryDate from './equipHistoryDate' //设备历史数据
import qxzEquipHistoryDate from './equipHistoryDateQxz' //气象站设备历史数据
import twentyFourHistoryDate from './twentyFourHistoryDate' //气象站24小时数据
import cbdTabPhoto from './cbdPhoto/cbdTabPhoto' //测报灯图片
import cbdTabPestStat from './cbdTabPestStat' //测报灯害虫统计
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
      sidebar,
      equipList,
      dialogBox,
      equipState,
      qxzEquipState,
      equipInfo,
      equipHistoryDate,
      qxzEquipHistoryDate,
      twentyFourHistoryDate,
      cbdTabPhoto,
      cbdTabPestStat,
  },
  data() {
    //这里存放数据
    return {
      user_id:'',
      sidebarComponents:'',
      amapManager,
      center: [106.323527,29.541514],
      zoom: 5,
      mapType: 1,
      plugin: [
        // {
        //   pName: "ToolBar",
        //   events: {
        //     init(instance) {
        //       console.log(instance);
        //     }
        //   }
        // },
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }
        // {
        //     pName: 'MapType',
        //     defaultType: 0,
        //     events: {
        //       init(instance) {
        //         console.log(instance);
        //       }
        //     }
        //   }
      ],
      componentMarker: {
        position: []
      },
      infoWindow: null,
      xyzTileLayer: null,
      xyzTileLayer2: null,
      mapEvents: {
        init: o => {
          this.xyzTileLayer = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 100
          });
          this.xyzTileLayer2 = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 101
          });
          o.add(this.xyzTileLayer);
          o.add(this.xyzTileLayer2);
        }
      },
      // tabs导航
      equipType:[
        {
          type:'',
          name:"全部",
        },
        {
          type:7,
          name:"孢子仪",
        },
        {
          type:6,
          name:"监控",
        },
        {
          type:5,
          name:"环境监测",
        },
        // {
        //   type:4,
        //   name:"性诱设备",
        // },
        // {
        //   type:3,
        //   name:"虫情测报",
        // },
        // {
        //   type:2,
        //   name:"杀虫灯"
        // },
      ],
      currSelectType:0,
      currSelectSite:0,
      equipStyleLeft:0,
      // 海量点样式表
      equipPoints:[],
      massMarks:null,
      geocoder:null,
      equipStyleObject:[
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      queryInfo:{
        equip_id:"",
        d_id:"",
        type:"",
        model:""
      },
      // 信息弹框
      detailsShow:false,
      // 孢子仪弹框
      setTimeDialogVisible:false,
      time:{
        time01:"",
        time02:"",
      },
      // 孢子仪配置载玻片时间did
      currbzyGlass:"",
      // 设备tabs标签
      activeName: "",
      nowPage: "",
      pages:{
        "2":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "3":[{
          name:"equipState",
          label:"实时状态",
        },
        {
          name:"cbdTabPhoto",
          label:"查看图片",
        },
        {
          name:"equipHistoryDate",
          label:"历史数据",
        },
        {
          name:"cbdTabPestStat",
          label:"害虫统计",
        }
        ],
        "4":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "5":[{
          name:"qxzEquipState",
          label:"实时状态",
        },{
          name:"twentyFourHistoryDate",
          label:"24小时数据",
        },{
          name:"qxzEquipHistoryDate",
          label:"历史数据",
        }],
        "7":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
      },
      // 右侧控制
      sidebarState:false,
      // 设备列表
      searchEquipVal:'',
      equipList:[],
      equipListCurr:[],
      equipListActive:'',
      hackReset:false,
      equipListloading: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    detailsShow(val){
      if(val != 0){
        this.activeName = this.pages[val][0].name
        this.nowPage = this.pages[val][0].name
      }else{
        if(val== 5){
          this.activeName = 'qxzEquipState'
          this.nowPage = 'qxzEquipState'
        }else{
          this.activeName = 'equipState'
          this.nowPage = 'equipState'
        }
      }
    }
  },
  //方法集合
  methods: {
    getUserEquipType(){
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.user_device_type",
        data: this.qs.stringify({
          user_id:this.user_id
        })
      }).then(res => {
        if (res.data.message == "") {
          this.equipType=[{
            type:'',
            name:'全部'
          }]
          for(let i of res.data.data.type_list){
            this.equipType.push({
              type:i,
              name:this.equipsTypeSwitch(i)
            })
          }
          
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipsTypeSwitch(i){
      switch (i) {
        case '2':
          return '杀虫灯';
          break;
        case '3':
          return '虫情测报灯';
          break;
        case '4':
          return '性诱测报';
          break;
        case '5':
          return '环境监测';
          break;
        case '6':
          return '监控';
          break;
        case '7':
          return '孢子仪';
          break;
        case '9':
          return '糖醋测报';
          break;
        case 2:
          return '杀虫灯';
          break;
        case 3:
          return '虫情测报灯';
          break;
        case 4:
          return '性诱测报';
          break;
        case 5:
          return '环境监测';
          break;
        case 6:
          return '监控';
          break;
        case 7:
          return '孢子仪';
          break;
        case 9:
          return '糖醋测报';
          break;
      }
    },
    changeMapType(val){
      let o = amapManager.getMap();
      if(val==0){
        this.xyzTileLayer.hide()
        this.xyzTileLayer2.hide()
      }else{
        this.xyzTileLayer.show()
        this.xyzTileLayer2.show()
      }
    },
    changeEquip(index,item){
      this.currSelectType = item.type;
      this.currSelectSite = index;
      this.detailsShow = ''
      this.searchEquipVal = ''
      this.getEquipList()
    },
    mouseOve(index,item){
      this.equipStyleLeft = 80*index
    },
    mouseOut(index,item){
      if(item.type!=this.currSelectType){
        this.equipStyleLeft = 80*this.currSelectSite
      }
    },
    iconFormat(equip_ip, item) {
      switch (equip_ip + "") {
        case "2":
          item.icon = require("@/assets/images/home/mapView/scd.png");
          break;
        case "3":
          item.icon = require("@/assets/images/home/mapView/cbd.png");
          break;
        case "4":
          item.icon = require("@/assets/images/home/mapView/xyq.png");
          break;
        case "5":
          item.icon = require("@/assets/images/home/mapView/qxz.png");
          break;
        case "6":
          item.icon = require("@/assets/images/home/mapView/jk.png");
          break;
        case "7":
          item.icon = require("@/assets/images/home/mapView/bzy.png");
          break;
        case "9":
          item.icon = require("@/assets/images/home/mapView/tccb.png");
          break;
      }
    },
    getEquipList() {
      this.equipListloading = true;
      this.componentMarker.position = []
      // if(this.infoWindow){
      //   this.infoWindow.close()
      // }
      var equip_type = this.currSelectType || '';
      this.setZoom = 4;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.equip_map_location",
        data: this.qs.stringify({
          equip_type: equip_type,
          device_id:this.searchEquipVal,
          user_id:this.user_id
        })
      }).then(res => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.equipShow = false;
          this.equips = data.map((item,index) => {
            this.iconFormat(item.device_type_id, item);
            item.style = item.device_type_id
            if(item.gps_type == 1){ //GPS
              item.lnglat = wgs84togcj02(item.lng,item.lat)
            }else{
              // this.lnglatFormat(item);
            }
            item.index = index
            return item;
          });
          
          if(this.massMarks){
            this.massMarks.clear()
          }
          this.$nextTick(()=>{
            console.log(this.equips)
            this.equipList = this.equips;
            this.equipListloading = false;
            this.equipListCurr = this.equips;
            this.massMarks = new AMap.MassMarks(this.equips, {
              zIndex: 199, // 海量点图层叠加的顺序
              zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
              style: this.equipStyleObject // 设置样式对象
            });
            var o = amapManager.getMap();
            this.massMarks.setMap(o)
            this.massMarks.on('click',e =>{
              this.$nextTick(()=>{
                document.getElementById("equipListBox").scrollTop = 87*e.data.index;
                
                this.equipMarkerClick(e.data)
              })
            })
          })
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipMarkerClick(item) {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
      this.equipShow = true; //图标上设备信息框
      this.equipsVisible = true; //右侧设备弹框
      this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
      this.currEquip = item;
      this.queryInfo.equip_id = item.device_id
      this.queryInfo.d_id = item.d_id
      this.queryInfo.type = item.device_type_id
      this.queryInfo.model = item.device_model
      this.equipListActive = item.index
      this.sidebarComponents = "" //siderbar为空
      if (item.device_type_id == 6) {
        //监控
        this.$axios({
          url: "/api/api_gateway?method=camera.camera_manage.addr_camera",
          method: "POST",
          data: this.qs.stringify({ 
            device_id: item.device_id,
           }),
        }).then((res) => {
          if (res.data.message == "") {
            let data = eval("(" + res.data.data + ")");
            let hlsHd = data.hlsHd;
            // this.jkSrc = hlsHd
            // console.log(this.jkSrc)
            let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
            console.log(hlsHd);
            document.getElementById("videoCon").innerHTML = playHtml;
            setTimeout(() => {
              console.log(document.getElementById("myPlayer"));
              this.player = new EZUIPlayer("myPlayer");
              console.log(player);
              this.player.play();
              // let player = videojs('myPlayer')
              // player.src({ src: hlsHd, type: 'application/x-mpegURL' })
              // player.play()
            }, 1000);
          }
        });
      }
    },
    jkClose(){
      this.player.stop()
      this.detailsShow='';
      console.log(this.player);
      
    },
    jkClose2(){
      // this.detailsShow='';
      console.log(this.player);
      
      this.player.stop()
    },
     //载玻片、培养液更换时间展示
    setTimeDialogShow(data){
      this.setTimeDialogVisible = true;
      this.time.time01 = data.glass
      this.time.time02 = data.cultivate
      this.currbzyGlass = data.d_id
    },
    //载玻片、培养液更换时间配置提交
    setTimeSubm() {
      let glass_slide_time = parseInt(
        new Date(this.time.time01).getTime() / 1000
      );
      let cultivate_time = parseInt(
        new Date(this.time.time02).getTime() / 1000
      );
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.updata_spore_time",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.currbzyGlass,
          glass_slide_time,
          cultivate_time,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("修改成功!");
        } else {
          this.$message.error(res.data.message);
        }
        this.setTimeDialogVisible = false;
      });
    },
    //tabs每次切换只渲染一个界面
    tabshandleClick(tab) {
      this.nowPage = tab.name;
     
    },
    // 查看更多控制
    lookmore(){
      this.sidebarComponents = 'sidebar'
      this.detailsShow=""
    },
    // 注销控制组件
    sidebarClear(val){
      this.sidebarComponents = ''
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.user_id = this.$store.state.user_id || sessionStorage.getItem("myuid");
    this.getUserEquipType()
    this.changeEquip(0,this.equipType[0])
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.inner{
    height: 100%;
    position: relative;
    .mapCover{
        height: 100%;
    }
    .mapTypebox{
        position: absolute;
        right: 20px;
        top:30px;
        background: #fff;
        padding: 5px;
        border-radius: 5px;
    }
}
// tabs设备类型
.equipTypebox{
  position: absolute;
  left: 20px;
  top:30px;
  // background: #fff;
  line-height: 32px;
  border-radius: 20px;
  .equipTypeBody{
    position: relative;
    z-index: 10;
    background: #262a31;
    border-radius: 43px;
    color: #fff;
    .equipTypeList{
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      >div{
        width: 80px;
        text-align: center;
        border-radius: 20px;
        cursor: pointer;
      }
      >div.active{
        // background: #0195ff;
        // color:#eee;
      }
      >div:hover{
        // color: #eee;
      }
    }
    .equipHighLight{
      position: absolute;
      top: 0;
      height: 32px;
      width: 80px;
      border-radius: 20px;
      background: #0195ff;
      z-index: 0;
      transition: all 1s;
    }
  }
  
}

// 设备数据样式
.equipData{
  padding-top: 10px;
  position: relative;
  .more{
    position: absolute;
    right: 5px;
    top: 20px;
    z-index: 9999;
    cursor: pointer;
  }
  .more:hover{
    color: #0195ff;
  }
}
// 弹框tabs样式覆盖
/deep/.el-tabs__active-bar{
  background-color: #0295ff;
}

// 监控弹框样式
.jkDialog{
  position: fixed;
  width: 750px;
  background: #323a47;
  top: 200px;
  left: 30%;
}
// 设备列表
.searchEquipBox{
    padding: 20px;
    background: #0195ff;
}
.equipListBox{
    position: absolute;
    left: 0;
    right: 35px;
    top: 69px;
    bottom: 0;
    overflow: auto;
  .equipList{
    // padding: 20px;
    .equipItem{
      padding: 10px 7px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      margin: 15px;
      border: 1px dashed transparent;
      border-bottom: 1px dashed #ddd;
      padding-bottom: 10px;
      color: #8b8b8b;
      .equipId{
        line-height: 34px;
        font-size: 14px;
        color: #000;
        font-weight: 700;
        span{
          display: inline-block;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          margin-right: 3px;
        }
        span.online{
          background: #0195ff;
        }
        span.offline{
          background: red;
        }
      }
      .equipCity{
        text-indent: 16px;
      }
      .equipType{
        line-height: 34px;
        font-size: 14px;
        color: #0195ff;
        font-weight: 700;
        text-align: right;
      }
    }
    .equipItem.active{
      border: 1px dashed #0195ff;
      box-shadow: 0px 0px 5px 1px #39acff;
    }
  }
}

</style>