<template>
  <div class="main box">
    <div class="left box box_v">
      <div class="h1">JS 示例</div>
      <div class="box_f1 leftdiv box box_v">
        <div class="h2" v-for="obj in data" @click="apiChange(obj)">{{obj.name}}</div>
      </div>
    </div>
    <div class="mapdiv box_f1">
      <!--<div ref="threediv" class="threediv"></div>-->
      <OneGltf class="oneGltf"
            source="http://localhost:8088/modal/scene.gltf">
      </OneGltf>
      <Map ref="map" @ready="ready"></Map>
    </div>
    <!--
    <div class="right box box_v">
      <div class="h1">标签</div>
      <div class="prediv">
        <pre>
          <code>{{codeHtml}}</code>
        </pre>
      </div>
      <div class="h1">API</div>
      <div class="tablediv" v-if="apiHtml && apiHtml.length>0">
        <table>
          <tr>
            <td>属性</td>
            <td>说明</td>
            <td>类型</td>
            <td>默认值</td>
          </tr>
          <tr v-for="obj in apiHtml">
            <td>{{obj.name}}</td>
            <td>{{obj.text}}</td>
            <td>{{obj.type}}</td>
            <td>{{obj.value}}</td>
          </tr>
        </table>
      </div>
      <div class="rightStr" v-if="apiString!=''"><pre class="rightPre">{{apiString}}</pre></div>
    </div>
    -->
  </div>
</template>

<script>
  import Map from './Map'
  import InitMap from '../api/InitMap'
  import Method from '../api/Method'
  import ChangeLayer from '../api/ChangeLayer'
  import CustomLayer from '../api/CustomLayer'
  import DrawPolyline from '../api/DrawPolyline'
  import DrawPolygon from '../api/DrawPolygon'
  import DrawPoint from '../api/DrawPoint'
  import DrawBillboard from '../api/DrawBillboard'
  import DrawRectangle from '../api/DrawRectangle'
  import DrawEllipse from '../api/DrawEllipse'
  import Demo from '../api/Demo'
  import clearDraw from '../api/clearDraw'
  export default {
    name: "Main",
    data() {
      return {
        data: [ Demo, InitMap, ChangeLayer, CustomLayer, clearDraw, DrawPoint, DrawBillboard,  DrawPolyline, DrawPolygon, DrawEllipse, DrawRectangle, Method ],
        codeHtml: '',
        apiHtml: [],
        apiString: '',
        ctmap: null
      }
    },
    mounted () {

    },
    methods: {
      ready() {
        //this.threeinit()
      },
      apiChange(obj) {
        this.codeHtml = obj.codeHtml
        this.apiHtml = obj.apiHtml || []
        this.apiString = obj.apiString || ''
        if(obj.action && typeof obj.action == 'function') {
          obj.action(this.$refs['map'], this)
        }
      }
    },
    components: { Map }
  }
</script>

<style scoped>
.main {
  position: relative;
  width: 100%;
  height: 100%;
}
.left {
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dedede;
  padding: 10px;
}
.right {
  width: 400px;
  height: 100%;
  box-sizing: border-box;
  border-left: 1px solid #dedede;
  padding: 10px;
}
.h1 {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dedede;
}
.h2{
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 1px solid #dedede;
}
.prediv {
  width: 100%;
  height: 200px;
  overflow-x: auto;
}
.threediv {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  left: 100px;
  top: 100px;
}
.oneGltf {
  border: 1px solid #f20;
  top: 50px;
  left: 100px;
  width: 500px;
  height: 500px;
  position: absolute;
  z-index: 100;
}

.mapdiv {
  position: relative;
  height: 100%;
}
.leftdiv {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}
.tablediv {
  width: 100%;
  height: auto;
  overflow: auto;
  margin-top: 10px;
  font-size: 12px;
}
.tablediv table {
  width: 100%;
  border-spacing: 0;
  border-collapse:collapse;
}
.tablediv table td {
  border: 1px solid #dedede;
  text-align: center;
}
.rightStr {
  font-size: 12px;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
