<template>
  <div class="category ele-body">
    <el-card shadow="never">
      <div class="search">
        <el-form :inline="true" :model="searchParams" size="small">
          <el-form-item label="分类名称">
            <el-select v-model="searchParams.name">
              <el-option
                v-for="(item, index) in startList"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" @click="search"
            >查询</el-button
          >
          <el-button
            type="default"
            size="small"
            @click="
              clear();
              search();
            "
            >清空</el-button
          >
        </el-form>
      </div>
      <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="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="name">
          <el-input
            :disabled="ischecked == 'look'"
            placeholder="请输入如分类名称"
            clearable
            v-model="form.name"
          ></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 api from "@/api/chain/industryClassify.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect"; // 下拉树
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    Treeselect,
  },
  data() {
    return {
      searchParams: {},
      loading: false,
      startList: [],
      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() {
    api
      .getList(Object.assign({}, this.searchParams, this.page))
      .then((res) => {
        let data = res.data.data.records;
        this.startList = data;
      })
      .catch(() => {
        this.startList = [];
      });
    this.getDataList();
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
  methods: {
    clear() {
      this.searchParams = {
        name: "",
      };
    },
    search() {
      // 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;
          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";
    },
    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>
</style>