<template>
  <div class="data-table">
    <div
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="data-table-content"
    >
      <template v-if="tableList.length && action == 0">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 1">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="flightNum"
            label="重量"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 2 && set == 1">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="flightNum"
            label="单"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 2 && set == 2">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 3">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="fdt"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 4 && set == 1">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="pullFlightNum"
            label="单"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 4 && set == 2">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 220px)"
          max-height="calc(100vh - 220px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="pullWeight"
            label="重量"
          >
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableList: {
      type: Array,
      default: () => [],
    },
    action: {
      type: Number,
      default: 0,
    },
    set: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      rowStyle: {
        height: "50px",
        fontSize: "14px",
        color: "#101116",
      },
      tableProps: {
        height: "100%",
        maxHeight: "100%",
        stripe: true,
        border: true,
        highlightCurrentRow: false,
        rowClassName: "rowClass",
        headerCellClassName: "headerCell",
        tooltipEffect: "light",
        showSummary: true,
        rowKey: "",
      },
      tableColumnProperty: {
        width: "",
        fixed: "",
        sortable: false,
        showOverflowTooltip: true,
        align: "center",
        headerAlign: "",
      },
    };
  },
  watch: {
    tableList: {
      handler(val) {
        // console.log(val, "111111111");
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    dataTableContentStyle() {
      const style = {};
      if (this.minHeight) {
        style["min-height"] = this.minHeight;
      }
      if (this.tableHeight) {
        style["height"] = this.tableHeight;
      }
      return style;
    },
  },
  methods: {
    //滚动分页加载
    // load  () {
    //   this.$emit("load", true);
    // };
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  display: flex;
  flex-direction: column;
}
.infinite-list {
  // height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
:deep.el-table {
  .rowClass {
    height: 40px;
    font-size: 14px;
    color: #101116;
  }
  .el-table__header .el-table__cell {
    height: 40px;
    background: #ffffff;
    font-size: 14px;
    font-weight: bold;
    color: #101116;
  }
  .editBtn {
    background: #ffffff;
    border: 1px solid #f79ec6;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #ac014d;
  }
  .delBtn {
    background: #eb2f3b;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    border: none;
  }
  .child-list {
    font-size: 14px;
    font-family: Helvetica;
    font-weight: 400;
    color: #101116;
  }
  .btn-all {
    justify-content: center;
    .btn-list {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .el-table__body .el-table__cell {
    &.el-table-column--selection > .cell {
      display: block;
      text-align: center;
    }
    &.cell-click {
      color: #2d67e3;
      cursor: pointer;
    }
  }
}
:deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f0f3f7;
}
.tableStatus {
  font-size: 14px;
  .icon {
    width: 14px;
    height: 14px;
    background: #2d67e3;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
  }
  .status0 {
    position: relative;
    top: 5px;
  }
  .status1 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #afb4bf;
    }
  }
  .status2 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #eb2f3b;
    }
  }
}
</style>
