<template>
  <div class="tunnel-bgc">
    <div class="box-top">
      <div class="back-tunnel" @click="router.back(-1)">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <div class="tunnel-name">
        一号隧道
      </div>
      <div class="tunnel-title"></div>
    </div>
    <div class="device-content">
      <div class="device-box">
        <div class="box-left">
          <el-menu
              default-active="1"
              @select="handleChangeMenu"
          >
            <el-menu-item index="1">
              <span>风机</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span>风压</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span>其他传感器</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="box-right" v-if="changeIndex==1">
          <div class="device-title">
            <span>风机设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <span class="units">
              <input
                  type="number"
                  min="0"
                  v-model="collectionFrequency"
              />
              </span>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
              <el-table-column prop="name" label="设备名称" align="center"/>
              <el-table-column prop="currentA" label="A电流" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="currentB" label="B电流" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="currentC" label="C电流" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = true"
                    >
                      启动
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state = false"
                    >
                      停止
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn">
              取消
            </div>
            <div class="sure-btn"  @click="router.back(-1)">
              确定
            </div>
          </div>
        </div>
        <div class="box-right" v-if="changeIndex==2">
          <div class="device-title">
            <span>风压设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <span class="units">
              <input
                  type="number"
                  min="0"
                  v-model="collectionFrequency"
              />
              </span>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
              <el-table-column prop="name" label="设备名称" align="center"/>
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="unit" label="单位" align="center"/>
              <el-table-column prop="thresholdValue" label="阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = true"
                    >
                      启动
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state = false"
                    >
                      停止
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn">
              取消
            </div>
            <div class="sure-btn"  @click="router.back(-1)">
              确定
            </div>
          </div>
        </div>
        <div class="box-right" v-if="changeIndex==3">
          <div class="device-title">
            <span>其他传感器设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <span class="units">
              <input
                  type="number"
                  min="0"
                  v-model="collectionFrequency"
              />
              </span>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
              <el-table-column prop="name" label="设备名称" align="center"/>
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="unit" label="单位" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="thresholdValue" label="阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = true"
                    >
                      启动
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state = false"
                    >
                      停止
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn" @click="isVisited=false">
              取消
            </div>
            <div class="sure-btn" @click="router.back(-1)">
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const router = useRouter()
const collectionFrequency = ref(0)
const changeIndex = ref(1)
const fanData = [
  {
    name: '一号风机',
    currentA: '2342',
    currentB: '2342',
    currentC: '2342',
    state: false,
  },
  {
    name: '二号风机',
    currentA: '2342',
    currentB: '2342',
    currentC: '2342',
    state: true,
  },
  {
    name: '三号风机',
    currentA: '2342',
    currentB: '2342',
    currentC: '2342',
    state: false,
  }
]
const winData = [
  {
    name: '1号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '2号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '3号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '4号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '5号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '6号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '7号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '8号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '9号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
  {
    name: '10号风压',
    offset: '2342',
    unit: 'Pa',
    thresholdValue: '2342',
    state: false,
  },
]
const otherData = [
  {
    name: '风速',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '氧      气',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '温      度',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '湿      度',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '粉 尘',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '二氧化碳',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '一氧化碳',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '二氧化氮',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '一氧化氮',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '二氧化硫',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }, {
    name: '硫 化 氢',
    offset: '2342',
    unit: 'm/s',
    thresholdValue: '2342',
    state: false,
  }
]
const handleChangeMenu = (e) => {
  console.log('切换', e)
  changeIndex.value = e
}
</script>

<style scoped lang="scss">
.tunnel-bgc {
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/tunnel/sd_bj.png');

  .box-top {
    display: flex;
    justify-content: flex-start;

    .tunnel-name {
      margin-left: 120px;
      height: 61px;
      font-size: 46px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 61px;
    }

    .back-tunnel {
      cursor: pointer;
      margin: 0 0 0 70px;
      display: flex;
      align-items: center;
      width: 178px;
      height: 70px;
      line-height: 70px;
      border-radius: 11px;
      border: 2px solid #08B7B8;
      font-size: 38px;
      color: #FFFFFF;

      .back-icon {
        margin-right: 20px;
        margin-left: 23px;
        width: 33px;
        height: 33px;
        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
      }
    }
  }

  .device-content {
    display: flex;
    justify-content: center;
    padding-top: 220px;

    .device-box {
      display: flex;
      width: 2194px;
      height: 1500px;
      background: #064B66;
      border-radius: 20px;
      border: 2px solid #05FEFF;
      box-sizing: border-box;

      .box-left {
        padding-left: 24px;
        width: 300px;
        height: 1498px;
        background: #0D5A7A;
        border-radius: 20px 0px 0px 20px;

        :deep(.el-menu) {
          border-right: none;
          margin-top: 261px;
          background-color: #0D5A7A;

          .el-menu-item.is-active {
            background-image: url(../../assets/images/device/sdgl_xz.png);
          }

          .el-menu-item {
            color: #fff;
            height: 90px;
            font-size: 40px;

            &:hover {
              background-color: #0D5A7A;
            }

            &:first-child {
              letter-spacing: 120px;
            }

            &:nth-child(2) {
              letter-spacing: 120px;
            }
          }
        }
      }

      .box-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        .device-title {
          margin-top: 60px;
          line-height: 61px;
          color: #FFFFFF;
          display: flex;
          justify-content: center;

          > span:first-child {
            font-size: 46px;
            font-weight: bold;
          }

          .collection-frequency {
            position: absolute;
            right: 102px;

            > span:first-child {
              font-size: 38px !important;
            }

            .units {
              position: relative;

              input {
                width: 166px;
                height: 50px;
                border: 1px solid #05FEFF;
                background: transparent;
                margin-left: 14px;
                font-size: 35px;
                color: #FFFFFF;
                outline: none;
              }
            }

            .units::after {
              content: "秒/次";
              position: absolute;
              right: 6px;
              top: 26%;
              transform: translateY(-50%);
              font-size: 35px;
              color: #08B7B8;
            }
          }
        }
      }

      .btns {
        width: 100%;
        margin: 0 auto;
        position: absolute;
        bottom: 70px;
      }

      .device-table {
        margin-top: 50px;
        margin-left: 97px;

        .active {
          color: #FFFFFF;
          background: #0f7da9;
        }

        .switch {
          margin-top: 22px;
          margin-left: 60px;
          display: flex;
          width: 200px;
          height: 50px;
          border-radius: 6px;
          border: 1px solid #05FEFF;
          overflow: hidden;
          color: #51A2B3;
          line-height: 40px;
          font-size: 36px;

          & > div {
            flex: 1;
            text-align: center;
            cursor: pointer;
          }
        }

        :deep(.el-table--fit) {
          width: 1700px !important;
        }

        :deep(.cell) {
          height: 80px;
          line-height: 80px;
          color: #fff;
          font-size: 38px;
        }

        :deep(.el-table tr) {
          background-color: #1C5971;
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
          background-color: #1C5971;
        }

        :deep(.el-table__row--striped) {
          background-color: #13849C!important;
        }
        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
          background-color: #13849C!important;
        }
        :deep(.el-table__cell) {
          .el-input {
            width: 180px;
            height: 53px;
          }

          .el-input__wrapper {
            border-radius: 6px;
            border: 1px solid #05FEFF;
            background-color: transparent;

            .el-input__inner {
              color: #FFFFFF;
              font-size: 40px;
            }
          }
        }

        :deep(.el-table__inner-wrapper::before) {
          display: none;
        }
      }
    }
  }
}
</style>
