<template>
<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap" 
  :draggable="isBtnShow">
  <div
    class="chart-wrap table-wrap"
    :id="`${$parent.isPreview?'preview_':''}sheet_${index}_${position}`"
    :style="{overflow:$parent.isPreview?'hidden':'auto'}"
  >
    <table :key="tableKey">
      <tbody>
        <tr v-for="(row,rowIndex) in tableData" :key="rowIndex">
          <td v-for="(col,colIndex) in row" 
              :key="colIndex"
              :rowspan="col.mc.rs===0?1:col.mc.rs"
              :colspan="col.mc.cs===0?1:col.mc.cs">
            <div>{{col.m}}</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <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>
  <div
      class="closeBtn"
      style="right: 5%;top: 5%;"
      @click.stop="delChart(position)"
      v-if="isBtnShow"
    ></div>
</div>
  
</template>

<script>
import mixin from "./formatEl";
export default {
  mixins:[mixin],
  props:{
    item:{
      type:Object
    }
  },
  data() {
    return {
      tableData:[],
      type:'sheet',
      tableKey:0
    };
  },
  methods:{
    getSheetData(id,value){
      this.tableKey++
      this.tableData = value
    }
  },
  mounted(){
    !this.$parent.isPreview&&this.getSheetData('',this.$parent.$parent.sheetDataMap[this.item.sheetId])
  },
};
</script>

<style scoped lang="scss">
.table-wrap{
  /* overflow: auto; */
  table{
    width:100%;
    td{
			/* 	min-width: 35px; */
				border: 1px solid #747474;
				height: 45px;
				text-align: center;
			}
  }
}
</style>
