<template>
  <el-dialog title="气瓶追溯查看" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-tabs v-model="activeName">
      <el-tab-pane label="气瓶信息" name="first">
        <BottleInfo :bottleId = "this.bottleId"/>
      </el-tab-pane>
      <el-tab-pane label="流转过程" name="second">
        <Processes :bottleId = "this.bottleId"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import BottleInfo from "./BottleInfo";
  import Processes from "./Processes";
  export default {
    name: "view-bottle-track-info",
    components:{
      BottleInfo,
      Processes
    },
    data(){
      return{
        detailOpen: false,
        activeName: "first",
        bottleId: null
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.activeName = tab;
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-tab-pane{
    margin-top: 20px;
    height: 350px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>
