<template>
  <!--zIndex:-1-->
  <div class="Body table gridBody"
       @wheel.passive="wheel">
    <div :class="['row',]"
         v-for="task in Store.tasks"
         :style="{ height: Store.scales.cellHeight + 'px' }"
         @dblclick="locationProgress(task)">
      <div
          v-for="column in Store.columns"
          :key="column.name"
          class="cell"
          :style="cellStyle(column)"

      >
        <!--:style="cellStyle(column)"-->
        <template v-if="column.action">
          <span class="el-icon-plus add" :data-action="column.action"></span>
        </template>
        <template v-else-if="column.name=='start_time'">
          {{ label(task[column.name]) }}
          <!--{{ new TSTY.Global().parseTime(task[column.name]) }}-->
          <!--   {{ Clock.makeLabel() }}-->
        </template>
        <template v-else>
          {{ task[column.name] }}
        </template>
        <!--        <template v-if="column.name === 'text'">
                  <div class="content" :style="contentStyle(task)">
                    <div
                        class="icon"
                        :class="getIcon(task)"
                        data-action="toggle-task"
                    ></div>
                    {{ column.template(task) }}
                  </div>
                </template>
                <template v-else>
                  {{ column.template(task) }}
                </template>-->
      </div>
    </div>
    <div :style="style">
      aa
    </div>
  </div>
</template>

<script>
export default {
  name: "Body",
  props: ['Store'],
  computed: {
    gridBodyStyle() {
      return {
        height: `${this.Store.scales.fullHeight || 1600}px`,
      };
    },
  },
  data() {
    return {style: {}}
  },
  mounted() {
    let Chart = document.getElementsByClassName("Chart")[0]
    console.log(this.Store.scales.fullHeight)
    console.log(Chart.getBoundingClientRect().height)
    this.style = {
      height: `${this.Store.scales.fullHeight - Chart.getBoundingClientRect().height + 10}px`,
      opacity: 0
    }
  },
  methods: {
    locationProgress(task) {
      console.log(task)
      console.log()
      this.$nextTick(() => {
        this.Store.scales.scrollLeft = Number(document.getElementById(task.ID).style.left.split("px")[0])
      })
    },
    label(stamp) {
      return this.Store.parseTime(stamp, "{y}-{m}-{d} {h}:{i}:{s}");
    },
    cellStyle(column) {
      const align = `text-align:${column.align}`;
      const width =
          column.width === "100%" ? `flex:1` : `width:${column.width}`;
      return `${width};${align};padding-left:5px`;
    },
    wheel() {

    }
  },
}
</script>

<style lang="scss" scoped>
.Body {
  font: 400 13px Arial;
  color: #fff;
  position: relative;
  width: 100%;
  overflow-y: inherit;

  .row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #00ffff;
  }
}
</style>
