<template>
  <div class="date-time">
    <div class="date-time-tool">
      <div class="tool-item" v-for="item in toolList" :key="item.title">
        <span
          class="tool-color"
          :style="'background-color:' + item.color"
        ></span>
        <span class="tool-title">{{ item.title }}</span>
      </div>
    </div>

    <div class="data-time-table">
      <div class="data-left">
        <div class="table-item">日期/时间段</div>
        <div class="table-item" v-for="item in dateList">
          {{ item }}
        </div>
      </div>
      <div class="data-right">
        <div class="date-item-li" v-for="item in timeList">
          <div class="table-item">
            {{ item.time }}
          </div>

          <div
            class="table-item"
            v-for="typeItem in item.typeList"
            :style="'background-color:' + type.get(typeItem)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dateList: {
      type: Array,
      default: function () {
        return [];
      },
      required: true,
    },
    timeList: {
      type: Array,
      default: function () {
        return [];
      },
      required: true,
    },
  },
  data() {
    return {
      toolList: [
        {
          color: "#976CEB",
          title: "空置",
        },
        {
          color: "#E5D8FF",
          title: "已占用",
        },
        {
          color: "#FFDF99",
          title: "冻结中",
        },

        {
          color: "#C7C7C7",
          title: "不可用",
        },
      ],
      type: new Map([
        ["1", "#976CEB"],
        ["2", "#E5D8FF"],
        ["3", "#FFDF99"],
        ["4", "#C7C7C7"],
      ]),
      // dateList: [
      //   "2010/8/20",
      //   "2010/8/20",
      //   "2010/8/20",
      //   "2010/8/20",
      //   "2010/8/20",
      // ],
      // timeList: [
      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },
      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },

      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },
      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },
      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },
      //   {
      //     time: "19:20-21:20",
      //     typeList: ["1", "2", "4", "3", "2"],
      //   },
      // ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" type="text/scss" scoped>
.date-time {
  .date-time-tool {
    padding: 0 40px;
    margin-bottom: 30px;
    @include flex;
    .tool-item {
      @include flex;
      .tool-color {
        height: 32px;
        width: 32px;
        margin-right: 12px;
      }
      .tool-title {
        font-size: 26px;
        line-height: 42px;
        color: #333333;
      }
    }
  }

  .data-time-table {
    display: flex;

    .table-item {
      width: 168px;
      height: 69px;
      border: 1px solid #eeeeee;
      font-size: 26px;
      color: #666;
      font-weight: 400;
      line-height: 69px;
      text-align: center;
    }
    .data-left {
    }
    .data-right {
      width: 516px;
      overflow-x: auto;

      @include flex;
    }
  }
}
</style>
