<template>
  <div class="table">
    <PopForm
      v-if="isShow"
      @closePopForm="closePopForm"
      :data="FormData"
      :that="this"
      @refresh="refresh"
    />
 
    <div class="columns-action">
      <div class="add" v-action:Add :style="{ marginRight: '15px' }" @click="edit('', that)">
        <a-tooltip title="新增">
          <a-icon class="action" type="file-add" />
        </a-tooltip>
      </div>

      <!-- 表格大小设置 -->
      <TableSize
        class="action-size"
        @changeTableSize="changeTableSize"
        :that="this"
      />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />
    </div>


    <a-table
      v-if="data"
      :columns="columns"
      :data-source="data"
      :scroll="{ y: fullHeight - 310 }"
      :size="tableSize"
      row-key="id"
    >
      <!-- 操作 -->
      <template slot="operation" slot-scope="x, y">
        <div>
          <a-button
            type="primary"
            @click="edit(y.id, that)"
            :style="{ marginRight: '5px' }"
            v-action:Modify
          >
            编辑
          </a-button>

          <a-popconfirm
            title="确定删除?"
            @confirm="() => deletedInfo(y.id)"
            v-action:Delete
          >
            <a-button
              type="danger"
              :style="{ background: '#FD572B', marginRight: '5px' }"
            >
              删除
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import "@/common/components/MyTable/table/table.less";
import { getServerList, deleteInfo } from "@/baseConfigComponents/api/enum.js";
import PopForm from "@/baseConfigComponents/components/Enum/Modify/ModifyForm.vue";
import { columns } from "@/baseConfigComponents/components/Enum/List/column.js";
import TableSize from "@/common/components/MyTable/table/TableSize.vue";
import ActionColumns from "@/common/components/MyTable/table/TableSet.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys,
} from "@/common/components/MyTable/table/utils/table.js";
export default {
  data() {
    return {
      columns,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      tableSize: "default", // 表格默认大小
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
    };
  },

  created() {
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));
    // //获取列表
    this.getList(this.searchParams, this);
  },
  methods: {
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail,
    refresh() {
      this.getList(this.searchParams);
    },
    // 获取 广告列表
    getList(searchParams, obj) {
      getServerList(searchParams).then((res) => {
        this.data = res.data;
        this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    // 查询
    searchTable(searchParams) {
      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));
      this.getList(this.searchParams, this);
    },
    // 删除信息
    deletedInfo(id) {
      deleteInfo(id).then(() => {
        this.$message.success("删除成功");
        this.getList({});
      });
    },
  },

  computed: {
    // 提取 标题 传递给子组件
    columnsKeys,
    // 提取 fixed 传递给子组件
    columnsFixed,

    that() {
      return this;
    },
  },
  components: {
    ActionColumns,
    PopForm,
    TableSize,
  },
  watch: {
    fullHeight(val) {
      this.fullHeight = val;
    },
  },
};
</script>
