<template>
  <div class="page">
    <el-table :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle" :header-row-style="tableRowStyle"
      border :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="80px">
      </el-table-column>
      <el-table-column prop="templateName" label="模板名称" width="300" align="center">
      </el-table-column>
      <el-table-column prop="excelParameter" label="报表字段中文名" align="center">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="tableData.length" layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30, 50]" :current-page="pagination.pageNum" :total="pagination.total"
      @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </div>
</template>
<script>
import { deleteTemplate } from "@/api/reportTemplate";
import { message } from "@/utils/common";
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selectionList: [],
    };
  },
  created() {},

  methods: {
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    deleteRow(row) {
      let _this = this;
      this.$confirm("确认删除吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTemplate({
            id: row.id,
          }).then((res) => {
            if (res.code === "100") {
              message("success", "删除成功", 3000);
              _this.$emit("handleCurrentChange", 1);
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(row) {
      this.selectionList = row;
    },
    batchDelete() {
      if (!this.selectionList.length) {
        this.$message.error("请勾选要删除的数据");
        return;
      }
      let _this = this;
      this.$confirm("确认删除吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.selectionList.forEach((item) => {
            deleteTemplate({
              id: item.id,
            }).then((res) => {
              if (res.code === "100") {
                _this.$emit("handleCurrentChange", 1);
              }
            });
          });
          message("success", "删除成功", 3000);
        })
        .catch(() => {});
    },
    tableCellStyle() {
      return "border-color:#396183";
    },
    tableHeaderCellStyle() {
      return "border-color:#396183";
    },
    tableRowStyle() {
      return "border-color:#396183";
    },
  },
};
</script>
<style lang='scss' scoped>
.page {
  padding: 5px;
  height: 100%;
  background: rgb(235, 235, 235);
  ::v-deep {
    .el-table--border {
      border-left: none;
      border-bottom: none;
    }
  }
  ::v-deep .el-table thead.is-group tr:nth-child(1) th.el-table__cell {
    border-top: 1px solid #396183;
  }
  ::v-deep
    .el-table
    thead.is-group
    tr:nth-child(1)
    th.el-table__cell:nth-child(1) {
    border-left: 1px solid #396183;
  }
  ::v-deep
    .el-table--enable-row-transition
    .el-table__body
    td.el-table__cell:nth-child(1) {
    border-left: 1px solid #396183;
  }
}
</style>
