<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="近30日项目噪音监测情况"
    width="1200px"
    top="0"
    append-to-body
  >
    <div class="warning-table-header">
      <div>检测时间</div>
      <div>最大检测值/dB</div>
      <div>是否超标</div>
    </div>
    <div class="warning-table-list">
      <div
        class="warning-table-column"
        v-for="(column, index) in noiseData"
        :key="index"
      >
        <div>{{ column.date }}</div>
        <div>{{ column.max_noise }}</div>
        <div :style="{ color: column.status == 2 ? '#FF5C5C' : '#5CFF6B' }">
          {{ column.status_text }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  name: "NoiseDialog",
  data() {
    return {
      noiseData: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.noiseData = this.data;
        console.log(this.noiseData);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.warning-table-header {
  background: #0e3c75;
  display: flex;
  padding: 12px 0;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  justify-content: space-around;
  div {
    width: calc(100% / 3);
  }
}
.warning-table-column {
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  padding: 12px 0;
  background: rgba(14, 60, 117, 0.2);
  display: flex;
  cursor: pointer;
  justify-content: space-around;
  &:nth-child(2n) {
    background: rgba(14, 60, 117, 0.4);
  }
  div {
    width: calc(100% / 3);
  }
}
.warning-table-list {
  height: 60vh;
  overflow-y: auto;
}
</style>