<template>
<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap"
  :draggable="isBtnShow"
>
  <div
    class="chart-wrap"
    :id="`${$parent.isPreview?'preview_':''}chart_${index}_${position}`"
  >
    <img :id="`${$parent.isPreview?'preview_':''}img_${index}_${position}`" />
  </div>
  <div class="tool-list">
    <el-tooltip content="按住拖动" placement="bottom" v-if="isBtnShow">
      <div 
          class="dragBtn"
          style="left:5%;top:5%;"
          v-if="isBtnShow&&![1,6].includes($parent.modelId)"
      ></div>
    </el-tooltip>
    <el-tooltip content="添加到我的图库" placement="bottom"  v-if="$parent.isAdd&&chartTitle.length&&item">
      <div class="addBtn"
        style="margin-right:2%;"
        @click.stop="addChart(position)"
      >
       <!--  <i class="el-icon-circle-plus-outline"></i> -->
      </div>
    </el-tooltip>
    <el-tooltip content="复制名称" placement="bottom"  v-if="$parent.isCopy&&chartTitle.length&&item">
      <div class="copyBtn"
        style="margin-right:2%;"
        @click.stop="copyChartName(position)"
      >
       <!--  <i class="el-icon-document-copy"></i> -->
      </div>
    </el-tooltip>
    <div
        class="closeBtn"
        style="right: 5%;top: 5%;"
        @click.stop="delChart(position)"
        v-if="isBtnShow"
      ></div>
  </div>
 
</div>
  
</template>

<script>
import mixin from "./formatEl";
export default {
  mixins:[mixin],
  props:{
    item:{
      type:Object
    }
  },
  watch:{
    chartInfoMap(newVal){
      if(this.item&&newVal[this.item.chartId]){
        this.chartTitle = newVal[this.item.chartId].chartTitle||''
      }
    }
  },
  computed:{
    chartInfoMap(){
      return this.$store.state.ppt.chartInfoMap
    }
  },
  data() {
    return {
      chartTitle:''
    };
  },
  methods:{
    copyChartName(position){
      this.$parent.copyChartName(position)
    },
    addChart(position){
      this.$parent.addChart(position)
    }
  },
  mounted(){
    if(this.item&&this.chartInfoMap[this.item.chartId])
    this.chartTitle = this.chartInfoMap[this.item.chartId].chartTitle||''
  }
};
</script>

<style scoped lang="scss">
.tool-list{
  position:absolute;
  width:90%;
  top:2%;
  left:5%;
  display: flex;
  justify-content: space-between;
  .dragBtn,.copyBtn,.addBtn,.closeBtn{
    position: static;
  }
  .addBtn{
    margin-left: auto;
  }
}
</style>
