<template>
  <div class="app-container enterprises">
    <div class="flex-box eco-header">
      <el-tabs v-model="activeName">
        <el-tab-pane label="本地企业" name="first"></el-tab-pane>
        <el-tab-pane label="异地备案" name="second"></el-tab-pane>
      </el-tabs>
      <div class="location"><i class="el-icon-location"></i>重庆市</div>
    </div>
    <div class="content">
      <div class="search">
        <el-cascader
          ref="address"
          :options="aptitudeCodeList"
          :props="props"
          v-model="queryParams.codeStr"
          placeholder="资质资格"
          collapse-tags
          clearable></el-cascader>
        <el-input placeholder="输入企业名称关键词" v-model="queryParams.key">
          <el-button slot="append">搜索</el-button>
        </el-input>
        <span class="total">共{{tableDataTotal}}条</span>
      </div>
      <div class="table-item">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="50" align="left" fixed>
            <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="公司名称" align="left" width="300">
            <template slot-scope="scope">
              <router-link to="" tag="a" class="a-link">{{ scope.row.name}}</router-link>
            </template>
          </el-table-column>
          <el-table-column label="注册地区" prop="address" width="80"/>
          <el-table-column label="资质资格" prop="aptitudeCountNew" sortable width="120" align="right" />
          <el-table-column label="专业人员" prop="persionCount" sortable width="130" align="right" />
          <el-table-column label="中标业绩" prop="recentlyCount" sortable width="130" align="right" />
          <el-table-column label="最大中标金额（万元）" prop="cgfs" sortable width="160" align="right" />
          <el-table-column label="中标总金额（万元）" prop="cgfs" sortable width="160" align="right" />
          <el-table-column label="四库业绩" prop="skyCount" sortable width="130" align="right" />
          <el-table-column label="公路业绩" prop="cgfs" sortable width="130" align="right" />
          <el-table-column label="水利业绩" prop="cgfs" sortable width="130" align="right" />
          <el-table-column label="常合作业主" prop="cgfs" width="280" align="right" />
          <el-table-column label="客户（个）" prop="customerCount" sortable width="130" align="right" />
          <el-table-column label="供应商（个）" prop="supplierCount" sortable width="130" align="right" />
          <el-table-column label="常合作供应商" prop="cgfs" width="280" align="right" />
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
    <!--<LocalEnterprises v-if="activeName === 'first'"></LocalEnterprises>-->
    <!--<Offsite v-if="activeName === 'second'"></Offsite>-->
  </div>
</template>

<script>

  // import LocalEnterprises from './component/localEnterprises'
  // import Offsite from './component/offsite'
  import aptitudeCode from '@/assets/json/aptitudeCode'
  import { enterprise } from '@/api/macro/macro'
export default {
  name: 'Enterprises',
  // components: {LocalEnterprises,Offsite},
  data() {
    return {
      activeName: 'first',
      queryParams:{
        key:'',
        codeStr:''
      },
      props: {
        value: 'id',
        multiple: true,
        // checkStrictly:true,
        label:'name',
        children:'list',
        expandTrigger:'hover'
      },
      tableData: [
        {
          dataId:'1',
          cgrssqy:'100',
          cgfs:'200',
          address:'江北区',
          name:'重庆市江北区国有资本投资运营管理集团有限公司'
        }
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 1,
      aptitudeCodeList:[],
    }
  },
  created() {
    this.aptitudeCode()
    this.querySubmit()
  },
  methods: {
//资质Json
    async aptitudeCode() {
      // await axios.post("https://files.jiansheku.com/file/json/common/aptitudeCode.json", {}, {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // }).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(res.data.data)
      //   }
      // })
      this.aptitudeCodeList=aptitudeCode
    },
    async querySubmit(){
      const params = { pageNum: this.pageIndex, pageSize: this.pageSize}
      if(this.queryParams.field){
        params.field=this.queryParams.field
      }
      if(this.queryParams.order){
        params.order=this.queryParams.order
      }
      enterprise(params).then(res => {
        console.log(res.data)
      })
    },
    // 重置页数
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.querySubmit()
    },
    // 跳转指定页数
    handleCurrentChange(val) {
      this.pageIndex = val
      this.querySubmit()
    },
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
  .enterprises{
    .eco-header{
      justify-content: space-between;
      height: 48px;
      background: #FFFFFF;
      border-radius: 4px;
      padding:0 16px;
      color: #232323;
      ::v-deep .el-tabs{
        height: 48px;
        line-height: 48px;
        .el-tabs__nav-wrap::after {
          position: static !important;
        }
        .el-tabs__header{
          margin: 0;
          .el-tabs__item{
            padding: 0 16px;
            font-size: 16px;
          }
          .is-active{
            font-weight: bold;
          }
        }
        .el-tabs__content{
          width: 100%;
        }
      }
      .location{
        font-size: 14px;
        color: #0081FF;
        i{
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }
    .content{
      background: #FFFFFF;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px;
      .search{
        ::v-deep .el-cascader{
          width: 180px;
          margin-right: 12px;
          height: 32px;
          .el-input{
            width: 100%;
            height: 32px;
            .el-input__inner{
              height: 32px !important;
            }
          }
          .el-cascader__tags{
            flex-wrap: inherit;
            .el-tag{
              max-width: 100px;
              margin: 5px 0 2px 6px;
            }
          }
        }
        ::v-deep .el-input{
          width: 250px;
          height: 32px;
          .el-input__inner{
            height: 32px;
          }
          .el-input-group__append{
            width: 59px;
            background: #F5F5F5;
            color:#0081FF;
            border-left: 0;
          }
        }
        .total{
          float: right;
          color: #3D3D3D;
          font-size: 12px;
          line-height: 36px;
        }
      }
      .table-item{
        margin-top: 14px;
      }
    }
  }

</style>
