<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>
