<gsb-pcpage style="min-height:600px;background-color:#EFF0F7;">
  <div>
    <div class="search-warp">
      <div class="search-all">
        <div class="title">尼斯分类</div>
        <div class="input">
          <el-input  placeholder="请输入主营业务或行业关键词查看所对应的商标类别" v-model="nclfuwu" @keyup.enter.native="nclFuwusearchClick"></el-input>
        </div>
        <div class="search-b">
          <el-button type="primary" style="width:100px;margin-left:-1px" @click="nclFuwusearchClick">检索</el-button >
        </div>
      </div>
    </div>

    <div class="result-warp" >
      <div class="content-title">
        <div style="float:left;font-size:13px;color:#303133;line-height:20px;height:20px">类似商品和服务区分表</div>
        <div style="float:left;font-size:13px;color:#aaa;line-height:20px;height:20px;margin-left:5px">基于尼斯分类</div>
      </div>
      <div style="padding:10px 20px 10px 20px;font-size:13px;height:92px" >
        <div  v-for="(item,index) in tm" >
          <div class="nisi" @click="obtain(index)" :style="styleset(index)">{{index+1}}</div>
        </div>
      </div>
    </div>

    <div class="detail-content" v-if="a">
      <div style="padding-top:30px;padding-left:30px;padding-bottom:30px;color: #128bed;font-size: 18px;">{{datalist.classification}}</div>
      <div style="font-size:13px;font-weight: 400;color: #878787;line-height: 25px;font-family: PingFangSC-Regular;padding-left:30px;">
        {{datalist.construction}}
      </div>
    </div>

    <div class="detail-content2" v-if="a">
      <el-row>
        <el-col :span="6">
          <el-menu default-active="0" >
            <el-menu-item :index="index.toString()" v-for="(item,index) in datalist.data" @click="showdetail(index)">
              <div slot="title" style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.smallclassification}}</div>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="18" style="padding-left:10px">
          <div style="padding:20px;background-color:white">
            <div style="color: #128bed;font-size: 16px;font-weight: 400;line-height: 40px;">{{datalist.data[index].smallclassification}}</div>
            <div style="margin-top:10px;font-size:13px;line-height: 25px;color: #303133">{{datalist.data[index].content}}</div>
          </div>
          <div style="padding:20px;font-size:13px;line-height: 25px;color: #303133">新增非规范:{{datalist.data[index].xinzeng}}</div>
        </el-col>
      </el-row>
    </div>

    <div class="total-warp" v-if="fuwu &&nclfuwudata.length>0">
        <div>
            <el-button type="text" size="small" style="color:#828282" disabled>共查到 <span
                    style="color:#108EE9">{{total}}</span>
                条信息
            </el-button>
        </div>
    </div>
    <div class="result-warp" v-if="fuwu &&nclfuwudata.length>0">
        <el-table :data="nclfuwudata" style="width:100%" row-style="height:50px">
            <el-table-column prop="nclthreename" label="规范商品/服务项目" width="300"></el-table-column>
            <el-table-column prop="nclonename" label="国际分类" width="200"></el-table-column>
            <el-table-column prop="ncltwocode" label="所在群组" width="200"></el-table-column>
            <el-table-column prop="nclthreecode" label="编码" width="200"></el-table-column>
            <el-table-column label="商品类型" width="300">
                <template slot-scope="scope">
                    <span v-if="scope.row.nclthreecode">尼斯商品服务项</span>
                    <span v-else>非规范商品服务项</span>
                </template>
            </el-table-column>
        </el-table>
        <el-footer class="footer-row" v-if="total>0">
            <el-pagination
                    layout=" prev, pager, next, jumper,sizes,total"
                    :currentPage="page"
                    :page-size="size"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[20,50,100,200,500]"
                    :total="total">
            </el-pagination>
        </el-footer>
    </div>


  </div>
</gsb-pcpage>
