<template>
  <div class="component-container time-line">
    <!-- 类型筛查 -->
    <div class="type-screen">
      <el-collapse v-model="activeNames" @change="collapseChange">
        <el-collapse-item name="1">
          <template slot="title">
            <!-- 头部 -->
            <div class="type-screen-head">
              <div class="type-screen-left">
                <span class="type-screen-left-title">类型筛查</span>
                <img :src="require('@/assets/img/type_screen_bgc_l.png')" alt="">
              </div>
              <div
                class="type-screen-right"
                @mouseover="IsTypeScreenRightShow=true"
                @mouseout="IsTypeScreenRightShow=false"
                @click="typeScreenClick"
              >
                <svg-icon icon-class="icon-screen" />
                <img
                  class="type-screen-right-img"
                  :src="require('@/assets/img/type_screen_bgc_r.png')"
                  alt=""
                >
              </div>
            </div>
          </template>
          <!-- 类型内容 -->
          <div class="type-screen-content">
            <el-checkbox-group v-model="typeScreenCheckArr">
              <el-checkbox
                v-for="(item,index) in checkboxLableArr"
                :key="index"
                :label="item"
                @change="checkboxChange"
              />
            </el-checkbox-group>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-if="timeAxisData.length>0" :class="activeNames==1 ? 'scroll-father-open':'scroll-father-close'">
      <el-scrollbar class="scrollbar-wrapper" style="height:100%;padding-bottom: 30px">
        <div v-for="(item,index) in timeAxisData" :key="index">
          <!-- 年份 -->
          <div class="time-line-year">
            <div class="time-line-item-tail" />
            <div class="time-line-item-date">
              <div class="time-line-background" />
              <div class="time-line-title">{{ item.year }}</div>
            </div>
          </div>
          <div v-for="(itemData, itemDataIndex) in item.data" :key="itemDataIndex" class="time-line-item">
            <!-- 节点 -->
            <div class="time-line-item-node">
              <i v-show="false" class="node" />
              <div class="node" :class="itemCurrentIndex == itemDataIndex && currentIndex == index ? 'nodeActive' : ''" />

            </div>
            <!-- 节点尾 -->
            <div class="time-line-item-tail" />
            <!-- 内容 -->
            <div class="time-line-item-wrapper">
              <!-- 抬头 -->
              <div class="time-line-item-wrapper-title">
                <span class="title">
                  <span class="title-time">{{ itemData.date|convertDate }}</span>
                </span>
              </div>
              <!-- 内容 -->
              <div
                v-for="(item2, itemListIndex) in itemData.itemList"
                :key="itemListIndex"
                class="time-line-item-wrapper-item"
                :class="itemCurrentIndex == itemDataIndex && currentIndex == index && itemListCurrentIndex==itemListIndex ? 'activeTitle' : ''"
                @click="sclectMentItem(item2,index,itemDataIndex,itemListIndex)"
              >

                <img :src="require('@/assets/img/icon-timeZ.png')" alt="">
                <span class="time-line-item-wrapper-item-title">{{ item2.type }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="empty">空</div>
  </div>
</template>

<script>

export default {
  name: 'TimeLine',
  props: {
    timeAxisData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      IsTypeScreenRightShow: false,
      drgsName: window.localStorage.getItem('identity'),
      typeScreenCheckArr: ['诊断', '手术', '用药', '住院', '出院', '检查', '随访'],
      checkboxLableArr: ['诊断', '手术', '用药', '住院', '出院', '检查', '随访'],
      currentIndex: 0,
      itemCurrentIndex: 0,
      itemListCurrentIndex: 0,
      activeNames: ['1']
    }
  },
  watch: {
    timeAxisData(val) {
      this.timeAxisData = val
    }
  },
  methods: {
    collapseChange(e) {
    },
    // 点击日期
    selectMenu(index, itemDataIndex) {
    },
    // 点击子节点
    sclectMentItem(item, index, itemDataIndex, itemListIndex) {
      console.log('123', item)
      this.currentIndex = index
      this.itemCurrentIndex = itemDataIndex
      this.itemListCurrentIndex = itemListIndex
      // 1是随访 0不是随访
      item.isVisit === '1' ? this.$listeners.getVisitRecordInfo(item) : this.$listeners.getTimeAxisNodeInfo(item, item.date, item.type)
    },
    // 点击类型筛选
    typeScreenClick() {
    },
    checkboxChange() {
      this.$listeners.getTimeAxisData(this.typeScreenCheckArr)
    },
    setCheckArr() {
      this.typeScreenCheckArr = JSON.parse(JSON.stringify(this.checkboxLableArr))
    }
  }
}
</script>

<style lang="scss" scoped>
$color: #fff;
// $containerBgColor: #f8fafa;
$containerBgColor: #0c1016;
$borderColor: #424242;
$paddingRight: 0px;
.empty {
  color: #000;
}
.time-line {
  margin: 0;
  font-size: 14px;
  color: $color;
  background-color: $containerBgColor;

  .time-line-item-wrapper-item-title{
    vertical-align: middle;
    margin-left: 5px;
  }
  .type-screen-head {
    display: flex;
    justify-content: space-between;
    .type-screen-left {
      position: relative;
      width: 193px;
      height: 32px;
      line-height: 32px;
      .type-screen-left-title {
        position: absolute;
        color: #fff;
        z-index:99;
        padding-left: 12px;
      }
      img {
        position: absolute;
        height: 32px;
        width: 165px;
      }
    }
    .type-screen-right {
      position: relative;
      .svg-icon {
        width: 16px;
        height: 16px;
        position: absolute;
        left: -25px;
        top: 8px;
        z-index: 99;
      }
      .type-screen-right-img {
        width: 50px;
        height: 32px;
        position: absolute;
        left: -50px;
      }
    }
  }
  .type-screen-content {
    padding-left: 10px;
    margin-top: 8px;
    .el-checkbox {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  .time-line-year {
    position: relative;
    height: 50px;
    .time-line-item-date {
      position: relative;
    }
    // 年份
    .time-line-background {
      position: absolute;
      top: 26px;
      left: -20px;
      padding-left: 15px;
      // margin-left: -10px;
      // margin-right: -$paddingRight;
      width: 93px;
      height: 32px;
      transform: skew(-30deg);
      line-height: 32px;
      font-size: 16px;
      font-style: oblique;
      font-family: fantasy;
      background: linear-gradient(
        210deg,
        rgba(0, 70, 251, 0.6) 0%,
        rgba(49, 107, 255, 0.1) 100%
      );
      letter-spacing: 1px;
    }
    .time-line-title {
      position: absolute;
      top: 28px;
      left: 10px;
      font-size: 20px;
      font-weight: bold;
      font-family: Roboto;
      font-style: italic;
    }
  }

  .time-line-item {
    position: relative;
    padding-bottom: 10px;

    // 节点
    .time-line-item-node {
      z-index: 3;
      display: inline-block;
      position: absolute;
      left: 16px;
      top: 25px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 15px;
      background-color: #fff;
      border-color: $borderColor;

      .node {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        // background-color: #959595;
      }
    }

    // 节点尾（竖线）
    .time-line-item-tail {
    }

    .time-line-item-wrapper:hover {
      color: #fff;
      opacity: 0.6;
    }

    // wrapper
    .time-line-item-wrapper {
      position: relative;
      padding-left: 80px;
      top: 20px;
      left: -40px;
      z-index:999;

      // 抬头
      .time-line-item-wrapper-title {
        color: $color;

        .title-date {
          display: inline-block;
          padding-right: 30px;
          margin-left: -70px;
          color: #ecb36d;
        }
        .title {
          display: inline-block;
          color: #fff;
          cursor: pointer;
          border-radius: 3px;
          font-size: 16px;
          .title-time {
            padding-right: 16px;
            color: #fff;
            letter-spacing: 1px;
          }
        }
      }

      // 内容
      .time-line-item-wrapper-item {
        cursor: pointer;
        margin: 5px 0 0 8px;
        padding: 6px 0px;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        width: 138px;
        padding-left: 15px;
        letter-spacing: .2em;
        border-radius: 3px;
        font-size: 14px;
        .svg-icon {
          margin-right: 8px;
        }
      }
      .activeTitle {
         color: #fff;
         background: #1c69dc;
      }
    }

    .transitionCon {
      position: relative;
    }
  }
}

// 节点尾（竖线）
.time-line-item-tail {
  position: absolute;
  left: 23px;
  top: 4px;
  height: 100%;
  border-left: 3px solid;
  border-color: rgba(255, 255, 255, 0.2);
}

.nodeActive {
  background-color: #3e9fff !important;
}
// .time-line .time-line-item:last-child .time-line-item-tail {
//   display: none;
// }
.scroll-father-close {
  height: calc(100% - 40px);
}
.scroll-father-open {
  height: calc(100% - 148px);
}
</style>
<style lang="scss">
.time-line {
  overflow: hidden;
  .el-collapse {
    border: none;
    // margin-bottom: 10px;
  }
  .el-collapse-item__header {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    display: block;
    height: 32px;
  }
  .el-icon-arrow-right:before {
    content: "";
  }
  .el-collapse-item__wrap {
    background-color: rgba(0, 0, 0, 0);
    border: none;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
    line-height:0;
  }
  .el-scrollbar__wrap {
    // padding-bottom: 100px;
  }
  .el-scrollbar__bar {
    right: 6px;
  }
}
</style>
