<template>
  <!-- 工具栏 -->
  <div class="topbar">
    <!-- <div
      class="icons fl biUserDefinedIconDrag-dom_box"
      v-for="(item,index) of biTopbarItem.topBarTabTable"
      :key="index+'1'"
    >
      <p>
        <span
          :class="'icons__img biUserDefinedIconDrag__dom iconfont '+item.iconfont "
          draggable="true"
          :type="item.type"
          :style="'color:'+ item.color"
          @dragstart="dragstart($event,item.type,item)"
          @dragend="dragend($event,item.type,item)"
        ></span>
      </p>
      <p>{{item.title}}</p>
    </div>
    <div class="lines fl"></div>
    <div class="icons fl biUserDefinedIconDrag-dom_box">
      <p>
        <span
          v-for="(item,index) of biTopbarItem.topBarChart"
          :key="index"
          :class="'icons__img biUserDefinedIconDrag__dom iconfont '+item.iconfont "
          draggable="true"
          type="chart"
          :state="item.state"
          :chart="item.title"
          :code="item.code"
          :title="item.title"
          :style="'color:'+ item.color"
          @dragstart="dragstart($event,'chart',item)"
          @dragend="dragend($event,item.type,item)"
        ></span>
      </p>
      <p>图表</p>
    </div>
    <div class="lines fl"></div>
    <div class="icons fl biUserDefinedIconDrag-dom_box">
      <p>
        <span
          v-for="(item,index) of biTopbarItem.topBarScreen"
          :key="index"
          :class="'icons__img biUserDefinedIconDrag__dom iconfont '+item.iconfont "
          draggable="true"
          type="screen"
          :state="item.state"
          :title="item.title"
          style="color:#aaaaaa"
          @dragstart="dragstart($event,'screen',item)"
          @dragend="dragend($event,'screen',item)"
        ></span>
      </p>
      <p>参数控件</p>
    </div>
    <div class="lines fl"></div>
    <div class="icons fl biUserDefinedIconDrag-dom_box">
      <p>
        <span
          v-for="(item,index) of biTopbarItem.topBarElement"
          :key="index"
          :class="'icons__img biUserDefinedIconDrag__dom iconfont '+item.iconfont "
          draggable="true"
          type="element"
          :state="item.state"
          :title="item.title"
          :style="'color:'+item.color"
          @dragstart="dragstart($event,'element',item)"
          @dragend="dragend($event,'element',item)"
        ></span>
      </p>
      <p>元素控件</p>
    </div>
    <div class="lines fl"></div> -->
    <div
      :class="'icons preview ' + (index===7?'fr':'fl')"
      v-for="(item,index) of biTopbarItem.topBarOpt"
      :key="index"
      @click="topBarOptClick(item)"
    >
      <p>
        <span :class="'icons__img iconfont '+item.iconfont " :style="'color:'+ item.color"></span>
      </p>
      <p>{{item.title}}</p>
    </div>
  </div>
  <!-- 工具栏 end -->
</template>

<script>
import biTopbarItem from './biTopbarItem.json'
import _ from 'lodash'
export default {
  components: {},
  mixins: [],
  props: [],
  data() {
    return {
      biTopbarItem: biTopbarItem
    }
  },
  created() {},
  methods: {
    topBarOptClick(item) {
      this.$emit('topBarOptClick', item)
    },
    hide() {
      this.showDialogType = ''
    },
    dragstart(ev, type, item) {
      this.$emit('dragstart', ev, type, item)
    },
    dragend(ev, type, item) {
      this.$emit('dragend', ev, type, item)
    }
  },
  watch: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
.topbar {
  border-bottom: 1px solid var(--border_color);
  background-color: #ffffff;
  margin: 5px 0;
  border-radius: 5px;
  padding: 10px 0;

  p {
    font-size: 12px;
  }
  .iconfont {
    font-size: 18px;
  }
  .box {
    height: 100%;
  }
  .preview:hover .icons__img {
    color: var(--base-acv) !important;
  }
  .preview:hover {
    color: var(--base-acv);
    cursor: pointer;
  }
  .icons {
    padding: 0 3px;
    display: inline-block;
    text-align: center;
    .icons__img {
      display: inline-block;
      text-align: center;
      height: 25px;
      line-height: 25px;
      padding: 0 2px;
      margin: 0 3px;
      img {
        width: auto;
        height: 20px;
        pointer-events: none;
      }
    }
    .biUserDefinedIconDrag__dom:hover {
      color: var(--base-acv);
      background-color: #f7f7f7;
      cursor: move;
    }
  }
  .lines {
    width: 1px;
    height: 40px;
    position: relative;
  }
  .lines:before {
    content: '';
    width: 1px;
    height: 20px;
    display: block;
    background: -webkit-linear-gradient(#ffffff, #999999);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#ffffff, #999999);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#ffffff, #999999);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(#ffffff, #999999);
    /* 标准的语法 */
  }
  .lines:after {
    content: '';
    width: 1px;
    height: 20px;
    display: block;
    background: -webkit-linear-gradient(#999999, #ffffff);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#999999, #ffffff);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#999999, #ffffff);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(#999999, #ffffff);
    /* 标准的语法 */
  }
}
</style>
