<template>
  <div class="supplier">
    <div class="search-supplier">
      <div class="title_wrap i">
        <div class="enterprise_title">
          准入情况
        </div>
      </div>
      <div class="access-content">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane w100">
          <el-tab-pane label="分包基本信息" name="first">
            <div class="acc-title">基本信息</div>
            <div class="main3-box">
              <p>
                <label class="label">资源平台分类</label>
                <span class="span-one">-</span>
              </p>
              <p>
                <label class="label">公司名称</label>
                <span>555</span>
                <label class="label">注册资本（万元）</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">证件选择</label>
                <span>555</span>
                <label class="label">统一社会信用代码</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">工商注册号</label>
                <span>555</span>
                <label class="label">组织机构代码证号</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">税务登记号</label>
                <span class="span-one">-</span>
              </p>
              <p>
                <label class="label">身份选择</label>
                <span>555</span>
                <label class="label">法人身份证号/护照/其他</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">纳税人身份</label>
                <span>555</span>
                <label class="label">纳税人税率</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">享受优惠政策说明</label>
                <span class="span-one" style="height: 64px">-</span>
              </p>
            </div>
            <div class="main3-box">
              <p>
                <label class="label">法人代表</label>
                <span>555</span>
                <label class="label">公司联系人</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">公司联系人电话</label>
                <span>555</span>
                <label class="label">主项资质</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">公司性质</label>
                <span>555</span>
                <label class="label">资质等级</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">施工承包范围</label>
                <span>555</span>
                <label class="label">专业类别</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">公司注册地所属区域</label>
                <span>555</span>
                <label class="label">公司注册地所属省</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">公司注册地所属城市</label>
                <span>555</span>
                <label class="label">注册地址</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">开户行</label>
                <span>555</span>
                <label class="label">银行账号</label>
                <span>555</span>
              </p>
            </div>
            <div class="acc-title i">上传证书及其他信息</div>
            <skeleton v-if="fbsisSkeleton"></skeleton>

            <div class="table-item-jf table-item" style="margin-top: 16px" v-if="!fbsisSkeleton&&tableData.length>0">
              <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                        v-sticky-header.always="{offsetTop : '-16px',offsetBottom : '10px'}" class="table-item1 fixed-table" border highlight-current-row>
                <el-table-column label="证书类型" :resizable="false">
                  <template slot-scope="scope">
                    <span>{{scope.row.legalPerson||'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="到期时间" width="120" :resizable="false">
                  <template slot-scope="scope">
                    <span>2020-12-30</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="180" :resizable="false">
                  <template slot-scope="scope">
                    <span>{{scope.row.legalPerson||'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="查看" :resizable="false">
                  <template slot-scope="scope">
                    <span class="wordprimary">{{scope.row.legalPerson||'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" :resizable="false">
                  <template slot-scope="scope">
                    <span class="wordprimary">下载</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="acc-title i">项目部意见</div>
            <div class="main3-box">
              <p>
                <label class="label">准入情况</label>
                <span class="span-one">-</span>
              </p>
              <p>
                <label class="label">经办人</label>
                <span>555</span>
                <label class="label">准入时间</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">商务经理</label>
                <span>555</span>
                <label class="label">准入时间</label>
                <span>555</span>
              </p>
              <p>
                <label class="label">项目经理</label>
                <span>555</span>
                <label class="label">准入时间</label>
                <span>555</span>
              </p>
            </div>
            <div class="acc-title i">公司意见</div>
            <div class="main3-box">
              <p>
                <label class="label">公司意见</label>
                <span>555</span>
                <label class="label">准入时间</label>
                <span>555</span>
              </p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="施工业绩" name="second">
            <div class="table-item-jf table-item-jf1 empty-table" v-if="!tableData.length && !isSkeleton">
              <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
              <div class="item-jf-titel">暂无相关数据</div>
              <div class="item-jf-text">抱歉，暂无数据，试试更换搜索条件吧</div>
            </div>
            <skeleton v-if="isSkeleton"></skeleton>

            <div class="table-item-jf table-item" v-if="!isSkeleton&&tableData.length>0">
              <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                        v-sticky-header.always="{offsetTop : '0px',offsetBottom : '10px'}" class="table-item1 fixed-table" border highlight-current-row
                        :header-row-class-name="setHeaderRow" :cell-class-name="setCellClass" :row-class-name="setRowClass" :header-cell-class-name="setCellClass"
                        ref="theOwnerListTable">

                <el-table-column type="index" label="序号" :fixed="tableColumnFixed" width="60" :resizable="false">
                  <template slot-scope="scope">
                    <span>{{(pageNum - 1) *pageSize + scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="标志性工程" :fixed="tableColumnFixed" width="120" :resizable="false">
                </el-table-column>

                <el-table-column label="年度" :resizable="false">
                  <template slot-scope="scope">
                  </template>
                </el-table-column>
                <el-table-column label="所在区域" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="所属省份"  :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="施工面积（㎡）" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="年施工产值（亿）" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="所获荣誉" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="备注说明" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="考察项目" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="考察公司" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>

              </el-table>
            </div>
            <div class="pagination clearfix" v-show="total>0">
              <el-pagination background :page-size="pageSize" :current-page.sync="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                             :total="total">
              </el-pagination>
            </div>

          </el-tab-pane>
          <el-tab-pane label="在施工情况" name="third">
            <div class="table-item-jf table-item-jf1 empty-table" v-if="!tableData.length && !isSkeleton">
              <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
              <div class="item-jf-titel">暂无相关数据</div>
              <div class="item-jf-text">抱歉，暂无数据，试试更换搜索条件吧</div>
            </div>
            <skeleton v-if="isSkeleton"></skeleton>

            <div class="table-item-jf table-item" v-if="!isSkeleton&&tableData.length>0">
              <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                        v-sticky-header.always="{offsetTop : '0px',offsetBottom : '10px'}" class="table-item1 fixed-table" border highlight-current-row
                        :header-row-class-name="setHeaderRow" :cell-class-name="setCellClass" :row-class-name="setRowClass" :header-cell-class-name="setCellClass"
                        ref="theOwnerListTable">

                <el-table-column type="index" label="序号" :fixed="tableColumnFixed" width="60" :resizable="false">
                  <template slot-scope="scope">
                    <span>{{(pageNum - 1) *pageSize + scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="工程名称" :fixed="tableColumnFixed" width="120" :resizable="false">
                </el-table-column>

                <el-table-column label="施工承包范围" :resizable="false">
                  <template slot-scope="scope">
                  </template>
                </el-table-column>
                <el-table-column label="建筑平面（㎡）" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="队长名称"  :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="管理人员数量（人）" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="施工人员数量（人）" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="质量目标" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="考察项目" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
                <el-table-column label="考察公司" :resizable="false">
                  <template slot-scope="scope">
                    {{scope.row.legalPerson||"--"}}
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination clearfix" v-show="total>0">
              <el-pagination background :page-size="pageSize" :current-page.sync="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                             :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

</template>

<script>
  import { encodeStr } from "@/assets/js/common.js";
  import '@/assets/styles/public.scss'
  import '@/assets/styles/supplierlist.scss'
  import skeleton from '@/views/project/projectList/component/skeleton';

  export default {
    name: 'access',
    components:{skeleton},
    data(){
      return {
        encodeStr,
        activeName:'first',
        isSkeleton:false,
        fbsisSkeleton:false,
        total:100,
        tableData:[{legalPerson:8888}],
        pageSize:20,
        pageNum:1,
        // table列是否悬浮
        tableColumnFixed: true,
      }
    },
    created() {
    },
    methods:{
      handleClick(){},
      handleCurrentChange(){},
      setHeaderRow() {
        return "owner-table-list-header";
      },
      setCellClass({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 1) {
          return "enterprise-name-column";
        }
      },
      setRowClass({ row, rowIndex }) {
        return "enterprise-name-row";
      },
    }
  }
</script>

<style scoped lang="scss">
.pagination{
  margin-top: 16px;
  text-align: right;
  margin-right: -10px;
}
</style>
