<script>
import { list, remove } from "@/api/system/table-template";
export default {
  name: "SearchTable",
  data() {
    const dict = {
      status: [
        { label: "启用", value: "0" },
        { label: "停用", value: "2" },
      ],
    };
    const columns = [
      {
        type: "text",
        prop: "templateCode",
        label: "模板编码",
        showOverflowTooltip: true,
      },
      {
        type: "text",
        prop: "templateName",
        label: "模板名称",
        showOverflowTooltip: true,
      },
      {
        type: "text",
        prop: "desc",
        label: "描述",
        showOverflowTooltip: true,
      },
      {
        type: "text",
        prop: "remark",
        label: "备注",
        showOverflowTooltip: true,
      },
      {
        type: "select",
        prop: "status",
        label: "启用状态",
        showOverflowTooltip: true,
        formatter: true,
      },
      {
        type: "text",
        prop: "createBy",
        label: "创建者",
        showOverflowTooltip: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "createTime",
        label: "创建时间",
        showOverflowTooltip: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "updateBy",
        label: "更新者",
        showOverflowTooltip: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "updateTime",
        label: "更新时间",
        showOverflowTooltip: true,
        readonly: true,
      },
    ];
    const initDict = () => dict;
    const initColumns = () => columns;
    const initOptions = () =>
      initColumns().map((item) => ({ label: item.label, value: item.prop }));
    const initForm = () => {
      let form = {};
      initColumns().forEach((item) => (form[item.prop] = ""));
      return form;
    };
    return {
      loading: false,
      dict: initDict(),
      columns: initColumns(),
      form: initForm(),
      options: initOptions(),
      tableData: [],
      currentData: {},
      page: { pageNum: 1, pageSize: 25 },
      total: 0,
    };
  },
  methods: {
    //
    formatter({ row, column: { property } }) {
      return this.dict[property].find((item) => item.value === row[property])
        .label;
    },
    // 请求
    fetchList() {
      this.loading = true;
      list(this.from, this.page)
        .then((res) => {
          let { code, total, rows } = res;
          if (code === 200) {
            this.total = total;
            this.tableData = rows;
            this.currentData = rows[0];
            this.$message.success("查询成功");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 搜索
    handleSearch() {
      this.pageNum = 1;
      this.fetchList();
    },
    // 重置
    handleReset() {
      this.pageNum = 1;
      this.pageSize = 25;
      this.fetchList();
    },
    // 个数
    handleSize() {
      this.pageNum = 1;
      this.fetchList();
    },
    // 页数
    handleCurrent() {
      this.fetchList();
    },
    // 高亮
    handleRowClass({ row }) {
      if (row.id === this.currentData.id) return "current-row";
    },
    // 选择
    handleCurrentRowSelect(row) {
      this.currentData = row;
    },
    // 复制
    handleCopy(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("AddDialog") > -1)
        .fetchItem(prop);
    },
    // 编辑
    handleEdit(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("EditDialog") > -1)
        .fetchItem(prop);
    },
    // 授权
    handleAuth(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("AuthDialog") > -1)
        .fetchItem(prop);
    },
    // 删除
    handleDelete(prop) {
      this.loading = true;
      remove(prop.id)
        .then((res) => {
          let { code } = res;
          if (code === 200) {
            this.fetchList();
            this.$message.success("删除成功");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.handleSearch();
  },
};
</script>

<template>
  <el-container class="table-template">
    <el-header>
      <div>
        <el-button @click.native.prevent="handleCopy(currentData)" size="small">
          复制
        </el-button>
        <el-button @click.native.prevent="handleEdit(currentData)" size="small">
          修改
        </el-button>
        <el-button @click.native.prevent="handleAuth(currentData)" size="small">
          授权
        </el-button>
        <el-button
          @click.native.prevent="handleDelete(currentData)"
          size="small"
        >
          删除
        </el-button>
      </div>
      <div>
        <el-select v-model="form.select" size="small" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="form.input"
          size="small"
          placeholder="请输入内容"
          :readonly="loading"
        >
          <template #suffix>
            <i v-show="loading" class="el-input__icon el-icon-loading"></i>
            <i v-show="!loading" class="el-input__icon el-icon-search"></i>
          </template>
        </el-input>
        <el-button size="small" @click="handleSearch">搜索</el-button>
        <el-button size="small" @click="handleReset">重置</el-button>
      </div>
    </el-header>
    <el-main>
      <el-table
        v-loading="loading"
        highlight-current-row
        height="100%"
        :data="tableData"
        @row-click="handleCurrentRowSelect"
        :row-class-name="handleRowClass"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column
          width="200"
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :show-overflow-tooltip="column.showOverflowTooltip"
        >
          <template slot-scope="scope">
            <span v-if="column.formatter">{{ formatter(scope) }}</span>
            <span v-else>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        @size-change="handleSize"
        @current-change="handleCurrent"
        :current-page="page.pageNum"
        :page-sizes="[25, 50, 100]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<style scoped>
.table-template .el-header {
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-template .el-header .el-select {
  width: 150px;
  margin-right: var(--margin);
}
.table-template .el-header .el-input {
  width: 250px;
  margin-right: var(--margin);
}
.table-template .el-main {
  padding: 0;
}
.table-template .el-main .el-table {
  width: 100%;
  height: 100%;
}
.table-template .el-footer {
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>
