<template>
  <Card :title="title">
    <!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->

    <!-- <div class="table">
      <div class="thead">
        <div class="row">
          <div class="td">检查项</div>
          <div class="td">检查内容</div>
          <div class="td">检查时间</div>
          <div class="td">整改人</div>
        </div>
      </div>
      <div class="tbody">
        <vue-scroll>
          <div class="row" v-for="(alarm, index) in alarmList" :key="index">
            <div class="td">{{ alarm.checkPoints }}</div>
            <div class="td">{{ alarm.checkContent }}</div>
            <div class="td">{{ alarm.checkTime }}</div>
            <div class="td">{{ alarm.rectifyPeopleAme }}</div>
          </div>
          <div v-if="!alarmList.length">无数据</div>
        </vue-scroll>
      </div>
    </div>-->
    <div style="width: 100%; height: 100%" ref="container">
      <el-table
        :data="alarmList"
        style="width: 100%"
        header-align="center"
        :header-cell-style="{ backgroundColor: '#07162b', color: '#67d4db' }"
        :cell-style="{ color: '#fff' }"
      >
        <el-table-column
          align="center"
          prop="checkItem"
          label="检查项"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="checkContent"
          label="检查内容"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="inspectTime"
          label="检查时间"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="changeUserName"
          label="整改人"
        ></el-table-column>
      </el-table>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
import { gethiddenDangerInspectRecordApi } from '@/assets/js/api/safeManage.js'
import { getNewestSecurityManageDataList2Api } from '@/assets/js/api/dataBoard'
export default {
  components: { Card, JProgressChart },
  props: {
    title: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      projectSn: this.$store.state.projectSn,
      alarmList: [],
      searchForm: {
        status: '',
        inspectStartTime: '',
        inspectEndTime: '',
        pageNo: 1,
        pageSize: 10,
        projectSn: this.$store.state.projectSn,
        itemId: ''
      }
      // yData: [
      //   '未分类',
      //   '临边防护',
      //   '洞口防护',
      //   '悬挑式脚手架',
      //   '被电箱与开关箱',
      //   '扣件式钢管脚手架',
      //   '现场防火',
      //   '材料管理',
      //   '施工方案'
      // ].reverse(),
      // seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
    }
  },
  mounted() {
    gethiddenDangerInspectRecordApi({
      status: 2,
      pageNo: 1,
      pageSize: 100,
      projectSn: this.$store.state.projectSn
    }).then((result) => {
      console.log('表格数据', result)
      this.alarmList = result.result.records
    })
    // getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
    //   console.log('待整改问题: ', res);
    //   this.alarmList = res.result || []
    // })
  }
}
</script>

<style lang="less" scoped>
.table {
  padding: 0 6px;
  height: 100%;
  font-size: 14px;
  color: #fff;
  .thead,
  .tbody {
    &.thead {
      margin-bottom: 5px;
      padding-bottom: 5px;
      color: #6ee4f0;
    }
    &.tbody {
      height: calc(100% - 42px);
    }
    .row {
      width: 100%;
      display: flex;
      .td {
        height: 30px;
        line-height: 30px;
        &:nth-child(1) {
          width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:nth-child(2) {
          // padding-left: 10px;
          // flex: 1;
          width: 100px;
        }
        &:nth-child(3) {
          width: 140px;
        }
        &:nth-child(4) {
          width: 56px;
        }
      }
    }
  }
}
</style>
