<template>
  <div class="conventional 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">批量删除</el-button>
        <el-button size="small" type="default">批量导入</el-button>
      </div> -->

      <el-table
        highlight-current-row
        border
        :data="dataList"
        :height="tableHeight"
        v-loading="loading"
        :span-method="arraySpanMethod"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></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="一级指标"
          align="center"
          min-width="150"
          prop="quota1"
        ></el-table-column>
        <el-table-column
          label="二级指标"
          align="center"
          min-width="150"
          prop="quota2"
        ></el-table-column>
        <el-table-column
          label="考核内容数"
          align="center"
          min-width="80"
          prop="num"
        ></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="添加表"
      :visible.sync="showAdd"
      width="600px"
      custom-class="ele-dialog-form"
    >
      <el-form
        :model="form"
        label-width="90px"
        custom-class="editForm"
        @keyup.enter.native="save"
        @submit.native.prevent
        ref="editForm"
        :rules="rules"
      >
        <el-row :gutter="15">
          <el-col :md="11">
            <el-form-item label="考核年度:" prop="year">
              <el-date-picker
                type="year"
                placeholder="选择考核年度"
                style="width: 100%"
                clearable
                v-model="form.year"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="表格名称:" prop="name">
              <el-input
                placeholder="请输入表格名称"
                clearable
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="表编号:" prop="code">
              <el-input
                placeholder="请输入表编号"
                clearable
                v-model="form.code"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item label="一级指标:" prop="first">
              <el-input
                placeholder="请输入一级指标"
                clearable
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="二级指标:" prop="second">
              <el-input
                placeholder="请输入二级指标"
                clearable
                v-model="form.code"
              ></el-input>
            </el-form-item>
            <el-form-item label="考核内容数:" prop="number">
              <el-input
                placeholder="请输入考核内容数"
                clearable
                v-model="form.code"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="showAdd = false">取消</el-button>&nbsp;
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import search from "./search";
import api from "@/api/basicTable/conventionl.js";
import { mergeSpan } from "@/utils/mixin";
export default {
  components: {
    search,
  },
  mixins: [mergeSpan([
    {name: 'year', col: [1]},
    {name: 'code', col: [2,3]},
    {name: 'quota1', col: [4]}
  ])],
  data() {
    return {
      loading: false,
      dataList: [],
      count: 0,
      page: {
        page: 1,
        limit: Math.floor(
          (document.documentElement.clientHeight - 255 - 45) / 45
        ),
      },
      showAdd: false,
      form: {},
      multipleSelection: [],
      tableHeight: document.documentElement.clientHeight - 255,
      rules: {
        code: [{ required: true, message: "表编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入表格名称", trigger: "blur" }],
        year: [{ required: true, message: "请输入考核年度" }],
      },
      searchParams: {
        year: "",
        code: "",
        name: "",
      },
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    updateParams(data) {
      this.searchParams = data;
      this.resetCurrentPage();
      this.getDataList();
    },
    resetCurrentPage() {
      let page = this.page;
      page.page = 1;
      this.page = page;
    },
    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 = this.reduceData(data);
          this.count = res.data.data.total;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.count = 0;
        });
    },
    add() {
      this.$nextTick(function () {
        this.showAdd = true;
      });
    },
    save() {},
  },
};
</script>

<style>
</style>