<!--
 * @Author: zhangbo
 * @Date: 2021-02-22 17:37:21
 * @E-mail: zhangbo@geovis.com.cn
 * @LastModifiedBy: zhangbo
 * @LastEditTime: 2021-03-08 09:27:05
 * @Desc: 
-->
<template>
  <div class="component-editor">
    <div class="attr-row">
      <span class="row-label">地球</span>
      <el-tooltip placement="top">
        <div style="max-width: 300px" slot="content">与该组件绑定的球组件</div>
        <el-select size="mini" v-model="componentInfo.viewerId">
          <el-option
            v-for="v in viewerList"
            :key="v"
            :value="v"
            :label="v"
          ></el-option>
        </el-select>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
  import basePluginEditor from './basePluginEditor';
  export default {
    name: 'veEditor',
    mixins:[basePluginEditor],
    props: {
      // 编辑器会传递给编辑面板组件的属性值，编辑器可以修改这些值来达到控制组件数据的作用
      componentInfo: { // 固定字段，收集所有属性值
        type: [Object],
        default () {
          return {
          }
        }
      }
    },
    data: function () {
      return {
        usedatasource: false,
      }
    },
    computed: {
    },
    watch: {
      'componentInfo': {
        handler (v) {
          console.log(v)
        },
        deep: true
      }
    },
    mounted: function () {
    },
    methods: {
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
.extent-div {
  display: flex;
  flex-direction: column;
  align-items: center;

  .extent-input {
    width: 60px;
    height: 28px;
    border: 1px solid #dcdfe6;
    color: #606266;
    padding: 0 10px;
  }

  .extend-sec {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .extent-center {
    width: 80px;
    height: 80px;
    background-color: #7d7d7d;
    margin: 10px;
    border-radius: 3px;
  }
}

.item-row {
  margin: 5px 0px;
  padding: 5px;
  display: flex;
  flex-direction: row;

  .item-label {
    width: 60px;
    display: flex;
    align-items: center;
  }

  .item-value {
    width: calc(100% - 60px);
    padding: 0 20px;
  }

  .attr-slider {
    display: 'block';
  }
}

.component-editor {
  .attr-row {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;

    &:hover {
      background-color: #6081bd33;
      border-radius: 5px;

      .label {
        color: #ffffff;
      }
    }

    .desc {
      text-align: left;
      margin: 10px 5px;
    }

    .value {
      color: #909399;
    }

    .row-label {
      font-weight: bold;
      display: inline-block;
      margin-bottom: 4px;
      font-size: 12px;
      min-width: 70px;
    }
  }
}
</style>
