<template>
      <el-row :gutter="0" class="overview-row">
    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="overview-left">
        <div class="overview-left-title">
          <span>报警总览</span>
        </div>
        <div class="overview-left-content">
          <ul v-loading="alarm_loading">
            <li v-for="(item, index) in alertData" :key="index">
              <div class="content-item" :class="getColor(item.switch_type)">
                <IconAlarm />
                <span style="width:120px; margin-left: 15px;">{{ item.crane_name }}</span>
                <span style="width: 2px;height: 60%;margin: 0px 30px;" :class="getColorSpan(item.switch_type)" />
                <span>{{ item.msg }}</span>
              </div>
            </li>
          </ul>
          <div v-if="!alarm_loading && alertData.length === 0" class="el-table-empty">
            <el-image :src="emptybg"></el-image>
            <span>当前无数据</span>
          </div>
        </div>

      </div>
    </el-col>
    <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
      <div class="overview-right">
        <div class="overview-right-title">
          <span>起重机总览</span>
        </div>
        <div class="overview-right-content">
          <pro-table :height="tabHeight" :loading="tab_loading" :data="craneData" :config="tableConfig">
            <template #default="{ row, label }">
              <div v-if="label === '操作'" style="width: 100%;height: 100%;display: flex;justify-content: center;">
                <div class="button-container" @click="handleClick(row)">
                  查看
                </div>
              </div>
              <div v-if="label === '在线状态'">
                <el-tag effect="dark" v-if="row.Status != '在线' && row.Status != '离线'" type="warning">连接中</el-tag>
                <el-tag effect="dark" v-if="row.Status === '在线'" type="success">在线</el-tag>
                <el-tag effect="dark" v-if="row.Status === '离线'" type="danger">离线</el-tag>
              </div>
            </template>
          </pro-table>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
  
<script lang="ts" setup>
import { useDictStore } from "@/store";
import VraneAPI from "@/api/module_business/crane";
import BizCraneAPI, { BizCranePageQuery } from '@/api/module_business/crane'

const alarm_loading = ref(true);
const alertData = ref([])
const tab_loading = ref(true)
const craneData = ref([])
const tableConfig = ref([
  {
    prop: 'crane_no',
    label: '编号',
    width: 210
  },
  {
    prop: 'crane_name',
    label: '起重机名称'
  },
  {
    prop: 'crane_model',
    label: '型号'
  },
  {
    prop: 'ip_address',
    label: 'IP地址'
  },
  {
    prop: 'status',
    label: '在线状态',
    slot: true
  },
  {
    label: '操作',
    slot: true
  }
])

// 分页查询参数
const queryFormData = reactive<BizCranePageQuery>({
  page_no: 1,
  page_size: 10,
  crane_name: undefined,
  crane_no: undefined,
  crane_model: undefined,
  ip_address: undefined,
  status: undefined,
  created_time: undefined,
  updated_time: undefined,
  created_id: undefined,
  updated_id: undefined,
});

const dictStore = useDictStore();

// 字典数据
const getOptions = async () => {
  return await dictStore.getDict(["sys_user_sex"]);
};

const getCraneListData = async () => {
  try {
    tab_loading.value = true
    const response = await BizCraneAPI.listBizCrane(queryFormData);
    craneData.value = response.data.data.items;
    console.log(craneData.value)
  } finally {
    tab_loading.value = false
  }
}
const getData = () => {
getCraneListData()
// mqttService.connect();
// topics.forEach(topic => {
//   mqttService.subscribe(topic, (message) => {
//     message = JSON.parse(message.toString());
//     if (topic === 'gc/alert') {
//       alertData.value = message.data;
//       alarm_loading.value = false
//     }
//     if (topic === 'gc/crane_status') {
//       message.forEach(item => {
//         craneData.value.forEach(craneItem => {
//           if (craneItem.CraneNo === item.crane_no) {
//             craneItem.Status = item.is_online ? '在线' : '离线';
//           }
//         });
//       });
//     }
//   });
// });
}

onMounted(async () => {
  getData()
  await getOptions();
});
</script>

<style lang="less" scoped>
.overview-row {
  padding: 20px 20px;
}

.overview-left {
  height: calc(100vh - 70px - 40px);
  ;
  margin-right: 20px;
  background: linear-gradient(to bottom, #14428C 0%, #121F34 12%);
  border: 1px solid #284988;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;
}

.overview-left-title {
  width: 400px;
  height: 60px;
  background-image: url('../../assets/img/overview-left-title.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8ECAFF;
  font-size: 24px;
}

.overview-left-content {
  flex: 1;
  width: 100%;
  margin-top: 40px;
  overflow: auto;

  :deep(.el-loading-parent--relative) {
    height: 100%;
    --el-mask-color: rgba(255, 255, 255, 0.1);
  }
}

.content-item {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  padding: 0px 17px;
  font-size: 16px;
}

.content-item-red {
  background: linear-gradient(to right, rgba(249, 20, 61, 0.3) 0%, rgba(89, 105, 164, 0.3) 40%, rgba(23, 41, 68, 0.3) 80%);
  color: #F9143D;
}

.content-item-yellow {
  background: linear-gradient(to right, rgba(255, 216, 0, 0.3) 0%, rgba(89, 105, 164, 0.3) 40%, rgba(23, 41, 68, 0.3) 80%);
  color: #FFD800;
}

.content-item-orange {
  background: linear-gradient(to right, rgba(243, 153, 2, 0.3) 0%, rgba(89, 105, 164, 0.3) 40%, rgba(23, 41, 68, 0.3) 80%);
  color: #f39902;
}

.content-item-span-red {
  background-color: #F9143D;
}

.content-item-span-yellow {
  background-color: #FFD800;
}

.content-item-span-orange {
  background-color: #f39902;
}

.overview-right {
  height: calc(100vh - 70px - 40px);
  ;
  background: linear-gradient(to bottom, #14428C 0%, #121F34 12%);
  border: 1px solid #284988;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;
}

.overview-right-title {
  width: 640px;
  height: 60px;
  background-image: url('../../assets/img/overview-right-title.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8ECAFF;
  font-size: 24px;
}

.overview-right-content {
  width: 100%;
  margin-top: 40px;
  overflow: auto;

  :deep(.el-table__header) {
    border-bottom: 1px solid #3E5487;
  }

  :deep(.el-table__body) {
    font-size: 16px;
  }

  .button-container {
    width: 80px;
    height: 35px;
    background: linear-gradient(to bottom, #0949C6, #0A8DD8);
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    font-size: 16px;
  }
}
</style>
  