<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-10-25 15:11:18
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-10-28 11:21:52
 * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/ViewBottleTrackInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    title="气瓶追溯查看"
    :visible.sync="detailOpen"
    width="900px"
    append-to-body
    class="big-window-dlg"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="气瓶信息" name="first">
        <BottleInfo :detailInfo="itemData"/>
      </el-tab-pane>
      <el-tab-pane label="流转过程" name="second">
        <Processes :trackRecordList="itemData.backToMessage"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import BottleInfo from "./BottleInfo";
import Processes from "./Processes";
import { getqpDetail } from "@/api/bigWindow/getDevice.js";
export default {
  name: "view-bottle-track-info",
  components: {
    BottleInfo,
    Processes,
  },
  data() {
    return {
      detailOpen: false,
      activeName: "first",
      bottleId: null,
      itemData:{
        backToMessage:[],
      },
    };
  },
  watch: {
    bottleId(newData) {
      console.log(newData);
      this.getqpDetail(newData);
    },
  },
  methods: {
    getqpDetail(code) {
      getqpDetail({ code }).then((res) => {
        console.log("气瓶详情", res);
        this.itemData = res.data;

      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    
      this.activeName = tab;

    },
  },
};
</script>

<style lang="scss">
.big-window-dlg {
  .el-dialog {
    background: rgba(2, 26, 51, 0.9);
    border: 1px solid #127bd1;
    .el-dialog__header {
      border-bottom: 1px solid #127bd1;
    }
    .el-dialog__body {
      padding-top: 10px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #1890ff;
      font-size: 22px;
    }
    .el-dialog__title {
      color: #1890ff;
    }
  }
  // background-color: #dfe4ed;
  .el-tabs__nav-wrap::after {
    // background-color: #127bd1;
    // background-color: #606266;
    opacity: 0;
  }
  .el-tabs__active-bar {
    // background-color:#49d8ff;
    // background-color:#49d8ff;
  }
  .el-tabs__item {
    // 标签的字
    color: #fff;
    &.el-tabs__item.is-active {
      // 选中的字的颜色
      color: #1890ff;
    }
  }
  // 文本内容的字的颜色
  .el-form-item__label {
    color: #fff;
  }
  // 右边的颜色
  .el-form-item__content span {
    color: #fff;
  }

  // 圆圈
  .el-timeline-item__node {
    // background: #1890ff;
  }
  // 左边框
  .el-timeline-item__tail {
    // border: 1px solid #1890ff;
  }
  // 字
  .el-timeline-item__content {
    color: #fff;
  }
  // .el-dialog__title{

  // }
}
</style>
<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>
