<template>
  <div>
    <div
      class="ward_time_container"
      ref="wardTimeRef"
    >
      <div class="type_bar">
        <span
          class="one"
          :class="item.disabled ? 'disabled' : ''"
          v-for="(item, index) in typeList"
          :key="index"
          @click="changeType(item.name)"
        >
          <span
            class="type"
            :style="{ backgroundColor: item.color }"
          ></span>
          {{ item.name }}
        </span>
        <div class="tool_bar">
          <a-date-picker size="small" :locale="locale" placeholder="请选择时间" @change="changeTime" />
          <a-button-group size="small">
            <a-button
              icon="minus"
              title="时间轴缩小"
              :disabled="zoomVal < 0.6"
              @click="toZoom('minus')"
            ></a-button>
            <a-button>{{ zoomVal.toFixed(1) }}</a-button>
            <a-button
              icon="plus"
              title="时间轴放大"
              :disabled="zoomVal > 1.5"
              @click="toZoom('plus')"
            ></a-button>
          </a-button-group>
        </div>
      </div>
      <!-- 时间轴 -->
      <div class="time_container">
        <div class="chart" ref="designer"></div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
.ward_time_container {
  position: relative;
  padding: 12px;
  .type_bar {
    font-size: 12px;
    .one {
      margin-right: 16px;
      cursor: pointer;
      &.disabled {
        color: #ccc;
        .type {
          background-color: #ccc !important;
        }
      }
    }
    .type {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      transform: rotateZ(45deg);
      margin-right: 2px;
    }
    .tool_bar {
      float: right;
      display: flex;
      /deep/.ant-calendar-picker {
        width: 140px;
        margin-right: 12px;
        input::placeholder {
          font-size: 12px;
        }
      }
      
      .icon {
        margin-left: 12px;
        font-size: 14px;
        color: #999;
      }
    }
  }
  .time_container {
    width: 100%;
    height: 80px;
    position: relative;
    box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.1);
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>