<!--
 * @Author: your name
 * @Date: 2022-01-06 16:46:18
 * @LastEditTime: 2022-01-19 16:29:32
 * @LastEditors: Please set LastEditors
 * @Description: 再封一次
 * @FilePath: \goldenPig\src\components\table-cpn\TableCpn.vue
-->
<template>
  <div class="table-cpn">
    <table-content
      :propList="propList"
      :dataList="dataList"
      :total="total"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
      :tableSize="tableSize"
      v-bind="tableStyle"
    >
      <template #leftTitle>
        <el-button
          v-if="hasPerm(permission + ':add')"
          size="small"
          @click="addOrEdit"
        >
          新增
        </el-button>
      </template>
      <!-- <template #rightHandler>
        <right-handler v-model="tableSize" @refresh="init"></right-handler>
      </template> -->

      <template v-for="item in propListFilter" #[item.slotName]="scope">
        <div :key="item.label" style="display: inline-block">
          <slot :name="item.slotName" :row="scope.row">
            {{ scope.row[item.slotName] }}
          </slot>
        </div>
      </template>

      <!-- 操作 -->
      <template #handler="scope">
        <div class="handleBtns">
          <el-button
            v-if="hasPerm(permission + ':edit')"
            size="mini"
            @click="addOrEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            :title="delTitle"
            @confirm="handleDel(scope.row)"
          >
            <el-button
              slot="reference"
              v-if="hasPerm(permission + ':del')"
              size="mini"
              @click="handleDelTitle(scope.row)"
            >
              删除
            </el-button>
          </el-popconfirm>
        </div>
      </template>
    </table-content>
  </div>
</template>
<script>
import TableContent from "./TableContent.vue";
// import RightHandler from "./RightHandler.vue";
// 事件总线
import EventBus from "@/utils/bus.js";

export default {
  components: {
    TableContent,
    // RightHandler,
  },
  props: {
    propList: {
      type: Array,
      required: true,
    },
    permission: {
      // 权限
      type: String,
      required: true,
    },
    requests: {
      // 网络请求
      type: Object,
      required: true,
    },
    searchForm: {
      // 查询参数
      type: Object,
      required: true,
    },
    tableStyle: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      // 表格
      propListFilter: [],
      tableSize: "small",
      pageSize: 10,
      currentPage: 1,
      dataList: [],
      total: 0,
      delTitle: "",
    };
  },
  created() {
    this.propListFilter = this.propList.filter((item) => {
      return item.slotName !== "handler";
    });
  },
  mounted() {
    EventBus.$on("refresh", () => {
      this.init();
    });
  },
  watch: {
    searchForm: {
      handler() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 请求网络数据
    init() {
      for (const key in this.searchForm) {
        this.searchForm[key] = this.searchForm[key] || undefined;
      }
      this.requests
        .list({
          size: this.pageSize,
          current: this.currentPage,
          ...this.searchForm,
        })
        .then((res) => {
          if (res?.code === 10000) {
            this.dataList = res.data.records;
            this.total = res.data.total;
            this.requests.others?.forEach((fn) => {
              fn();
            });
          } else {
            this.dataList = [];
            this.total = 0;
            res && this.$message.error(res.message);
          }
        });
    },
    // 新增 or 编辑 点击事件
    addOrEdit(row) {
      this.$emit("handleAddOrEdit", row);
    },
    // 删除 点击事件
    handleDelTitle() {
      this.delTitle = `确定删除？`;
    },
    handleDel(row) {
      this.requests.del({ ids: row.id }).then((res) => {
        if (res.code === 10000) {
          res && this.$message.success(res.message);
          this.init();
        } else {
          res && this.$message.error(res.message);
        }
      });
    },
    /** 分页相关 */
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.init();
    },
    currentChange(val) {
      this.currentPage = val;
      this.init();
    },
  },
};
</script>
<style scoped>
.handleBtns {
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
}
</style>
