<template>
  <div class="gant-container">
    <div class="legend">
      <div class="legend-item" v-for="item in legendColor" :key="item.color">
        <span class="color-box" :style="{ backgroundColor: item.color }"></span>
        {{ item.name }}
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column
        label="工序"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        label="计划达成率"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        label="平均产能/天"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column label="3月" align="center">
        <el-table-column
          v-for="item in 31"
          class="day-box"
          :key="item"
          :label="item"
          width="20"
          align="center"
        >
          <template
            ><div
              class="placeholder-div"
              :style="{
                backgroundColor: legendColor[item % legendColor.length].color
              }"
            ></div
          ></template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="4月" align="center">
        <el-table-column
          v-for="item in 31"
          width="20"
          :key="item"
          :label="item"
          align="center"
        >
          <template
            ><div
              class="placeholder-div"
              :style="{
                backgroundColor: legendColor[item % legendColor.length].color
              }"
            ></div
          ></template> </el-table-column
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [{}, {}],
        legendColor: [
          {
            color: 'rgba(242, 242, 242, 1)',
            name: '未生产'
          },
          {
            color: 'rgba(245, 154, 35, 1)',
            name: '未达预期'
          },
          {
            color: 'rgba(112, 182, 3, 1)',
            name: '达到预期'
          },
          {
            color: 'rgba(2, 167, 240, 1)',
            name: '超出预期'
          }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
  .gant-container {
    :deep(.el-table) {
      th .cell {
        padding: 0;
      }
      td {
        position: relative;
      }

      .placeholder-div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    .legend {
      display: flex;
      justify-content: flex-start;
      padding: 20px;
      .legend-item {
        margin-right: 20px;
        .color-box {
          display: inline-block;
          width: 12px;
          height: 12px;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
  }
</style>
