<template>
  <div ref="content">
    <a-card :bordered="false">
      <a-page-header style="border-bottom: 1px solid rgb(235, 237, 240); padding: 8px 16px" title="" />
      <split splitHeight="100%" leftWidth="220">
        <template slot="paneL">
          <ship-tree
            ref="shipTree"
            :shipOptions="shipOptions"
            @select="clickNode"
          />
        </template>
        <template slot="paneR">
          <div class="table-page-search-wrapper">
            <h2>{{ selShipData.shipNanme?selShipData.shipNanme:'' }}-轨迹回放</h2>
          </div>
          <a-divider />

          <iframe width="100%" style="height: calc(100% - 65px);border:none;padding: 0;margin: 0;" :src="gpsPlayUrl"></iframe>
        </template>
      </split>
    </a-card>
  </div>
</template>

<script>
import { listAllSysShip } from '@/api/system/sysShip'
import { locationPlay } from '@/api/gps/gps'
import ShipTree from './modules/ShipTree'
import Split from '@/components/pt/split/Index'

export default {
  name: 'TencentMapLocation',
  components: {
    Split,
    ShipTree
  },
  data() {
    return {
      selShipData: {},
      shipOptions: [],
      gpsPlayUrl: ''
    }
  },
  filters: {},
  created() {
    this.getTreeselect()
  },
  computed: {},
  watch: {},
  methods: {
    getPlayUrl() {
      locationPlay({ shipId: this.selShipData.id }).then(res => {
        this.gpsPlayUrl = res.data
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      listAllSysShip().then((response) => {
        this.shipOptions = response.data
        this.selShipData = this.shipOptions[0]
        this.getPlayUrl()
      })
    },
    clickNode(node) {
      var selectItem = node.$options.propsData.dataRef
      if (this.selShipData.id !== selectItem.id) {
        this.selShipData = node.$options.propsData.dataRef
        this.getPlayUrl()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-divider-horizontal {
  margin: 0;
  background: rgb(235, 237, 240);
}
.demo-split {
  height: 200px;
}
.demo-split-pane {
  padding: 10px;
}
.ant-avatar {
  font-size: 12px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px;
}
</style>
<style>
.location_info{
  width: 130px;
}
.location_info p{
  margin: 0;
  padding: 0;
}
</style>
