<template>
  <div class="audit">
    <div class="audit-left">
      <div class="audit-left-head">
        <div class="audit-date-chooser">
          <span>起始时间</span>
          <el-slider
            v-model="sliderValue"
            range
            height="48"
            :show-tooltip="false"
          />
          <span>至今</span>
        </div>
        <Search placeholder="请输入要搜索的内容" />
      </div>
      <div class="audit-content">
        <Log
          :view-index="viewIndex"
          :title="viewList[viewIndex].title"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/layout/components/Search'
import Log from './components/log.vue'

export default {
  name: 'Audit',
  components: { Search, Log },
  data() {
    return {
      viewList: [
        {
          title: '账号分配日志'
        },
        {
          title: '账号授权日志'
        },
        {
          title: '账号登录日志'
        },
        {
          title: '账号行为日志'
        }
      ],
      viewIndex: 0,
      sliderValue: [30, 100]
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (typeof to.params.index === 'number') {
        vm.viewIndex = to.params.index
      }
    })
  },
  methods: {
    viewChange(index) {
      this.viewIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.audit {
  padding: 0 64px;
  .audit-left {
    padding: 32px 42px 0 0;
    box-sizing: border-box;
    .audit-left-head {
      display: flex;
      justify-content: space-between;

      ::v-deep .pub-search > .btn {
        margin-right: 0;
      }

      .audit-date-chooser {
        display: flex;
        line-height: 48px;
        font-weight: bold;
        color: #303133;

        ::v-deep .el-slider {
          width: 584px;
          margin: 0 28px;

          .el-slider__runway {
            margin: 0;
            height: 100%;

            .el-slider__bar {
              height: 100%;
              background: linear-gradient(0deg, #777dba, #6983be);
              border-radius: 2px;
            }

            .el-slider__button-wrapper {
              height: 100%;
              top: 0;

              .el-slider__button {
                width: 8px;
                height: 24px;
                position: relative;
                border-radius: 2px;
                background-color: #fff;
                box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
                border: none;

                &::before,
                &::after {
                  content: '';
                  display: block;
                  position: absolute;
                  width: 4px;
                  height: 2px;
                  background: #767dba;
                  border-radius: 1px;
                  left: 2px;
                }

                &::before {
                  top: 8px;
                }

                &::after{
                  bottom: 8px;
                }
              }
            }
          }
        }
      }
    }

    .audit-content {
      height: calc(100vh - 224px);
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  .audit-right {
    position: fixed;
    top: 112px;
    right: 0;
    width: 20.1vw;
    height: calc(100vh - 112px);
    padding-top: 32px;
    background: #fff;
  }
}
</style>
