<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="companyQurey">
        <el-form-item label="公司名称">
          <el-input v-model="companyQurey.companyName" placeholder="公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="companyQurey.companyAddress" placeholder="公司地址"></el-input>
        </el-form-item>
        <el-form-item label="公司联系电话">
          <el-input v-model="companyQurey.companyPhone" placeholder="公司联系电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="addcompany()">添加公司</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table
        :data="companyList"
        style="width: 100%;text-align: center;"
        border>
        <el-table-column  label="序号" width="50px">
          <template slot-scope="scope">
            {{ (companyQurey.pageNum - 1) * companyQurey.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="公司名称"/>
        <el-table-column prop="companyAddress" label="公司地址"/>
        <el-table-column prop="companyPhone" label="公司联系电话"/>
        <el-table-column prop="companyCreateTime" label="公司注册时间"/>
        <el-table-column prop="companyInformation" label="公司其他信息"/>
      </el-table>
    </div>

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

  </div>

</template>

<script>

import {select} from '@/api/company'

export default {
  data(){
    return{
      companyQurey:{
        companyName:null,
        companyAddress:null,
        companyPhone:null,
        pageSize:10,
        pageNum:1,
      },
      total:0,
      companyList:[],
    }
  },
  created(){
    this.getCompany()
  },
  methods:{
    //查询公司
    getCompany(){
      select(this.companyQurey).then((res)=>{
        if(res.status = "success"){
          this.total = res.data.total
          this.companyList = res.data.list
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    //换页
    handleCurrentChange(val){
      this.companyQurey.pageNum = val
      this.getCompany();
    },
    //添加公司
    addcompany(){
      this.$router.push("/companyadd")
    },
    //查询
    qurey(){
      this.companyQurey.pageNum = 1
      this.getCompany();
    },
    //重置
    reset(){
      this.companyQurey={
        companyName:null,
        companyAddress:null,
        companyPhone:null,
        pageSize:10,
        pageNum:1,
      }
      this.getCompany();
    }
  }
}
</script>

<style scoped>
.container{
  padding: 10px;
}
.conter{
  margin-bottom: 10px;
}
.footer{
  text-align: right;
}
</style>