<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <sideTree />
      </el-col>
      <el-col :lg="20" :xs="24">
        <el-card shadow="never" class="table-container">
          <template #header>
            <div class="flex-x-between">
              <div>
                <el-button
                  v-hasPerm="['sys:dataCollection:add']"
                  type="success"
                >
                  <i-ep-plus />
                  站点管理
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  type="warning"
                >
                  <i-ep-setting />
                  参数设置
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  type="primary"
                >
                  <i-ep-Document />
                  存储设置
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  type="danger"
                >
                  <i-ep-view />
                  数据回放
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  type="info"
                >
                  <i-ep-VideoPlay />
                  开始采集
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  color="#626aef"
                >
                  <i-ep-VideoPause />
                  停止采集
                </el-button>
                <el-button
                  v-hasPerm="['sys:dataCollection:delete']"
                  color="#47487a"
                >
                  <i-ep-FolderOpened />
                  数据存储
                </el-button>
              </div>
            </div>
          </template>

          <el-table
            v-loading="loading"
            size="small"
            :data="pageData"
            height="300px"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              key="id"
              label="编号"
              align="center"
              prop="id"
              width="80"
            />
            <el-table-column label="站点名称" align="center" prop="siteName" />
            <el-table-column label="站点号" align="center" prop="siteNumber" />
            <el-table-column
              label="通道号"
              align="center"
              prop="channelNumber"
            />
            <el-table-column
              label="传感器类型"
              align="center"
              prop="sensorType"
            />
            <el-table-column
              label="传感器坐标"
              align="center"
              prop="sensorCoordinates"
              width="120"
            />
            <el-table-column
              label="时间"
              align="center"
              prop="time"
              width="200"
            />
            <el-table-column
              label="有效值"
              align="center"
              prop="validValue"
              width="200"
            />
            <el-table-column
              label="最大值"
              align="center"
              prop="maxValue"
              width="200"
            />
            <el-table-column
              label="健康状况"
              align="center"
              prop="healthStatus"
              width="180"
            >
              <template #default="scope">
                <el-tag
                  :type="scope.row.healthStatus == 1 ? 'success' : 'info'"
                >
                  {{ scope.row.healthStatus == 1 ? "正常" : "异常" }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
        <div class="bottom">
          <el-tabs
            type="border-card"
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="振动-加速度" name="first">
              <div class="flex">
                <firstChart />
                <secondChart />
                <div>
                  <div class="top flex h-110px">
                    <div class="info">
                      <div>最新告警信息：</div>
                      <div class="warnInfo">
                        11:35:50：通道3告警；
                        <br />
                        11:35:50：通道4告警；
                        <br />
                        11:35:50：通道5告警；
                      </div>
                    </div>
                    <div class="right">
                      <div class="deng">警告闪烁</div>

                      <el-button plain color="#47487a">
                        <i-ep-FolderOpened />
                        查看告警数据
                      </el-button>
                    </div>
                  </div>
                  <div class="bottomTable">
                    <el-divider content-position="left">特殊值分析</el-divider>
                    <el-table
                      v-loading="loading"
                      :data="specialData"
                      size="small"
                    >
                      <el-table-column
                        key="id"
                        label="通道"
                        align="center"
                        prop="channel"
                        width="80"
                      />
                      <el-table-column
                        label="加速度通频值(m/ss)"
                        align="center"
                        prop="acceleration"
                      />
                      <el-table-column
                        label="速度RMES值(mm/s)"
                        align="center"
                        prop="RMES"
                      />
                    </el-table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="振动-速度" name="second">Task</el-tab-pane>
            <el-tab-pane label="振动-gSE分析" name="third">Task</el-tab-pane>
            <el-tab-pane label="压力" name="fourth">Task</el-tab-pane>
            <el-tab-pane label="流量" name="fourth">Task</el-tab-pane>
            <el-tab-pane label="温度" name="fourth">Task</el-tab-pane>
            <el-tab-pane label="AC电流" name="fourth">Task</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DataCollection",
  inherititems: false,
});
import dataCollectionAPI, {
  dataCollectionPageQuery,
  dataCollectionPageVO,
} from "@/api/sLongDemo/dataCollection";
import type { TabsPaneContext } from "element-plus";
import firstChart from "@/views/sLongDemo/dataCollection/firstChart.vue";
import secondChart from "@/views/sLongDemo/dataCollection/firstChart.vue";

const pageData = ref<dataCollectionPageVO[]>();
const total = ref(0);
const loading = ref(false);
const activeName = ref("first");
const queryParams = reactive<dataCollectionPageQuery>({
  pageNum: 1,
  pageSize: 20,
});
const specialData = [
  {
    channel: 1,
    acceleration: "0.210869342036529",
    RMES: "0.1252698691848526",
  },
  {
    channel: 2,
    acceleration: "0.210402041675926",
    RMES: "0.1238168311832614",
  },
  {
    channel: 3,
    acceleration: "0.209233790647856",
    RMES: "0.1257580983765234",
  },
  {
    channel: 4,
    acceleration: "0.211453482556924",
    RMES: "0.1240880729184567",
  },
];
function handleQuery() {
  // debugger
  loading.value = true;
  dataCollectionAPI
    .getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped>
.bottom {
  height: calc(100vh - 600px);
  margin-top: 20px;
}

.info {
  width: 300px;

  .warnInfo {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
}

.right {
  position: relative;
  width: 200px;

  .el-button {
    position: absolute;
    right: 20px;
    bottom: 0;
    margin-top: 10px;
  }
}

@keyframes test {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.deng {
  position: absolute;
  left: 40%;
  width: 50px;
  height: 50px;
  padding: 10px;
  padding-left: 13px;
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
  background-color: rgb(255 1 1 / 80%);
  border-radius: 50%;
  animation: test 1000ms infinite;
}

.bottomTable {
  width: 500px;
}
</style>
