<template>
  <div class="category ele-body">
    <el-card shadow="never">
      <search @search="updateParams($event)" />
      <div class="operating">
        <el-button size="small" type="warning" @click="add">新增</el-button>
        <el-button size="small" type="default" @click="remove()"
          >批量删除</el-button
        >
        <!-- <el-button size="small" type="default">批量导入</el-button> -->
      </div>
      <el-table
        highlight-current-row
        :data="dataList"
        border
        :height="tableHeight"
        @selection-change="selectionChange"
        v-loading="loading"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          label="考核年度"
          min-width="80"
          align="center"
          prop="year"
        ></el-table-column>
        <el-table-column
          label="表编号"
          min-width="80"
          align="center"
          prop="code"
        ></el-table-column>
        <el-table-column
          label="表格名称"
          min-width="100"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="备注"
          min-width="100"
          align="center"
          prop="note"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          min-width="100"
          align="center"
          prop="createTime"
        ></el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template slot-scope="{ row }">
            <el-link
              @click="edit(row)"
              icon="el-icon-edit"
              type="primary"
              :underline="false"
              >修改</el-link
            >
            <el-popconfirm
              title="确定要删除此表格？"
              @confirm="remove(row)"
              class="ele-action"
            >
              <el-link
                slot="reference"
                icon="el-icon-delete"
                type="danger"
                :underline="false"
                >删除</el-link
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page.page"
        :page-size="page.limit"
        :total="count"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :pager-count="5"
        class="ele-pagination-circle"
        @current-change="getDataList()"
      />
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showAdd"
      width="400px"
      custom-class="ele-dialog-form"
      :lock-scroll="true"
      :destroy-on-close="true"
      @closed="form = {}"
    >
      <el-form
        :model="form"
        label-width="82px"
        custom-class="editForm"
        @keyup.enter.native="save"
        @submit.native.prevent
        ref="editForm"
        :rules="rules"
      >
        <el-form-item label="考核年度:" prop="year">
          <el-date-picker
            :disabled="ischecked == 'look'"
            type="year"
            placeholder="选择考核年度"
            style="width: 100%"
            v-model="form.year"
            format="yyyy"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="表格名称:" prop="name">
          <el-input
            :disabled="ischecked == 'look'"
            placeholder="请输入如表格名称"
            clearable
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="表编号:" prop="code">
          <el-input
            :disabled="ischecked == 'look'"
            placeholder="请输入表编号"
            clearable
            v-model="form.code"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            :disabled="ischecked == 'look'"
            type="textarea"
            :rows="4"
            v-model="form.note"
            :maxlength="50"
            :show-word-limit="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showAdd = false">取消</el-button>&nbsp;
        <el-button type="primary" @click="save" v-if="ischecked !== 'look'"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import search from "./search";
import api from "@/api/basicTable/category.js";
export default {
  components: {
    search,
  },
  data() {
    return {
      // searchParams: {},
      loading: false,
      dataList: [],
      count: 0,
      dialogTitle: "添加表",
      ischecked: "edit",
      page: {
        page: 1,
        limit: Math.floor(
          (document.documentElement.clientHeight - 308 - 45) / 45
        ),
      },
      showAdd: false,
      form: {},
      multipleSelection: [],
      tableHeight: document.documentElement.clientHeight - 308,
      rules: {
        code: [{ required: true, message: "表编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入表格名称", trigger: "blur" }],
        year: [{ required: true, message: "请输入考核年度", trigger: "blur" }],
      },
      searchParams: {
        year: "",
        code: "",
        name: "",
      },
    };
  },
  created() {
    this.getDataList();
    this.$store.dispatch("base/getQuota1List", 1);
  },
  methods: {
    updateParams(data) {
      this.searchParams = data;
      this.resetCurrentPage();
      this.getDataList();
    },
    resetCurrentPage() {
      let page = this.page;
      page.page = 1;
      this.page = page;
    },
    selectionChange(rows) {
      this.multipleSelection = rows;
    },
    getDataList() {
      this.loading = true;
      api
        .getList(Object.assign({}, this.searchParams, this.page))
        .then((res) => {
          this.loading = false;
          let data = res.data.data.records;
          data = data.map((item) => {
            item.year = item.year + "";
            return item;
          });
          this.dataList = data;
          this.count = res.data.data.total;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.count = 0;
        });
    },
    add() {
      this.dialogTitle = "添加表";
      this.form = { code: "", name: "", note: "", year: "" };
      this.showAdd = true;
      this.ischecked = "add";
    },
    look(row) {
      this.form = Object.assign({}, row);
      this.dialogTitle = "查看表";
      this.showAdd = true;
      this.ischecked = "look";
    },
    edit(row) {
      this.form = Object.assign({}, row);
      this.showAdd = true;
      this.dialogTitle = "编辑表";
      this.ischecked = "edit";
    },
    remove(row) {
      if (!row) {
        // 批量删除
        if (this.multipleSelection.length === 0)
          return this.$message.error("请至少选择一条数据");
        let ids = this.multipleSelection.map((d) => d.id);
        ids.join(",");
        this.$confirm("确定要删除选中表格?", "提示", { type: "warning" })
          .then(() => {
            this.loading = true;
            api
              .delete(ids)
              .then(() => {
                this.loading = false;
                this.$message({ type: "success", message: "删除成功" });
              })
              .catch(() => {
                this.loading = fa;
                se;
                this.$message.error("删失败");
              })
              .finally(() => {
                this.getDataList();
              });
          })
          .catch(() => 0);
      } else {
        // 单个删除
        this.loading = true;
        api
          .delete(row.id)
          .then(() => {
            this.loading = false;
            this.$message({ type: "success", message: "删除成功" });
          })
          .catch(() => {
            this.loading = false;
            this.$message.error("删除失败");
          })
          .finally(() => {
            this.getDataList();
          });
      }
    },
    save() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          let action = this.form.id ? "edit" : "add";
          api[action](this.form)
            .then(() => {
              this.loading = false;
              this.$message({
                type: "success",
                message: this.form.id ? "修改成功" : "添加成功",
              });
              this.getDataList();
            })
            .catch(() => {
              this.loading = false;
              this.$message.error(this.form.id ? "修改失败" : "添加失败");
            })
            .finally(() => {
              this.showAdd = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="css" scoped>
.el-row {
  align-items: stretch;
}
.el-col {
  border-bottom: 1px solid rgb(201, 201, 201);
  border-right: 1px solid rgb(201, 201, 201);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
</style>