<template>
  <div class="manage-container">
    <el-table
      id="table"
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="设备id"
        width="220"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="account"
        label="账户"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceSerial"
        label="设备序列号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        :label="$t('maintenance.sbmc')"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="addTime"
        label="添加时间"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ldDeviceName"
        label="所属站点"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="status"
        :label="$t('dataEnquiry.ljzt')"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <el-tag
            v-if="row.status == 1"
            key="在线"
            effect="dark"
            type="success"
            size="mini"
          >
            在线
          </el-tag>
          <el-tag
            v-if="row.status == 0"
            key="离线"
            effect="dark"
            type="danger"
            size="mini"
          >
            离线
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('defalult.cz')"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleLive(row)">播放</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/video';
export default {
  data() {
    return {
      tableData: [],
      lazy: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      listLoading: false,
      elementLoadingText: '正在加载...',
      queryForm: {
        projectId: '',
      },
    };
  },
  created() {
    this.queryForm.projectId = sessionStorage.getItem('projectId');
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { data } = await getList(this.queryForm);
      this.tableData = data;
    },
    handleLive(row) {
      this.$router.push({
        path: '/fluoriteSensorData',
        name: '监控视频',
        query: { account: row.account, deviceSerial: row.deviceSerial },
      });
    },
  },
};
</script>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
</style>
