<script>
import { list, remove } from "@/api/system/table-template";
export default {
  name: "SearchTable",
  data() {
    const dict = {
      status: [
        { label: "启用", value: "0" },
        { label: "停用", value: "2" },
      ],
    };
    const formatter = function (row, { property }, cellValue, index) {
      return dict[property].find((item) => item.value === row[property]).label;
    };
    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: formatter,
      },
      {
        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 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,
      form: initForm(),
      options: initOptions(),
      columns: initColumns(),
      tableData: [],
      selectionTableData: [],
      page: { pageNum: 1, pageSize: 25 },
      total: 0,
    };
  },
  methods: {
    //
    fetchList() {
      this.loading = true;
      list(this.from, this.page)
        .then((res) => {
          let { code, total, rows } = res;
          if (code === 200) {
            this.tableData = rows;
            this.total = total;
            this.$message.success("success");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //
    onSearch() {
      this.pageNum = 1;
      this.fetchList();
    },
    //
    onReset() {
      this.pageNum = 1;
      this.pageSize = 25;
      this.fetchList();
    },
    //
    onSizeChnage() {
      this.pageNum = 1;
      this.fetchList();
    },
    //
    onCurrentChange() {
      this.fetchList();
    },
    //
    onCopy(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("AddDialog") > -1)
        .fetchItem(prop);
    },
    //
    onEdit(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("EditDialog") > -1)
        .fetchItem(prop);
    },
    //
    onAuth(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("AuthDialog") > -1)
        .fetchItem(prop);
    },
    //
    onDelete(prop) {
      let { id } = prop;
      this.loading = true;
      remove(id)
        .then((res) => {
          let { code } = res;
          if (code === 200) {
            this.$message.success("删除成功");
            this.fetchList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.onSearch();
  },
};
</script>

<template>
  <el-container class="table-template-table">
    <el-header>
      <div class="table-header-top">
        <span>查询条件</span>
        <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="onSearch">搜索</el-button>
          <el-button size="small" @click="onReset">重置</el-button>
        </div>
      </div>
      <!-- <div class="table-header-bottom">
        <el-button
          size="small"
          :disabled="selectionTableData.length !== 1"
          @click="onCopy(selectionTableData[0])"
          >复制</el-button
        >
      </div> -->
    </el-header>
    <el-main>
      <el-table
        v-loading="loading"
        stripe
        highlight-current-row
        :data="tableData"
      >
        <el-table-column
          width="200"
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :formatter="column.formatter"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click.native.prevent="onCopy(scope.row)" size="small">
              复制
            </el-button>
            <el-button @click.native.prevent="onEdit(scope.row)" size="small">
              修改
            </el-button>
            <el-button @click.native.prevent="onAuth(scope.row)" size="small">
              授权
            </el-button>
            <el-button @click.native.prevent="onDelete(scope.row)" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        @size-change="onSizeChnage"
        @current-change="onCurrentChange"
        :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-table .el-header {
  height: fit-content !important;
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  border-bottom: 1px solid #dcdfe6;
}
.table-template-table .table-header-top {
  margin-bottom: var(--margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-template-table .table-header-top .el-select {
  width: 150px;
  margin-right: var(--margin);
}
.table-template-table .table-header-top .el-input {
  width: 250px;
  margin-right: var(--margin);
}
.table-template-table .el-main {
  padding: 0;
}
.table-template-table .el-main .el-table {
  width: 100%;
  height: 100%;
}
.table-template-table .el-footer {
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>
