<!--
 * @Author: zwq
 * @Date: 2022-01-19 10:33:36
 * @LastEditors: zhp
 * @LastEditTime: 2022-01-25 17:12:14
 * @Description:
-->
<template>
  <div id="container" ref="container" class="visual-container">
    <el-row
      class="container-title"
      :style="{ height: beilv * 88 + 'px', lineHeight: beilv * 88 + 'px', fontSize: beilv * 28 + 'px' }"
    >
      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
      合肥新能源数智工厂生产运营中心驾驶舱
      <el-button
        type="text"
        class="title-button"
        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon v-else icon-class="fullScreenView" />
      </el-button>
    </el-row>
    <el-row class="container-main" style="height: 100vh;">
      <!-- <el-row :style="{ height: '100%', padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv"> -->
      <el-col style="display: flex; flex-direction: column;">
        <el-row type="flex" class="flex-1" :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
          <!-- 当前班组情况 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
            <base-container title="当前班组情况" title-icon="currentGroup" :beilv="beilv">
              <base-table
                :page="1"
                :limit="6"
                :show-index="false"
                :beilv="beilv"
                :table-config="gourpTableHeadProps"
                :table-data="groupList"
              />
            </base-container>
          </el-col>
          <!-- 公用工程 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
            <base-container title="公用工程" title-icon="publicWork" :beilv="beilv" :height="323">
              <div :style="{ height: 180 * beilv + 'px' }">
                <div style="position: absolute; top: 24px; left: 5%; width: 90%;">
                  <line-chart
                    :id="'line-chart'"
                    :legend-data="legendData"
                    :beilv="beilv"
                    :show-legend="true"
                    :height="'265'"
                    :style="{ margin: 20 * beilv + 'px' + ' 0' }"
                  />
                </div>
              </div>
            </base-container>
          </el-col>
          <!-- 各产线生产信息 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
            <base-container title="各产线生产信息" title-icon="productLine" :beilv="beilv" :height="316">
              <!-- <Top-group :label-list="productTopList" /> -->
              <top-radio-group key="radio-group-1" />
              <base-table
                :page="1"
                :limit="5"
                :show-index="false"
                :beilv="beilv"
                :table-config="productTableProps"
                :table-data="productList"
              />
            </base-container>
          </el-col>
        </el-row>

        <el-row type="flex" class="flex-1" :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
          <!-- 设备运行信息 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
            <base-container title="设备运行信息" title-icon="runInfo" :beilv="beilv" :height="400">
              <!-- radio-group -->
              <div style="width: 100%;margin: 0 0 8px;border-radius:4px;overflow: hidden;">
                <ul style="list-style:none;margin: 0;padding:0;display: flex;cursor: pointer;">
                  <li
                    v-for="item in lineRadioList"
                    :key="item.value"
                    class="line-radio"
                    :class="{ 'line-radio-checked': item.value === lineRadioModel }"
                    @click="handleLineRadioChange(item.value)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>

              <base-table
                :beilv="beilv"
                :page="1"
                :limit="6"
                :show-index="false"
                :table-config="runTableProps"
                :table-data="runList"
              />
            </base-container>
          </el-col>
          <!-- 仓库信息 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
            <base-container title="仓库信息" title-icon="storehouse" :beilv="beilv" :height="341">
              <el-row type="flex" :gutter="9 * beilv" style="position: relative; top: -12px">
                <el-col :span="12">
                  <div :style="{ margin: 8 * beilv + 'px' + ' 0' }">原片仓</div>
                  <base-table
                    :beilv="beilv"
                    :page="1"
                    :limit="7"
                    :show-index="false"
                    :table-config="pieceTableProps"
                    :table-data="pieceList"
                  />
                </el-col>

                <el-col :span="12">
                  <div :style="{ margin: 8 * beilv + 'px' + ' 0' }">原片仓</div>
                  <base-table
                    :beilv="beilv"
                    :page="1"
                    :limit="7"
                    :show-index="false"
                    :table-config="pieceTableProps"
                    :table-data="pieceList"
                  />
                </el-col>
              </el-row>
            </base-container>
          </el-col>
          <!-- 能耗 -->
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
            <base-container title="能耗" title-icon="energy" :beilv="beilv" :height="248">
              <!-- radio-group -->
              <div style="width: 10em; position: absolute; top: 2em; right: 2em; border-radius:4px; overflow: hidden;">
                <ul style="list-style:none; margin: 0; padding:0; display: flex; cursor: pointer;">
                  <li
                    v-for="item in [{ value: 1, name: '柱状图' }, { value: 2, name: '表格' }]"
                    :key="item.value"
                    class="energy-radio"
                    :class="{ 'energy-radio-checked': item.value === energyRadioModel }"
                    @click="handleEnergyRadioChange(item.value)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>

              <base-table
                :beilv="beilv"
                :page="1"
                :limit="8"
                :show-index="false"
                :table-config="energyTableProps"
                :table-data="energyList"
              />
            </base-container>
          </el-col>
        </el-row>

        <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
          <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
            <base-container :no-padding="true" :no-content-padding="true">
              <el-col :span="18" style="position:relative; padding: 0">
                <base-container
                  :show-line="false"
                  title-left-icon="energy"
                  title="订单情况"
                  title-icon="energy"
                  :beilv="beilv"
                  :height="256"
                >
                  <base-table
                    :beilv="beilv"
                    :show-index="false"
                    :page="1"
                    :limit="6"
                    :table-config="orderTableProps"
                    :table-data="orderList"
                  />
                </base-container>
              </el-col>

              <el-col class="add-vertical-split-line" :span="6" style="position:relative; padding: 0">
                <base-container
                  :show-line="false"
                  title-left-icon="energy"
                  title="质量缺陷信息年度总览"
                  title-icon="qualityInfo"
                  :beilv="beilv"
                  :height="256"
                >
                  <top-radio-group key="radio-group-2" />
                  <base-table
                    :beilv="beilv"
                    :show-index="false"
                    :page="1"
                    :limit="5"
                    :table-config="runTableProps"
                    :table-data="runList"
                  />
                </base-container>
              </el-col>
            </base-container>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <!-- <el-row :style="{padding: '0 ' + 9 * beilv + 'px'}" :gutter="9 * beilv">
        <el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="12">
          <base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256" />
        </el-col>
        <el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="6">
          <base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="314" />
        </el-col>
      </el-row> -->
</template>

<script>
import baseContainer from './components/baseContainer'
// import baseContainer from './components/ProductionAndOperationCenterCockpit/baseContainer'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import nowTeam from './components/ProductionAndOperationCenterCockpit/nowTeam.vue'
// import BaseTable from './components/ProductionAndOperationCenterCockpit/baseTable.vue'
import BaseTable from './components/baseTable.vue'
// import TopGroup from './components/ProductionAndOperationCenterCockpit/topGroup.vue'
import TopRadioGroup from './components/topRadioGroup'
import lineChart from './components/LineChart.vue'
import colorDiv from './components/ProductionAndOperationCenterCockpit/colorDiv.vue'
// import BaseVideo from './components/baseVideo.vue'
const gourpTableHeadProps = [
  {
    prop: 'currentGroup',
    label: '当前班组'
  },
  {
    prop: 'groupLeader',
    label: '班组长'
  },
  {
    prop: 'totalPeople',
    label: '总人数'
  },
  {
    prop: 'number',
    label: '到岗人数'
  }
]
const qualityTableProps = [
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'content',
    label: '缺陷内容'
  },
  {
    prop: 'productLine',
    label: '产线'
  },
  {
    prop: 'process',
    label: '发生工序'
  }
]

const energyTableProps = [
  {
    prop: 'line',
    label: '产线名称',
    width: 100
  },
  {
    prop: 'totalEnergy',
    label: '总能耗(kW·h)'
  },
  {
    prop: 'dailyEnergy',
    label: '当天能耗(kW·h)'
  }
]
const pieceTableProps = [
  {
    prop: 'name',
    label: '仓库名称'
  },
  {
    prop: 'product',
    label: '产品规格'
  },
  {
    prop: 'number',
    label: '数量'
  },
  {
    prop: 'meter',
    label: '平方米'
  },
  {
    prop: 'package',
    label: '包装数量'
  }
]
const runTableProps = [
  {
    prop: 'equipmentName',
    label: '设备名称'
  },
  {
    prop: 'runTime',
    label: '运行时长'
  },
  {
    prop: 'currentState',
    label: '当前状态',
    align: 'center'
  },
  {
    prop: 'colour',
    label: '状态颜色',
    subcomponent: colorDiv
  },
  {
    prop: 'downTime',
    label: '停机时长'
  }
]
const productTableProps = [
  {
    prop: 'lineName',
    label: '产线名称'
  },
  {
    prop: 'number',
    label: '上片数量'
  },
  {
    prop: 'downNumber',
    label: '下片数量'
  },
  {
    prop: 'wasteNumber',
    label: '下废数量'
  },
  {
    prop: 'scrapRatio',
    label: '报废比'
  },
  {
    prop: 'packageNumber',
    label: '报废比'
  }
]
const orderTableProps = [
  {
    prop: 'orderNo',
    label: '订单编码'
  },
  {
    prop: 'status',
    label: '执行状态'
  },
  {
    prop: 'orderTime',
    label: '下单时间'
  },
  {
    prop: 'startTime',
    label: '开始时间'
  },
  {
    prop: 'number',
    label: '数量'
  },
  {
    prop: 'meter',
    label: '平方米'
  },
  {
    prop: 'specification',
    label: '产品规格'
  },
  {
    prop: 'successNumber',
    label: '完成数量'
  },
  {
    prop: 'proportion',
    label: '完成比例'
  },
  {
    prop: 'damage',
    label: '损坏数量'
  },
  {
    prop: 'damageRadio',
    label: '损坏比例'
  }
]
const productTopList = [
  {
    label: '当天',
    index: '0'
  },
  {
    label: '本周',
    index: '1'
  },
  {
    label: '当月',
    index: '2'
  }
]
const energyTopList = [
  {
    label: '柱状图',
    index: '0'
  },
  {
    label: '表格',
    index: '1'
  }
]
const qualityList = [
  { createTime: '12:00:01', content: '报废', productLine: '钢1线', process: '磨边' },
  { createTime: '11:20:51', content: '报废', productLine: '钢1线', process: '镀膜' },
  { createTime: '11:05:21', content: '报废', productLine: '钢1线', process: '钢化' },
  { createTime: '11:02:16', content: '报废', productLine: '钢1线', process: '钢化' },
  { createTime: '10:50:49', content: '报废', productLine: '钢1线', process: '包装' },
  { createTime: '10:30:35', content: '报废', productLine: '钢1线', process: '镀膜' }
]

const groupList = [
  { currentGroup: '早班执行一组', groupLeader: '张三', totalPeople: '233', number: '22' },
  { currentGroup: '早班执行二组', groupLeader: '张四', totalPeople: '233', number: '22' },
  { currentGroup: '中班执行一组', groupLeader: '李三', totalPeople: '222', number: '25' },
  { currentGroup: '中班执行二组', groupLeader: '李四', totalPeople: '222', number: '25' },
  { currentGroup: '晚班执行一组', groupLeader: '小红', totalPeople: '111', number: '29' },
  { currentGroup: '早班执行一组', groupLeader: '张三', totalPeople: '233', number: '22' },
  { currentGroup: '早班执行二组', groupLeader: '张四', totalPeople: '233', number: '22' },
  { currentGroup: '中班执行一组', groupLeader: '李三', totalPeople: '222', number: '25' },
  { currentGroup: '中班执行二组', groupLeader: '李四', totalPeople: '222', number: '25' },
  { currentGroup: '晚班执行一组', groupLeader: '小红', totalPeople: '111', number: '29' },
  { currentGroup: '晚班执行二组', groupLeader: '小张', totalPeople: '223', number: '27' }
]
const energyList = [
  { line: '钢一线', totalEnergy: '21321311232', dailyEnergy: '23213122' },
  { line: '钢二线', totalEnergy: '32443234334', dailyEnergy: '23232322' },
  { line: '钢三线', totalEnergy: '21321312213', dailyEnergy: '43434344' },
  { line: '钢四线', totalEnergy: '21321321312', dailyEnergy: '23232155' },
  { line: '钢五线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
  { line: '钢六线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
  { line: '钢七线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
  { line: '钢八线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
  { line: '钢九线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
  { line: '钢十线', totalEnergy: '21311232123', dailyEnergy: '26754545' }
]

const lineRadioList = [
  { value: 1, name: '钢一线' },
  { value: 2, name: '钢二线' },
  { value: 3, name: '钢三线' },
  { value: 4, name: '钢四线' },
  { value: 5, name: '钢五线' },
  { value: 6, name: '钢六线' }
]

const pieceList = [
  { name: '原片A区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
  { name: '原片B区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
  { name: '原片C区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
  { name: '原片D区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
  { name: '原片E区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
  { name: '原片F区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
  { name: '原片G区', product: '05*14*23', number: '413947', meter: '1232', package: '2131321' }
]
const runList = [
  { equipmentName: '磨边机', runTime: '238h', currentState: '正常', colour: 'rgba(12, 255, 30, .6)', downTime: '338h' },
  {
    equipmentName: '磨边后清洗剂',
    runTime: '338h',
    currentState: '待机',
    colour: 'rgba(39, 96, 255, .6)',
    downTime: '338h'
  },
  {
    equipmentName: '激光打印机',
    runTime: '323h',
    currentState: '故障停机',
    colour: 'rgba(255, 12, 12, .6)',
    downTime: '338h'
  },
  { equipmentName: '丝印机', runTime: '12h', currentState: '正常', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
  {
    equipmentName: '丝印机后烘干机',
    runTime: '238h',
    currentState: '报警',
    colour: 'rgba(255, 12, 12, .6)',
    downTime: '338h'
  },
  { equipmentName: '镀膜机', runTime: '228h', currentState: '报警', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
  { equipmentName: '固化机', runTime: '112h', currentState: '报警', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
  { equipmentName: '钢化炉', runTime: '231h', currentState: '报警', colour: 'rgba(12, 255, 30, .6)', downTime: '338h' },
  {
    equipmentName: '钢化清洗机',
    runTime: '145h',
    currentState: '报警',
    colour: 'rgba(12, 255, 30, .6)',
    downTime: '338h'
  },
  {
    equipmentName: '成品下片机',
    runTime: '190h',
    currentState: '报警',
    colour: 'rgba(12, 255, 30, .6)',
    downTime: '338h'
  }
]
const productList = [
  {
    lineName: '钢一线',
    number: '156',
    downNumber: '23',
    wasteNumber: '222',
    scrapRatio: '338:1',
    packageNumber: '111'
  },
  {
    lineName: '钢二线',
    number: '233',
    downNumber: '38',
    wasteNumber: '222',
    scrapRatio: '338:1',
    packageNumber: '111'
  },
  {
    lineName: '钢三线',
    number: '323',
    downNumber: '38',
    wasteNumber: '222',
    scrapRatio: '338:1',
    packageNumber: '111'
  },
  {
    lineName: '钢四线',
    number: '160',
    downNumber: '18',
    wasteNumber: '222',
    scrapRatio: '338:1',
    packageNumber: '111'
  },
  {
    lineName: '钢五线',
    number: '112',
    downNumber: '68',
    wasteNumber: '222',
    scrapRatio: '338:1',
    packageNumber: '111'
  },
  { lineName: '钢六线', number: '232', downNumber: '45', wasteNumber: '222', scrapRatio: '338:1', packageNumber: '111' }
]
const orderList = [
  {
    orderNo: 'DB-1.12 13:24:42',
    status: '正在执行',
    orderTime: '04.21 13:24:42',
    startTime: '10.12 13:24:42',
    number: '38:1',
    meter: '121',
    specification: '11*32*55',
    successNumber: '1211',
    proportion: '45%',
    damage: '212121',
    damageRadio: '212:565'
  },
  {
    orderNo: 'DB-1.12 13:24:42',
    status: '正在执行',
    orderTime: '04.21 13:24:42',
    startTime: '10.12 13:24:42',
    number: '38:1',
    meter: '121',
    specification: '11*32*55',
    successNumber: '1211',
    proportion: '45%',
    damage: '212121',
    damageRadio: '212:565'
  },
  {
    orderNo: 'DC-1.22 13:24:42',
    status: '正在执行',
    orderTime: '10.22 10:24:42',
    startTime: '11.02 13:24:42',
    number: '138:1',
    meter: '11',
    specification: '10*23*55',
    successNumber: '111',
    proportion: '48%',
    damage: '212121',
    damageRadio: '32:565'
  },
  {
    orderNo: 'AD-1.22 13:34:42',
    status: '正在执行',
    orderTime: '11.22 13:24:42',
    startTime: '09.12 13:24:42',
    number: '238:1',
    meter: '211',
    specification: '09*34*55',
    successNumber: '11221',
    proportion: '60%',
    damage: '212121',
    damageRadio: '23:565'
  },
  {
    orderNo: 'QC-1.22 13:24:42',
    status: '正在执行',
    orderTime: '12.22 13:24:42',
    startTime: '07.16 13:24:42',
    number: '48:1',
    meter: '221',
    specification: '22*34*55',
    successNumber: '22',
    proportion: '56%',
    damage: '212121',
    damageRadio: '53:565'
  },
  {
    orderNo: 'AC-1.22 13:24:42',
    status: '正在执行',
    orderTime: '10.22 13:24:42',
    startTime: '12.22 13:24:42',
    number: '68:1',
    meter: '181',
    specification: '32*34*55',
    successNumber: '61',
    proportion: '50%',
    damage: '212121',
    damageRadio: '33:565'
  }
]
const legendData = [
  {
    name: '天燃气用量(m³)',
    type: 'line',
    stack: 'Total',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: '用电',
    type: 'line',
    stack: 'Total',
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: '水流量',
    type: 'line',
    stack: 'Total',
    data: [150, 232, 201, 154, 190, 330, 410]
  },
  {
    name: '电压',
    type: 'line',
    stack: 'Total',
    data: [320, 332, 301, 334, 390, 330, 320]
  },
  {
    name: '氧气用量(m³)',
    type: 'line',
    stack: 'Total',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  },
  {
    name: '电流',
    type: 'line',
    stack: 'Total',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  },
  {
    name: '余热发电',
    type: 'line',
    stack: 'Total',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  },
  {
    name: '用电',
    type: 'line',
    stack: 'Total',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }
]
export default {
  name: 'ProductionMonitoringCockpit',
  components: {
    baseContainer,
    BaseTable,
    // TopGroup,
    TopRadioGroup,
    lineChart
    // BaseVideo
  },
  data() {
    return {
      lineRadioModel: null,
      energyRadioModel: null,
      beilv: 1,
      gourpTableHeadProps,
      isFullScreen: false,
      runTableProps,
      energyTopList,
      qualityTableProps,
      pieceList,
      productTableProps,
      runList,
      orderList,
      pieceTableProps,
      orderTableProps,
      legendData,
      qualityList,
      groupList,
      productTopList,
      productList,
      lineRadioList,
      runTopList: [
        {
          label: '钢一线',
          index: '0'
        },
        {
          label: '钢一线',
          index: '1'
        },
        {
          label: '钢一线',
          index: '2'
        }
      ],
      energyList,
      energyTableProps
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    isFullScreen: function(val) {
      if (val) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    },
    'sidebar.opened': function(val) {
      console.log(val)
      if (!this.isFullScreen) {
        setTimeout(() => {
          this.beilv = document.getElementById('container').offsetWidth / 1920
        }, 300)
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.beilv = document.getElementById('container').offsetWidth / 1920
    window.addEventListener('resize', () => {
      if (this.isFullScreen) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    })
  },
  methods: {
    handleLineRadioChange(value) {
      this.lineRadioModel = value
    },
    handleEnergyRadioChange(value) {
      this.energyRadioModel = value
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      this.lineRadioModel = 1
      this.energyRadioModel = 1
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.container)
    }
  }
}
</script>

<style lang="scss" scoped>
.visual-container {
  width: 100%;
  min-width: 960px;
  background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
  background-size: cover;
  .container-title {
    width: 100%;
    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
    background-size: 100% 100%;
    color: #00fff0;
    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
      position: absolute;
    }
  }
  .container-main {
    padding: 16px;
  }
}
.el-divider--vertical {
  height: 174px;
  width: 1px;
  border: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.15);
}
</style>

<style lang="scss">
.visual-container {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-track-piece {
    background: #1b2b3d;
  }

  ::-webkit-scrollbar-corner {
    background: #1b2b3d;
  }

  ::-webkit-scrollbar-track {
    width: 6px;
    background: #1b2b3d;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba($color: #5bc4be, $alpha: 0.7);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba($color: #5bc4be, $alpha: 1);
  }
}
</style>

<style scoped>
.line-radio,
.energy-radio {
  display: inline-block;
  flex: 1 auto;
  text-align: center;
  background-color: #133648;
  color: #fff;
  padding: 8px 0;
  transition: background-color 0.3s ease-in-out;
}

.line-radio-checked,
.energy-radio-checked {
  background-color: #3eb0ae;
}

.add-vertical-split-line {
  position: relative;
}

.add-vertical-split-line:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 60%;
  background-color: red;
  background: linear-gradient(to bottom, #071020, #52fff1, #071020);
  position: absolute;
  top: 25%;
  left: 0px;
}
</style>
