<template>
  <div v-if="deptId === 365">
    <el-row :gutter="10" style="margin-top: 25px; margin-left: 15px; margin-right: 15px">
      <el-col :span="19">
        <el-card class="box-card">
          <div style="margin: 10px; padding: 10px; height: 350px;" class="underline-container">
            <p style="padding: 8px 16px; background-color: #ecf8ff; border-radius: 4px; border-left: 5px solid #50bfff; margin: 10px 0; font-weight: bold;">
              当前设备状态
            </p>

            <template>
              <el-table :data="tableData" border @cell-click="cellClick">
                <el-table-column label="部门ID" align="center" prop="deptId" v-if="false"></el-table-column>
                <el-table-column label="县区名称" align="center" prop="qx">
                  <template slot-scope="scope">
                    <div :style="{ fontWeight: scope.row.deptId === '369,370,371,372,373' ? 'bold' : 'normal', fontSize: scope.row.deptId === 0 ? '16px' : 'inherit' }">
                      <span>{{ scope.row.qx }}</span>
                    </div>
                  </template>

                </el-table-column>
                <el-table-column label="摄像头在线" align="center" prop="camera_online">
                  <template slot-scope="scope">
                    <div class="hoverable" :style="{  textDecoration: 'underline', color: '#50bfff' }">
                      {{ scope.row.camera_online }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="摄像头离线" align="center" prop="camera_offline">
                  <template slot-scope="scope">
                    <div class="hoverable" :style="{  textDecoration: 'underline', color: '#50bfff' }">
                      {{ scope.row.camera_offline }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="传感器在线" align="center" prop="device_online">
                  <template slot-scope="scope">
                    <div class="hoverable" :style="{  textDecoration: 'underline', color: '#50bfff' }">
                      {{ scope.row.device_online }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="传感器离线" align="center" prop="device_offline">
                  <template slot-scope="scope">
                    <div class="hoverable" :style="{  textDecoration: 'underline', color: '#50bfff' }">
                      {{ scope.row.device_offline }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="box-card" style="height: 95px;text-align: center;line-height: 55px;">
          <span class="button-text">在线设备 {{ countData.online }}</span>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px;height: 95px;text-align: center;line-height: 55px;">
          <span class="button-text">离线设备 {{ countData.offline }}</span>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px;height: 95px;text-align: center;line-height: 55px;">
          <a class="button-text"  @click="goToOtherPage">摄像头{{ countData.camera }}</a>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px;height: 95px;text-align: center;line-height: 55px;">
          <a class="button-text"  @click="goToOtherPages">传感器 {{ countData.device }}</a>
        </el-card>
      </el-col>
    </el-row>
    <!-- 中间折线图图start-->
    <el-row :gutter="10" style="margin-top: 25px; margin-left: 15px; margin-right: 15px">
      <el-col :span="24">
        <el-card class="box-card">
          <el-tabs tab-position="left" style="height: 350px;">
            <el-tab-pane label="当月统计">
              <myChart3/>
            </el-tab-pane>
            <el-tab-pane label="月度统计" v-bind:lazy="true">
              <myChart4/>
            </el-tab-pane>
            <el-tab-pane label="季度统计" v-bind:lazy="true">
              <myChart5/>
            </el-tab-pane>
            <el-tab-pane label="年度统计" v-bind:lazy="true">
              <myChart6/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <!-- 中间折线图图end-->
    <!-- 底部两个扇形图start-->
    <el-row :gutter="10" style="margin-top: 25px; margin-left: 15px; margin-right: 15px">
      <el-col :span="12">
        <el-card class="box-card">
          <div style = "padding: 10px; height: 400px;">
            <myChart/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div style = "padding: 10px; height: 400px;">
            <myChart2/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 底部两个扇形图end-->
  </div>
</template>

<style>
</style>

<script>
  import { countData ,listData, Status} from "@/api/MonitoringCenter/index";
  import myChart from "@/views/indexEcharss/DeviceChart.vue";
  import myChart2 from "@/views/indexEcharss/DevicetypeChart.vue";
  import myChart3 from "@/views/indexEcharss/lintChart.vue";
  import myChart4 from "@/views/indexEcharss/monthlyChart.vue";
  import myChart5 from "@/views/indexEcharss/quarterChart.vue";
  import myChart6 from "@/views/indexEcharss/yearChart.vue";
  import { getUserProfile } from "@/api/system/user";

  export default {
    name: "Broadcast",
    components: {myChart,myChart2,myChart3,myChart4,myChart5,myChart6},
    data() {
      return {
        tableData: [],
        countData: {},
        Status: {},
        deptId: "", // 部门ID
      };
    },
    mounted(){
      this.getUser();
      this.getDataFromBackend();
      this.getList()
      this.getStatus();
    },
    created() {},
    reset() {
      this.form = {
        qx : undefined,
        camera_online: undefined,
        camera_offline: undefined,
        device_online: undefined,
        device_offline: undefined,
        camera_online_total: undefined,
        camera_offline_total: undefined,
        device_online_total: undefined,
        device_offline_total: undefined,
      };
      this.resetForm("form");
    },

    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          this.deptId = response.data.deptId;
          this.roleGroup = response.roleGroup;
          this.postGroup = response.postGroup;
        });
      },
      getDataFromBackend() {
        try {
          countData(this.queryParams).then(response => {
            this.countData = response.data[0];
          })
        } catch (error) {
          console.log(error);
        }
      },
      getStatus() {
        try {
          Status(this.queryParams).then(response => {

            this.Status = response.rows[0];
           ;
          })
        } catch (error) {

        }
      },
      getList() {
        this.loading = true;
        listData(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      goToOtherPage() {
        this.$router.push({
          path:'/centerMonitor/camera',
          query:{
            workingStatus:"1"
          }
        })
      },
      goToOtherPages() {
        this.$router.push({
          path:'/centerMonitor/device',
          query:{
            workingStatus:"1"
          }
        })
      },
      //列表页跳转
      cellClick(row, column, cell, event) {
        let path = '';
        let query = {};

        if (column.property === "camera_online") {
          path = '/centerMonitor/camera';
          query = {
            workingStatus: "0",
            deptId: row.deptId,
          };
        } else if (column.property === "camera_offline") {
          path = '/centerMonitor/camera';
          query = {
            workingStatus: "1",
            deptId: row.deptId
          };
        } else if (column.property === "device_online") {
          path = '/centerMonitor/device';
          query = {
            workingStatus: "0",
            deptId: row.deptId
          };
        } else if (column.property === "device_offline") {
          path = '/centerMonitor/device';
          query = {
            workingStatus: "1",
            deptId: row.deptId
          };
        }
        this.$router.push({
          path: path,
          query: query
        });
      }
    },

  };
</script>
<style>
  .custom-button {
    width: 210px;
    height: 91px;
    margin-bottom: 10px;
  }

  .button-text {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .hoverable:hover {
    cursor: pointer;
    text-decoration: underline;
    color: #50bfff;

  }


</style>
