<template>
  <div class="total_container">
    <!-- 头部表单区域 -->
    <div class="total_top">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="报销项名称">
          <el-input placeholder="请输入报销项名称" v-model="reimebursementItemQurey.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryType">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="reset()"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-circle-plus"
            @click="addItem()"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="total_content">
      <!-- 表格内容区域 -->
      <el-table
        :data="reimebursementItemList"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="编号" width="60" align="center">
          <template slot-scope="scope">
            {{
              (reimebursementItemQurey.pageNum - 1) * reimebursementItemQurey.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column label="报销项" >
          <template slot-scope="scope">
            <p style="font-weight:900">
              {{scope.row.name}}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="报销说明">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="160"  align="center">
          <template slot-scope="scope">
            <el-button
              type="info"
              icon="el-icon-edit"
              @click="Update(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="reimebursementItemQurey.pageNum"
        :page-size="reimebursementItemQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { queryBypage } from "@/api/reimburtypeList";
import Personal from "../personal/personal.vue";

export default {
    data() {
        return {
            reimebursementItemQurey: {
                pageNum: 1,
                pageSize: 10,
                companyId: null,
                name: ""
            },
            total: 0,
            reimebursementItemList: [],
        };
    },
    created() {
        this.reimebursementItemQurey.companyId = this.$store.getters.companyId;
        this.getpagelist();
    },
    methods: {
        //添加报销项
        addItem() {
            this.$router.push("/reimburtypeAdd");
        },
        // 查询
        getpagelist() {
            queryBypage(this.reimebursementItemQurey)
                .then((res) => {
                if (res.success) {
                    console.log(res);
                    this.reimebursementItemList = res.data.list;
                    this.total = res.data.total;
                }
                else {
                    this.$message.error(res.msg);
                }
            })
                .catch((error) => {
                this.$message.error("查询失败");
            });
        },
        // 修改
        Update(data) {
            this.$router.push({
                path: "/reimburtypeUpdate",
                query: {
                    id: data.id
                },
            });
        },
        // 搜索
        queryType() {
            this.reimebursementItemQurey.pageNum = 1;
            this.getpagelist();
        },
        //分页
        handleCurrentChange(val) {
            this.reimebursementItemQurey.pageNum = val;
            this.getpagelist();
        },
        //重置
        reset() {
            this.reimebursementItemQurey = {
                pageNum: 1,
                pageSize: 10,
                companyId: null,
                name: ""
            };
            this.reimebursementItemQurey.companyId = this.$store.getters.companyId;
            this.getpagelist();
        },
    },
    components: { Personal }
};
</script>

<style>
.total_top {
  margin: 15px 20px 0px 20px;
}
.footer {
  text-align: right;
}
</style>