<template>
  <table class="custom-table table1">
    <thead>
      <tr :style="{ background: 'rgba(35,45,69)' }">
        <th>序号</th>
        <th>执行时间</th>
        <th>操作内容</th>
        <th>操作人</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
        :class="row.key === trIndex ? 'isTrIndex' : ''">
        <td>{{ row.key }}</td>
        <td>{{ row.data }}</td>
        <td>{{ row.planName }}</td>
        <td>{{ row.status }}</td>
      </tr>
    </tbody>
  </table>
  <div class="out-dialog" v-if="logModalVisible">
    <div class="content" v-if="logModalVisible">
      <div>
        <div class="div-operation"></div>
        <span class="text-operation">变更内容 </span>
      </div>
      <div class="jbox" v-for="item in cxList" :key="item.id">
        <div class="journal" style="margin-top: 20px">
          <div class="imgText">
            <div class="zjzm">
              <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
        item.name }}</span>
            </div>
          </div>
          <div class="btn-box">
            <div class="btn-item">
              <div class="left">控制模式</div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                亮度
              </div>
              <div class="right">
                <span>100lux</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>30lux</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                控制场景
              </div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                色温
              </div>
              <div class="right">
                <span>4000k</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>3800k</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 60px;"></div>
    <div class="button-box">
      <button class="cancel" @click="logModalVisible = false">取消</button>
    </div>
  </div>
  <div class="div-add">
    <button class="add">刷新</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 初始化
onMounted(() => {

})

// 与父组件的交互  ===================================================================
const props = defineProps({
  // 分区结构（照明区域 > 照明回路）
  treeData: {
    type: Array
  },
});
const emit = defineEmits(['changeArea']);

// 表格数据
const dataSource1 = ref([
  {
    key: '1',
    data: '2024-05-01',
    planName: '计划再开',
    status: '张三111',
  },
  {
    key: '2',
    data: '2024-05-01',
    planName: '检修模式',
    status: '李四12',
  },
  {
    key: '3',
    data: '2024-05-01',
    planName: '设备变更',
    status: '王五33',
  },
]);
const cxList = ref([
  {
    id: '1',
    name: '站厅照明  1区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
  {
    id: '2',
    name: '站厅照明  2区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
  {
    id: '3',
    name: '站厅照明  3区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
]);
let trIndex = ref('-1');
const logModalVisible = ref(false);
const handleRowClick = (index: any) => {
  trIndex.value = index;
  if (index === trIndex.value) {
    console.log('tri');
  }
  // 显示模态框
  logModalVisible.value = true;
};


</script>
<style lang="less" scoped>
@import "./dialogStyle.less";

// 右下角添加按钮
.div-add {

  height: 64px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 20px;
  .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);
  }
}

// 表格
.custom-table {
  border-collapse: collapse;
  width: 416px;
  height: 60px;
  color: rgba(255, 255, 255, 1);
}

.custom-table th,
.custom-table td {
  border: 1px solid rgba(163, 192, 243, 1);
  text-align: left;
  padding: 8px;
  text-align: center;
}

.table1 {
  margin-top: 20px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);

  .tabReboot,
  .tabDelete {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    color: rgba(67, 136, 251, 1);
  }

  .tabReboot {
    margin-right: 8px;
  }

  .isTrIndex {
    background: rgba(67, 136, 251, 1);
  }
}

::v-deep(.ant-transfer) {

  // 屏蔽自带的hover效果
  .ant-transfer-list-content-item:hover {
    background: black;
  }
}
</style>
