<template>
  <div class="main">
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true"> open </el-button>

    <el-drawer v-model="drawer" :with-header="false">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="控制面板" name="first">
          <!-- 照明区域 -->
          <div class="lightarea">
            <div class="lightareatab"></div>
            <span class="lightareatext"> 照明区域 </span>
            <button class="plan">计划启用</button>
          </div>
          <!-- button部分 -->
          <div class="area">
            <button
              v-for="(button, index) in buttons"
              :key="index"
              :class="{ btn: true, selected: button === selectedButton }"
              @click="selectButton(button)">
              {{ button.label }}
            </button>
          </div>
          <!-- 照明回路 -->
          <div class="circuitarea">
            <div class="circuittab"></div>
            <span class="circuittext">照明回路</span>
            <button class="plan">计划启用</button>
            <button class="batch" @click="toggleSelectionMode">
              {{ selectionModeText }}
            </button>
            <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
          </div>
          <!-- button部分 -->
          <div class="btnarea">
            <button
              v-for="(button2, index) in buttons2"
              :key="index"
              :class="{ btn: true, selected: button2.selected }"
              @click="toggleSelection(button2)">
              {{ button2.label }}
            </button>
          </div>
          <!-- 控制模式 -->
          <div class="controlarea">
            <div class="controltab"></div>
            <span class="controltext"> 控制模式 </span>
          </div>
          <!-- 控制模式按钮部分 -->
          <div class="controlmodebtnarea">
            <button
              v-for="(button3, index) in controlbutton"
              :key="index"
              :class="{ btn: true, selected: button3 === selectedButton3 }"
              @click="selectButton3(button3)">
              {{ button3.label }}
            </button>
          </div>
          <!-- 控制场景 -->
          <div class="controlscenearea">
            <div class="controlscenetab"></div>
            <span class="controlscenetext"> 控制场景 </span>
          </div>
          <!-- 控制场景按钮部分 -->
          <div class="controlscenebtnarea">
            <button
              v-for="(button4, index) in controlscenebuttons"
              :key="index"
              :class="{ btn: true, selected: button4 === selectedButton4 }"
              @click="selectButton4(button4)">
              {{ button4.label }}
            </button>
          </div>
          <!-- 灯具参数 -->
          <div class="lightparametersarea">
            <div class="lightparameterstab"></div>
            <span class="lightparameterstext"> 灯具参数 </span>
          </div>
          <div class="lightparameterstextarea">
            <p>开启数量</p>
            <p>亮度</p>
            <p>色温</p>
            <p>8/10</p>
            <p>100lux</p>
            <p>4200k</p>
          </div>
          <div class="bottom">
            <button class="flushed">刷新</button>
            <button class="execute">执行</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="计划列表" name="second">
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all>
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="date" label="执行时间" width="100" />
            <el-table-column prop="planname" label="计划名称" width="90" />
            <el-table-column prop="status" label="状态" width="70" />
            <el-table-column label="操作">
              <span class="tabreboot">重启</span>
              <span class="tabdelete">删除</span>
            </el-table-column>
          </el-table>
          <div class="divadd">
            <button class="add">添加</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日志" name="third">
          <el-table
            :data="tableData2"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all>
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="date" label="执行时间" />
            <el-table-column prop="planname" label="操作内容" />
            <el-table-column prop="status" label="操作人" />
          </el-table>
          <div class="divadd">
            <button class="add">刷新</button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  // 照明区域按钮单选
  interface Button {
    label: string;
    selected: boolean;
  }
  const buttons = ref<Button[]>([
    { label: 'A区', selected: false },
    { label: 'B区', selected: false },
    { label: 'C区', selected: false },
    { label: 'D区', selected: false },
    { label: '计划启用', selected: false },
  ]);
  const selectedButton = ref<Button | null>(null);
  const selectButton = (button: Button) => {
    selectedButton.value = button;
  };
  // 照明回路按钮
  interface Button {
    label: string;
    selected: boolean;
  }
  const buttons2 = ref<Button[]>([
    { label: '1区', selected: false },
    { label: '2区', selected: false },
    { label: '3区', selected: false },
    { label: '4区', selected: false },
  ]);
  const showSelectAll = ref(false);
  const bt = ref(false);
  const selectionModeText = ref('批量');
  const toggleSelection = (button2: Button) => {
    if (!showSelectAll.value) {
      // 单选模式
      for (const button of buttons2.value) {
        button.selected = false;
      }
      button2.selected = true;
    } else {
      // 批量选择模式
      button2.selected = !button2.selected;
      bt.value = false;
    }
  };
  const toggleSelectionMode = () => {
    showSelectAll.value = !showSelectAll.value;
    selectionModeText.value = showSelectAll.value ? '单选' : '批量';
  };
  const selectAll = () => {
    if (bt.value == false) {
      for (const button of buttons2.value) {
        button.selected = true;
        bt.value = true;
      }
    } else {
      for (const button of buttons2.value) {
        button.selected = false;
        bt.value = false;
      }
    }
  };
  // 控制模式按钮
  interface Button {
    label: string;
    selected: boolean;
  }
  const controlbutton = ref<Button[]>([
    { label: 'A区', selected: false },
    { label: 'B区', selected: false },
    { label: 'C区', selected: false },
  ]);
  const selectedButton3 = ref<Button | null>(null);
  const selectButton3 = (button3: Button) => {
    selectedButton3.value = button3;
  };
  // 控制场景按钮
  interface Button {
    label: string;
    selected: boolean;
  }
  const controlscenebuttons = ref<Button[]>([
    { label: '检修', selected: false },
    { label: '午休', selected: false },
    { label: '疏散', selected: false },
    { label: '客流高峰', selected: false },
  ]);
  const selectedButton4 = ref<Button | null>(null);
  const selectButton4 = (button4: Button) => {
    selectedButton4.value = button4;
  };
  const drawer = ref(true);
  import type { TabsPaneContext } from 'element-plus';
  const activeName = ref('first');
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
  };

  //计划列表
  interface User {
    id: number;
    date: string;
    planname: string;
    status: string;
  }

  const tableData: User[] = [
    {
      id: 1,
      date: '2016-05-03',
      planname: '劳动节',
      status: '暂停中',
    },
    {
      id: 2,
      date: '2016-05-02',
      planname: '国庆节',
      status: '待执行',
    },
    {
      id: 3,
      date: '2016-05-04',
      planname: '元旦',
      status: '待执行',
    },
  ];
  const tableData2: User[] = [
    {
      id: 1,
      date: '2016-05-03',
      planname: '计划再开',
      status: '张三',
    },
    {
      id: 2,
      date: '2016-05-02',
      planname: '检修模式',
      status: '李四',
    },
    {
      id: 3,
      date: '2016-05-04',
      planname: '设备变更',
      status: '王五',
    },
  ];
</script>

<style scoped>
  .main {
    left: 0px;
    top: 0px;
    height: 100%;
    opacity: 0.5;
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(112, 112, 112, 1);
  }

  .drawer-content {
    width: 5%;
    background-color: paleturquoise;
    display: flex;
    /*justify-content: center;  水平居中 */
    align-items: center;
    /* 垂直居中 */
  }

  el-tabs {
    width: 95%;
    background-color: blueviolet;
  }

  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .lightarea {
    left: 51px;
    width: 100%;
  }

  .lightareatab,
  .lightareatext {
    display: inline-block;
  }

  .lightareatab,
  .circuittab,
  .controltab,
  .controlscenetab,
  .lightparameterstab {
    left: 0px;
    top: 5px;
    width: 3px;
    height: 13px;
    opacity: 1;
    border-radius: 1px;
    background: rgba(67, 136, 251, 1);
  }

  .lightareatext,
  .circuittext,
  .controltext,
  .controlscenetext,
  .lightparameterstext {
    margin-left: 11px;
    font-size: 16px;
  }

  .plan {
    width: 88px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(67, 136, 251, 1);
    color: rgba(67, 136, 251, 1);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-left: 11px;
  }

  .area,
  .btnarea,
  .controlmodebtnarea,
  .controlscenearea,
  .lightparametersarea {
    margin-top: 20px;
  }

  .area {
    margin-left: -17px;
  }

  .btn {
    padding: 12px 28px;
    margin-top: 10px;
    margin-left: 17px;
    /* width: 80px; */
    /* height: 40px; */
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
    border: 1px solid rgba(207, 212, 219, 1);
    line-height: 20.27px;
    color: rgba(102, 102, 102, 1);
    text-align: center;
    vertical-align: top;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
  }

  .selected {
    background-color: rgba(39, 120, 255, 1);
    color: rgba(255, 255, 255, 1);
  }

  .btn:hover {
    background-color: rgba(207, 212, 219, 1);
  }

  .btn:active {
    background-color: rgba(102, 102, 102, 1);
    color: white;
  }

  .circuitarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .circuittab,
  .controltab {
    left: 0px;
    top: 5px;
    width: 3px;
    height: 13px;
    opacity: 1;
    border-radius: 1px;
    background: rgba(67, 136, 251, 1);
  }

  .circuittab,
  .circuittext {
    display: inline-block;
  }

  .batch {
    width: 60px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(67, 136, 251, 1);
    color: rgba(67, 136, 251, 1);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-left: 11px;
  }

  .both {
    width: 60px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(255, 118, 2, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    background-color: rgba(255, 118, 2, 1);
    margin-left: 11px;
  }

  .controlarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .controltab,
  .controltext {
    display: inline-block;
  }

  .controlscenetab,
  .controlscenetext {
    display: inline-block;
  }

  :deep(.el-drawer__body) {
    padding-top: 75px;
    height: 100%;
  }

  :deep(.el-tabs__content) {
    height: 100%;
  }

  :deep(.cell) {
    text-align: center;
  }

  :deep(#pane-first) {
    height: 100%;
  }

  .controlscenetab,
  .controlscenetext {
    display: inline-block;
  }

  .controlmodebtnarea {
    margin-top: 20px;
    height: 100%;
  }

  .lightparameterstab,
  .lightparameterstext {
    display: inline-block;
  }

  .lightparameterstextarea {
    border: 1px solid rgba(236, 239, 245, 1);
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* grid-column-gap: 10px; */
    /* grid-row-gap: 10px; */
  }

  .lightparameterstextarea > p {
    height: 100%;
    display: flex;
    border: 1px solid rgba(236, 239, 245, 1);
    justify-content: center;
    align-items: center;
  }

  .bottom {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
  }

  .execute {
    margin-right: 20px;
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    border: 0;
    margin-left: 10px;
  }

  .flushed {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(193, 197, 204, 1);
  }

  .tabreboot,
  .tabdelete {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: rgba(67, 136, 251, 1);
  }

  .tabreboot {
    margin-right: 8px;
  }

  .add {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
  .divadd {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
    margin-right: 20px;
  }
</style>
