<template>
  <div class="left-content-equipment-check">
    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
    <div class="el-table-wrapper">
      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
      <el-table
        key="LeftContentEquipmentCheck1"
        border
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
        <el-table-column label="设备名称" prop="eqName" />
        <el-table-column label="所属产线" prop="pl" />
        <el-table-column label="提示等级" prop="warningLevel" />
        <el-table-column label="提示等级" prop="checkContent" />
      </el-table>
    </div>
    <!-- <div class="el-table-wrapper">
      <el-table
        key="LeftContentEquipmentCheck2"
        border
        :data="tableData2"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
        <el-table-column label="设备名称" prop="eqName" />
        <el-table-column label="所属产线" prop="pl" />
        <el-table-column label="提示等级" prop="warningLevel" />
        <el-table-column label="提示等级" prop="checkContent" />
      </el-table>
    </div> -->
  </div>
</template>

<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'

const tableProps = [
  { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
  { prop: 'pl', label: '所属产线', width: 120, resizable: false },
  { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
  { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
]
const tableData = [
  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
  { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
  // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
  // { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
]
const tableData2 = [
  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
  { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
  // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
  // { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
]

export default {
  name: 'LeftContentEquipmentCheck',
  components: {},
  data() {
    return { tableProps, tableData, tableData2 }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.left-content-equipment-check {
  display: flex;
  gap: calc(100vmin / 1920 * 36);
}

.el-table-wrapper {
  flex: 1;
}

.left-content-equipment-check > div {
  overflow: hidden;
  overflow-x: scroll;
}

.el-table-wrapper >>> * {
  background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
  background: transparent;
}

.el-table-wrapper >>> .el-table {
  font-size: 8px;
  background-color: transparent;
  color: #fff9;
  border: 0;
}

.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
  border-color: #0d1728;
  padding: 0;
}

.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
  background-color: rgba(79, 114, 136, 0.29) !important;
}

.el-table-wrapper >>> table {
  border: unset;
}

.el-table-wrapper >>> thead {
  color: #fff;
}
.el-table-wrapper >>> tr {
  background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
  white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
  padding: 0;
}

.el-table-wrapper >>> tbody > tr:nth-child(even) {
  background: rgba(76, 97, 123, 0.2);
}
</style>
