<div>
    <div>
        <!--首页搜索-->
        <div class="row01" v-if="a">
            <div class="image">
                <span class="search-text">标眼查智能商标检索</span><br>
                <div style="margin-top: 10px;">
                    <!-- <el-input v-model="mark" placeholder="请输入商标名称、申请号、申请人等信息" style="color:#DE3883"
                              @keyup.enter.native="indexsearch">

                        <i slot="suffix" class="iconfont cqtm-cam">
                            &#xe615;
                        </i>
                        <el-button class="leibie-btn" slot="append" @click="checkClick">全部类别
                            <i class="iconfont cqtm-down">
                                &#xe664;
                            </i>
                        </el-button>
                        <el-button class="search-btn" slot="append" id="btn" @click="indexsearch">
                            搜索
                        </el-button>
                    </el-input> -->
                    <el-autocomplete v-model="mark" :fetch-suggestions="querySearch" placeholder="请输入商标名称、申请号、申请人等信息"
                                     style="color:#DE3883;width:700px" @keyup.enter.native="indexsearch"
                                     @select="handleSelect">
                        <!-- <i slot="suffix" class="iconfont cqtm-cam">
                            &#xe615;
                        </i> -->
                        <el-button class="leibie-btn" slot="append" @click="checkClick">全部类别
                            <i class="iconfont cqtm-down">
                                &#xe664;
                            </i>
                        </el-button>
                        <el-button class="search-btn1" slot="append" @click="indexsearch" style="color: white">
                            检索
                        </el-button>
                        <!-- <el-button class="search-btn2" style="color: white" slot="append" @click="intelligentassessClick">智能评估</el-button> -->
                    </el-autocomplete>

                    <el-card v-if="f"
                             style="font-size:13px;height:auto;text-align:left;padding-bottom: 20px;position: absolute;width:700px;">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                            全选
                        </el-checkbox>
                        <el-checkbox-group v-model="checkedNcl" @change="handleCheckedNclChange">
                            <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                                <li v-for="n in ncl" :key="n" style="float:left;width:125px">
                                    <el-checkbox :label="n">{{n}}</el-checkbox>
                                </li>
                            </ul>
                        </el-checkbox-group>
                    </el-card>
                </div>

                <br/>

                <!--商标最新进度-->
                <div class="shangbiaojindu-warp">
                    <!--左边-->
                    <div class="left-item">
                        <div class="img-warp"><img class="item-img" src="/imgs/shouye-ui-01.png"/></div>
                        <span>商标最新进度</span>
                    </div>
                    <div class="right-item">
                        <table cellspacing="0">
                            <tr>
                                <td style="border-bottom: 1px solid #E1E1E1;border-right: 1px solid #E1E1E1;">
                                    <var>最新受理：</var>2019年01月14日申请
                                </td>
                                <td style="border-bottom: 1px solid #E1E1E1;"><var>最新驳回：</var>2018年09月17日申请</td>
                            </tr>
                            <tr>
                                <td style="border-top: 1px solid #E1E1E1;border-right: 1px solid #E1E1E1;">
                                    <var>最新初审：</var>2018年08月13日申请
                                </td>
                                <td style="border-top: 1px solid #E1E1E1;"><var>最新下证：</var>2017年12月15日申请</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!--商标按钮一排-->
                <div class="shangbiao-button-warp">
                    <!-- <div class="item">
                        <button @click="trademarknoticeclick">公告查询 》</button>
                    </div> -->
                    <!-- <div class="item">
                        <button>批量查询 》</button>
                    </div> -->
                    <div class="item" v-if="qianru">
                        <button @click="byctmmonitlick">商标监控 》</button>
                    </div>
                    <div class="item" v-if="qianru">
                        <button @click="bycncldetailclick">2019尼斯分类表 》</button>
                    </div>
                </div>
            </div>
        </div>

        <!--相似商标第一行-->
        <div class="search-warp-row01" v-if="b">
            <!--logo-->
            <img class="biaoyan-logo" src="/imgs/biaoyan-logo.png" style="cursor:pointer;margin-top: 45px;" @click="bycindexclick"/>
            <div class="search-input">
                <div style="margin-top: 20px;"  >

                    <el-tabs v-model="activeName" :tab-position="tabPosition" stretch @tab-click="handleClick">

                        <el-tab-pane label="相同商标" name="second">
                            <el-input class="input-input" v-model="mark" @keyup.enter.native="jqcxsearchClick">
                                <el-button class="leibie-btn" slot="append" @mouseenter.native="mousecheckClick" @mouseleave.native="nonemousecheckClick">全部类别
                                    <i class="iconfont cqtm-down">
                                        &#xe664;
                                    </i>
                                </el-button>
                                <el-button class="search-btn" slot="append"
                                           @click="jqcxsearchClick">检索
                                </el-button>
                            </el-input>
                        </el-tab-pane>
                        <el-tab-pane label="相似商标" name="first">
                            <el-input class="input-input" v-model="mark" placeholder="商标名称"
                                      @keyup.enter.native="xssbsearchClick">
                                <el-button class="leibie-btn" slot="append" @mouseenter.native="mousecheckClick" @mouseleave.native="nonemousecheckClick">全部类别
                                    <i class="iconfont cqtm-down">
                                        &#xe664;
                                    </i>
                                </el-button>
                                <el-button class="search-btn" slot="append"
                                           @click="xssbsearchClick">检索
                                </el-button>
                            </el-input>
                        </el-tab-pane>
                        <el-tab-pane label="申请号" name="third">
                            <el-input class="input-input" v-model="zch" placeholder="请输入申请号"
                                      @keyup.enter.native="zchsearchClick">
                                <!-- <el-button class="leibie-btn" slot="append" @click="checkClick">全部类别
                                    <i class="iconfont cqtm-down">
                                        &#xe664;
                                    </i>
                                </el-button> -->
                                <el-button class="search-btn" slot="append"
                                           @click="zchsearchClick">检索
                                </el-button>
                            </el-input>
                        </el-tab-pane>
                        <el-tab-pane label="申请人" name="fourth">
                            <el-input class="input-input" v-model="mark" placeholder="请输入申请人"
                                      @keyup.enter.native="zcrsearchClick">
                                <!-- <el-button class="leibie-btn" slot="append" @click="checkClick">全部类别
                                    <i class="iconfont cqtm-down">
                                        &#xe664;
                                    </i>
                                </el-button> -->
                                <el-button class="search-btn" slot="append"
                                           @click="zcrsearchClick">检索
                                </el-button>
                            </el-input>
                        </el-tab-pane>

                        <el-tab-pane label="图形检索" name="five" style="width: 600px">
                            <div style="position: relative;float:left">
                                <el-input class="input-input" disabled="true" style="width:500px" placeholder="">
                                    <i slot="suffix" >
                                        <!-- <el-upload ref="imageupload"
                                                   class="imageupload"
                                                   :action="action"
                                                   :data="imagedata"
                                                   multiple="false"
                                                   limit="1"
                                                   :on-exceed="onExceed"
                                                   :accept="accept"
                                                   :before-upload="beforeUpload"
                                                   :on-success="success"
                                                   :on-remove="remove"
                                                   :on-error="error"
                                                   :on-progress="progress"
                                                   :on-preview="preview"
                                                   :show-file-list="false"
                                        >
                                            <span>
                                                 <i class="iconfont" style="color: #108EE9 ;padding-right: 10px">
                                                    &#xe630;
                                                </i>

                                            </span>
                                        </el-upload> -->
                                        <gsb-cropper style="height:100px;" title="把不必要的部分裁剪掉，以保证搜索结果的准确性" @submitSuccess="submitSuccess" @submitError="submitError">
                                        </gsb-cropper>
                                    </i>
                                </el-input>
                                <div class="img-review">
                                    <el-tag
                                            v-if="imageUrl"
                                            :key="tag.name"
                                            closable="true"
                                            @close="closeTag(tag)">
                                        <img class="item-img" name="img" :src="imageUrl" alt="商标"/>
                                        <span>{{tag.name}}</span>
                                    </el-tag>
                                </div>
                            </div>
                            <div>
                                <!--<el-button icon="tool-query" type="default" @click="imagequery()"
                                           style="color:#DE3883"></el-button>-->

                                <el-button style="float:left;padding-left:0px;" class="search-btn" slot="append"
                                           type="default"
                                           @click="imagequery()"
                                           style="margin-left: 0px !important;">检索
                                </el-button>
                            </div>
                        </el-tab-pane>


                        <el-tab-pane label="商品/服务项" name="six">
                            <el-input class="input-input" v-model="nclfuwu" placeholder="请输入查询项"
                                      @keyup.enter.native="nclFuwusearchClick">
                                <!-- <el-button class="leibie-btn" slot="append" @click="checkClick">全部类别
                                    <i class="iconfont cqtm-down">
                                        &#xe664;
                                    </i>
                                </el-button> -->
                                <el-button class="search-btn" slot="append"
                                           @click="nclFuwusearchClick">检索
                                </el-button>
                            </el-input>
                        </el-tab-pane>

                    </el-tabs>
                    <div v-if="fff"class="selected-list1" @mouseenter="mousecheckClick" @mouseleave="nonemousecheckClick">
                        <el-checkbox :indeterminate="isnumIndeterminate" v-model="checkAllNclNum" @change="handleCheckAllNumChange">
                            全选
                        </el-checkbox>
                        <el-checkbox-group v-model="checkedNclNum" @change="handleCheckedNclNumChange">
                            <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                                <li v-for="n in nclNum" :key="n" style="float:left;width:55px">
                                    <el-checkbox :label="n">{{n}}</el-checkbox>
                                </li>
                            </ul>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <!--已选-->
            <div class="selected-warp" v-if="d">
                <span>已选条件: </span>
                <el-tag
                        closable
                        :disable-transitions="false"
                        size="mini"
                        class="item-text"
                        style="margin-left: 20px;font-size:10px;"
                        @close="sqlbtabClose(sqlbtab)" v-if="sqlbtab"
                >
                    <span @mouseenter="staySelectedDropDownList" @mouseleave="noneSelectedDropDownList">{{sqlbtab}}</span>
                </el-tag>
                <!--已选下拉列表-->
                <div v-if="x" class="selected-list" @mouseenter="staySelectedDropDownList"
                     @mouseleave="noneSelectedDropDownList" style="margin-left:83px;">
                    <el-checkbox :indeterminate="isXIndeterminate" v-model="checkxAll"
                                 @change="handleCheckAllChange02">
                        全选
                    </el-checkbox>
                    <el-checkbox-group class="selected-list-scroll" v-model="checkedXcl" @change="handleCheckedXclChange">
                        <ul>
                            <li v-for="x in xcl" :key="x" style="width:125px">
                                <el-checkbox :label="x">{{x.code}} {{x.name}}</el-checkbox>
                            </li>
                        </ul>
                    </el-checkbox-group>
                    <!--按钮-->
                    <div class="buttom-warp">
                        <div class="item">
                            <button>取消</button>
                        </div>
                        <div class="item" @click="ncltwocodeclick">
                            <button>确认</button>
                        </div>
                    </div>
                </div>


                <el-tag
                        closable
                        :disable-transitions="false"
                        size="mini"
                        class="item-text"
                        style="margin-left: 20px;font-size:10px;"
                        @close="flzttabClose(flzttab)" v-if="flzttab">
                    {{flzttab}}
                </el-tag>
                <el-tag
                        closable
                        :disable-transitions="false"
                        size="mini"
                        class="item-text"
                        style="margin-left: 20px;font-size:10px;"
                        @close="sqnftabClose(sqnftabkey)" v-if="sqnftabkey">
                    {{sqnftabkey}}
                </el-tag>
            </div>


            <div style="width:1050px;color:black;margin:auto;margin-top:10px;" v-if="e">
                <!--申请类别-->
                <gsb-collapse2 class="shenqing-warp">
                    <el-row slot="desc">
                        <el-col :span="2" style="padding:3px 0;">
                            <span>申请类别:</span>
                        </el-col>
                        <el-col class="item" v-for="o in sqlbdata.slice(0,6)" :key="o" :span="3">
                            <el-button type="text" @click="sqlbclick(o)" size="mini" :style="styleset(o.key)">
                                {{o.keyvalue}}<var>({{o.keycount}})</var>
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row2">
                        <el-col class="item" v-for="o in sqlbdata.slice(6,45)" :key="o" :span="3">
                            <el-button type="text" @click="sqlbclick(o)" size="mini" :style="styleset(o.key)">
                                {{o.keyvalue}}<var>({{o.keycount}})</var>
                            </el-button>
                        </el-col>
                    </el-row>
                </gsb-collapse2>

                <!--法律状态-->
                <gsb-collapse3 class="falv-warp">
                    <el-row slot="desc">
                        <el-col :span="2" style="padding:3px 0;">
                            <span>法律状态:</span>
                        </el-col>
                        <el-col class="item" v-for="o in flztdata" :key="o" :span="3">
                            <el-button type="text" @click="flztclick(o)" size="mini" :style="stylesetflzt(o.key)">
                                {{o.keyvalue}}<var>({{o.keycount}})</var>
                            </el-button>
                        </el-col>
                    </el-row>
                </gsb-collapse3>

                <!--申请年份-->
                <gsb-collapse2 class="nianfen-warp">
                    <el-row slot="desc">
                        <el-col :span="2" style="padding:3px 0;">
                            <span>申请年份:</span>
                        </el-col>
                        <el-col class="item" v-for="o in sqnfdata.slice(0,10)" :key="o" :span="2">
                            <el-button type="text" @click="sqnfclick(o)" size="mini" :style="stylesetsqnf(o.key)">
                                {{o.key}}<var>({{o.keycount}})</var>
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row2">
                        <el-col class="item" v-for="o in sqnfdata.slice(10,50)" :key="o" :span="2">
                            <el-button type="text" @click="sqnfclick(o)" size="mini" :style="stylesetsqnf(o.key)">
                                {{o.key}}<var>({{o.keycount}})</var>
                            </el-button>
                        </el-col>
                    </el-row>
                </gsb-collapse2>

                <!--筛选条件-->
                <div style="width:1050px;color:black;height: 30px;margin:auto;" v-if="g">
                    <div style="float:left;margin-top:5px;width:90px;height:25px;text-align: left;">
                        <span style="font-size:13px;color:#828282">高级筛选: </span>
                    </div>
                    <div style="float:left;margin-top:5px;width:80px;height:25px;text-align: left;">
                        <el-checkbox :indeterminate="isIndeterminateSbtj" v-model="checkAllSbtj"
                                     @change="handleCheckAllChangeSbtj">
                            全选
                        </el-checkbox>
                    </div>
                    <div style="float:left;width:700px;height:25px;margin-top:5px;text-align: left;">
                        <el-checkbox-group v-model="checkedSbtj" @change="handleCheckedChangeSbtj">
                            <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                                <li v-for="s in sbtj" :key="s" style="float:left;width:100px;">
                                    <el-checkbox :label="s" size="mini">{{s}}</el-checkbox>
                                </li>
                            </ul>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="zhuce-warp"
                 v-if="xssb_no_ncl && xssb_unregistered_Ncl.length>0"
                 :data="xssb_unregistered_Ncl">
                <div>
                    <span class="item-text">
                         <i class="iconfont">&#xe625;</i>以下类别暂未申请注册，您可以尝试注册哦！
                    </span>
                </div>
                <div style="width:1050px;">
                  <gsb-collapse2 class="shenqing-warp">
                      <el-row slot="desc">
                          <el-col class="item1" v-for="o in xssb_unregistered_Ncl.slice(0,7)" :key="o" :span="2">
                              <el-button  size="mini" style="width:120px;" disabled>
                                  {{o.name}}
                              </el-button>
                          </el-col>
                      </el-row>
                      <el-row class="desc">
                          <el-col class="item1" v-for="o in xssb_unregistered_Ncl.slice(7,45)" :key="o" :span="2">
                              <el-button   size="mini" style="width:120px;margin-top:3px;" disabled>
                                  {{o.name}}
                              </el-button>
                          </el-col>
                      </el-row>
                  </gsb-collapse2>

                    <!-- <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                        <li class="item-li" v-for="o in xssb_unregistered_Ncl" :key="o">
                            <el-button type="text" size="mini" disabled>{{o.name}}</el-button>
                        </li>
                    </ul> -->
                    <div style="clear:both;height:0;font-size: 1px;line-height: 0px;"></div>
                </div>
                <div style="width:100%;border-bottom:1px solid #eee;"></div>
            </div>
            <div class="zhuce-warp"
                 v-if="jqcx_no_ncl && jqcx_unregistered_Ncl.length>0"
                 :data="jqcx_unregistered_Ncl">
                <div>
                    <span class="item-text">
                         <i class="iconfont">&#xe625;</i>以下类别暂未申请注册，您可以尝试注册哦！
                    </span>
                </div>
                <div style="width:1050px;">
                  <gsb-collapse2 class="shenqing-warp">
                      <el-row slot="desc">
                          <el-col class="item1" v-for="o in jqcx_unregistered_Ncl.slice(0,7)" :key="o" :span="2">
                              <el-button  size="mini" style="width:120px;" disabled>
                                  {{o.name}}
                              </el-button>
                          </el-col>
                      </el-row>
                      <el-row class="desc">
                          <el-col class="item1" v-for="o in jqcx_unregistered_Ncl.slice(7,45)" :key="o" :span="2">
                              <el-button   size="mini" style="width:120px;margin-top:3px;" disabled>
                                  {{o.name}}
                              </el-button>
                          </el-col>
                      </el-row>
                  </gsb-collapse2>
                    <!-- <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                        <li class="item-li" v-for="o in jqcx_unregistered_Ncl" :key="o">
                            <el-button type="text" size="mini" disabled>{{o.name}}</el-button>
                        </li>
                    </ul> -->
                    <div style="clear:both;height:0;font-size: 1px;line-height: 0px;"></div>
                </div>
                <div style="width:100%;border-bottom:1px solid #eee;"></div>
            </div>


        </div>
    </div>

    <!-- <div style="width:1000px;color:black;height:100%;margin:auto;"  v-if="zcr_no_ncl && zcr_unregistered_Ncl.length>0" :data="zcr_unregistered_Ncl">
      <div>
        <span style="font-size: 12px;">以下类别是暂未申请注册，您可以尝试注册哦！</span>
      </div>
      <div style="margin-left:30px;width:990px;">
          <ul style="list-style:none; padding:0;margin:0;text-align:left;">
            <li v-for="o in zcr_unregistered_Ncl" :key="o" style="float:left;width:120px;">
              <el-button type="text" size="mini" disabled>{{o.name}}</el-button>
            </li>
          </ul>
          <div style="clear:both;height:0;font-size: 1px;line-height: 0px;"></div>
      </div>
      <div style="width:100%;border-bottom:1px solid #eee;"></div>
    </div> -->
    <!--共查到数据-->
    <div class="total-warp" v-if="h">
        <div>
            <el-button type="text" size="small" style="color:#828282" disabled>共查到 <span
                    style="color:#108EE9">{{total}}</span>
                条信息
            </el-button>
        </div>
        <!--排版切换-->
        <div v-if="c" style="width:25px" @click="changedatashow3"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture3.png"/></div>
        <div v-if="c" style="width:25px" @click="changedatashow1"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture1-1.png"/></div>
        <div v-if="c" style="width:25px" @click="changedatashow2"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture2.png"/></div>
        <div v-if="c2" style="width:25px" @click="changedatashow3"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture3.png"/></div>
        <div v-if="c2" style="width:25px" @click="changedatashow1"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture1.png"/></div>
        <div v-if="c2" style="width:25px" @click="changedatashow2"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture2-2.png"/></div>
        <div v-if="c3" style="width:25px" @click="changedatashow3"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture3-3.png"/></div>
        <div v-if="c3" style="width:25px" @click="changedatashow1"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture1.png"/></div>
        <div v-if="c3" style="width:25px" @click="changedatashow2"><img style="width:15px;cursor:pointer;"
                                                                        src="imgs/picture2.png"/></div>
        <!--导出数据-->
        <span class="daochu-text" @click="showExport">
                <i class="iconfont cqtm-down">
                    &#xe80b;
                </i>
                导出数据
        </span>
        <!-- <div style="float:left;width:600px;height:30px;text-align: right;;overflow: hidden; ">
          <el-button type="text" :disabled="defaultsort" size="small" @click="defaultsortclick">默认排序</el-button>
          <el-button type="text" :disabled="sblxsort" size="small" @click="sblxsortclick" >商标类型</el-button>
          <el-button type="text" :disabled="sqnfsort" size="small" @click="sqnfsortclick">申请年份</el-button>
        </div>
        <div style="float:left;width:200px;height:30px;text-align: center;background-color:#EBEEF5">
            <el-button type="text" size="small" disabled>智能化商标服务</el-button>
        </div> -->
    </div>
    <div class="result-warp2" v-if="c2">
        <el-table :data="querydata" style="width:100%;cursor:pointer;padding:0 20px;" @row-click="handle1" row-style="height:50px;">
            <el-table-column prop="sbmc" label="商标名称" width="200"></el-table-column>
            <el-table-column prop="gjflname" label="国际分类" width="140"></el-table-column>
            <el-table-column prop="sbzch" label="申请号" width="100"></el-table-column>
            <el-table-column prop="sqrq" label="申请日期" width="160"></el-table-column>
            <el-table-column prop="sbzt" label="法律状态" width="100"></el-table-column>
            <el-table-column prop="sbqz" label="商标群组" width="200"></el-table-column>
            <el-table-column prop="zcr" label="申请人" width="300"></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 class="result-warp3" v-if="c3">
      <div style="width:300px;float:left;">
        <el-table :data="querydata" style="width:100%;cursor:pointer;" height="540" @row-click="handle2" row-style="height:20px;" highlight-current-row>
          <el-table-column prop="sbmc" label="商标名称" width="130"></el-table-column>
          <el-table-column prop="gjfl" label="分类" width="50"></el-table-column>
          <el-table-column prop="sqrq" label="申请日期" width="120"></el-table-column>
        </el-table>
        <div style="width:100%;height:50px;background-color:white;margin-top:0px;text-align:center">
          <el-pagination small
          :page-size="size"
          :currentPage="page"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange1"
          style="padding-top:15px">
          </el-pagination>
        </div>
      </div>
      <div style="width:900px;float:left">
        <div class="brand-detail-table">
          <tbody>
            <tr>
                <td class="td-title" >商标名称</td>
                <td class="td-content" colspan="2" v-if="detaildata.sbmc==null || detaildata.sbmc==\'\'">---</td>
                <td class="td-content" colspan="2" v-else>{{detaildata.sbmc}}</td>
                <td rowspan="5">
                    <img v-if="detaildata.logo" style="width:140px;height:140px;margin-left: 50px"
                         :src="detaildata.logo">
                    <img v-else style="width:140px;height:140px;"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png">
                </td>
            </tr>
            <tr>
              <td class="td-title">申请号</td>
              <td class="td-content" colspan="2" v-if="detaildata.sbzch==null || detaildata.sbzch==\'\'">---</td>
              <td class="td-content" colspan="2" v-else>{{detaildata.sbzch}}</td>
            </tr>
            <tr>
              <td class="td-title">法律状态</td>
              <td class="td-content" style="color: #108EE9;" colspan="2" v-if="detaildata.sbzt==null || detaildata.sbzt==\'\'">
                  ---
              </td>
              <td class="td-content" style="color: #108EE9;" colspan="2" v-else>{{detaildata.sbzt}}</td>
            </tr>
            <tr>
              <td class="td-title">国际分类</td>
              <td class="td-content" colspan="2" v-if="detaildata.gjfl==null || detaildata.gjfl==\'\'">---</td>
              <td class="td-content" colspan="2" v-else>{{detaildata.gjflname}}</td>
            </tr>
            <tr>
              <td class="td-title">申请日期</td>
              <td class="td-content" colspan="2" v-if="detaildata.sqrq==null || detaildata.sqrq==\'\'">---</td>
              <td class="td-content" colspan="2" v-else>{{detaildata.sqrq}}</td>
            </tr>
            <tr>
              <td class="td-title">申请人名称</td>
              <td class="td-content" style="color: #108EE9;" colspan="3" v-if="detaildata.zcr==null || detaildata.zcr==\'\'">
                  ---
              </td>
              <td class="td-content" style="color: #108EE9;" colspan="3" v-else>
                <span style="cursor: pointer" @click="mask(detaildata.zcr)">{{detaildata.zcr}}</span>
                <i class="iconfont" @click="mask(detaildata.zcr)" style="cursor: pointer">&#xe67d;</i>
              </td>
            </tr>
            <tr>
              <td class="td-title">申请人地址</td>
              <td class="td-content" colspan="3" v-if="detaildata.zcdz==null || detaildata.zcdz==\'\'">---</td>
              <td class="td-content" colspan="3" v-else>{{detaildata.zcdz}}</td>
            </tr>
            <tr>
                <td class="td-title">申请人名称（英文）</td>
                <td class="td-content" colspan="3" v-if="detaildata.zcren==null || detaildata.zcren==\'\'">---</td>
                <td class="td-content" colspan="3" v-else>{{detaildata.zcren}}</td>
            </tr>
            <tr>
                <td class="td-title">申请人地址（英文）</td>
                <td class="td-content" colspan="3" v-if="detaildata.zcdzen==null || detaildata.zcdzen==\'\'">---</td>
                <td class="td-content" colspan="3" v-else>{{detaildata.zcdzen}}</td>
            </tr>
            <tr>
                <td class="td-title">
                    商品/服务项目
                </td>
                <td colspan="3">
                    <!--第二列-->
                    <table class="innner-table">
                        <tr class="row01">
                            <td class="td-title">
                                已注册群组
                            </td>
                            <td class="td-title">
                                未注册群组
                            </td>
                        </tr>
                        <tr class="row02">
                            <td class="td-title td-row01">

                                  <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                                    <li v-for="o in nclexist" :key="o" >
                                      <span>{{o.code}} {{o.small_name}} </span>
                                    </li>
                                  </ul>

                            </td>
                            <td class="td-title">
                                  <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                                    <li v-for="o in nclnotexist" :key="o" >
                                      <span>{{o.code}} {{o.name}} </span>
                                    </li>
                                  </ul>

                            </td>
                        </tr>

                    </table>
                </td>
            </tr>

            <tr>
                <td class="td-title">初审公告期号</td>
                <td class="td-content" v-if="detaildata.csggqh==null || detaildata.csggqh==\'\'">---</td>
                <td class="td-content" v-else>
                  <span>{{detaildata.csggqh}}</span>
                  <span @click="noticecsggClick(detaildata)"><i class="el-icon-search" style="cursor:pointer;color:#108EE9;"></i></span>
                </td>
                <td class="td-title">初审公告日期</td>
                <td class="td-content" v-if="detaildata.csrq==null || detaildata.csrq==\'\'">---</td>
                <td class="td-content" v-else>{{detaildata.csrq}}</td>
            </tr>
            <tr>
                <td class="td-title">注册公告期号</td>
                <td class="td-content" v-if="detaildata.zcggqh==null || detaildata.zcggqh==\'\'">---</td>
                <td class="td-content" v-else>
                  {{detaildata.zcggqh}}
                  <span @click="noticezcggClick(detaildata)"><i class="el-icon-search" style="cursor:pointer;color:#108EE9;"></i></span>
                </td>
                <td class="td-title">注册公告日期</td>
                <td class="td-content" v-if="detaildata.zcrq==null || detaildata.zcrq==\'\'">---</td>
                <td class="td-content" v-else>{{detaildata.zcrq}}</td>
            </tr>
            <tr>
                <td class="td-title">专用权期限</td>
                <td class="td-content">---</td>
                <td class="td-title">代理机构名称</td>
                <td class="td-content" style="color: #108EE9;" v-if="detaildata.dljg==null || detaildata.dljg==\'\'">---</td>
                <td class="td-content" style="color: #108EE9;" v-else>
                  <span style="cursor: pointer" @click="mask(detaildata.dljg)">{{detaildata.dljg}}</span>
                  <i class="iconfont" @click="mask(detaildata.dljg)" style="cursor: pointer;color: rgb(16, 142, 233)">&#xe67d;</i>
                </td>
            </tr>
            <tr>
                <td class="td-title">商标公告流程</td>
                <td class="td-content" colspan="3" v-if="detaildata.lcxx==null || detaildata.lcxx==\'\'">---</td>
                <td class="td-content" colspan="3" v-else>{{detaildata.lcxx}}</td>
            </tr>
        </tbody>
        </div>
        <br/>
        <br/>

        <!--弹出层-->
        <div id="mask" ref="mask"  v-if="showMask">
            <div class="list-warp">
                <div class="list">
                    <!--关闭按钮-->
                    <div class="close-button" @click="maskclose()">
                        <i class="iconfont">&#xe605;</i>
                    </div>
                    <!--左边图片详情-->
                    <div class="left-item">
                        <img src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png">
                        <div class="title">
                            {{companyInfo.showName}}
                        </div>
                        <div class="detail-warp">
                            <!--第一行-->
                            <!--<div class="row">
                                <div class="item-img"><img src="/imgs/tm_e.png"/></div>
                                <div class="item-title" v-if="companyInfo.tel_info==null || companyInfo.tel_info==\'\'">
                                    暂无数据
                                </div>
                                <div class="item-title" v-else>{{companyInfo.tel_info}}</div>
                            </div>-->
                            <div class="clear-div"></div>
                            <!--第二行-->
                            <div class="row">
                                <div class="item-img"><img src="/imgs/tm_tel.png"/></div>
                                <div class="item-title"
                                     v-if="companyInfo.tel_info==null || companyInfo.tel_info==\'\'">
                                    -
                                </div>
                                <div class="item-title" v-else>{{companyInfo.tel_info}}</div>
                            </div>

                            <!--第三行-->
                            <div class="row">
                                <div class="item-img"><i class="iconfont">&#xe66b;</i></div>
                                <div class="item-title"
                                     v-if="companyInfo.businessAddress ==null || companyInfo.businessAddress ==\'\'">
                                    -
                                </div>
                                <div class="item-title" v-else>{{companyInfo.businessAddress }}</div>
                            </div>
                        </div>
                    </div>
                    <!--宽 860 高 431 右手边表格-->
                    <div class="right-item">
                        <table cellspacing="0" border="0">
                            <!--第1行-->
                            <tr>
                                <td class="title">统一社会信用代码</td>
                                <td v-if="companyInfo.creditCode==null || companyInfo.creditCode==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.creditCode}}</td>
                                <td class="title">组织机构代码</td>
                                <td>{{companyInfo.organizationCode}}</td>
                            </tr>
                            <!--第2行-->
                            <tr>
                                <td class="title">注册号</td>
                                <td v-if="companyInfo.registrID==null || companyInfo.registrID==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.registrID}}</td>
                                <td class="title">经营状态</td>
                                <td v-if="companyInfo.managementState==null || companyInfo.managementState==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.managementState}}</td>
                            </tr>
                            <!--第3行-->
                            <tr>

                                <td class="title">公司类型</td>
                                <td v-if="companyInfo.companyType==null || companyInfo.companyType==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.companyType}}</td>
                                <td class="title">成立日期</td>
                                <td v-if="companyInfo.foundation==null || companyInfo.foundation==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.foundation}}</td>
                            </tr>
                            <!--第4行-->
                            <tr>
                                <td class="title">法定代表人</td>
                                <td v-if="companyInfo.legalRepresentative==null || companyInfo.legalRepresentative==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.legalRepresentative}}</td>
                                <td class="title">营业期限</td>
                                <td v-if="companyInfo.businessTerm==null || companyInfo.businessTerm == \'null至null\' || companyInfo.businessTerm==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.businessTerm}}</td>
                            </tr>
                            <!--第5行-->
                            <tr>
                                <td class="title">注册资本</td>
                                <td v-if="companyInfo.registeredCapital==null || companyInfo.registeredCapital==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.registeredCapital}}</td>
                                <td class="title">发照日期</td>
                                <td v-if="companyInfo.dateIssue==null || companyInfo.dateIssue==\'\'">
                                    -
                                </td>
                                <td v-else>{{companyInfo.dateIssue}}</td>
                            </tr>
                            <!--第6行-->
                            <tr>
                                <td class="title">登记机关</td>
                                <td v-if="companyInfo.registerOffice==null || companyInfo.registerOffice==\'\'">
                                    -
                                </td>
                                <td colspan="3" v-else>{{companyInfo.registerOffice}}</td>
                            </tr>
                            <!--第7行-->
                            <tr>
                                <td class="title" rowspan="3">营业范围</td>
                                <td v-if="companyInfo.scope==null || companyInfo.scope===\'\'" rowspan="3">
                                    -s
                                </td>
                                <td colspan="3" rowspan="3" v-else>
                                    <p>{{companyInfo.scope}}</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

      </div>
    </div>
    <div class="result-warp" v-if="c">
        <div class="item-left">
            <el-collapse :data="querydata">
                <ul style="list-style:none; padding:0;margin:0;">
                    <li class="text item" v-for="o in querydata" :key="o">
                        <div style="float:left;width:1200px;height:140px;">
                            <div class="item-img-warp" style="cursor: pointer;" @click="trademarkdetailclick(o)">
                                <img class="item-img" v-if="o.logo" :src="o.logo">
                                <img class="item-img" v-else
                                     src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png">
                            </div>
                            <div class="item-text-warp" style="margin-top:35px;margin-left:10px;">
                                <!--第一行title-->
                                <div class="title">
                                    <a href="javascript:void(0);" @click="trademarkdetailclick(o)" target="_blank"
                                       v-if="o.sbmc==null||o.sbmc==\'\'">---</a>
                                    <a href="javascript:void(0);" @click="trademarkdetailclick(o)" target="_blank"
                                       v-else-if="o.sbmc.length>20">{{o.sbmc.substring(0,20)}}...</a>
                                    <a href="javascript:void(0);" @click="trademarkdetailclick(o)" target="_blank"
                                       v-else>{{o.sbmc}}</a>
                                    <!-- <a :href="\'http://192.168.133.143:3000/b#/bycdetailtm?\'+o.sbzch+\'&\'+o.gjfl" target="_blank" style="text-decoration:none;color:#108EE9;">{{o.sbmc.substring(0,40)}}</a> -->
                                </div>
                                <!--第一列-->
                                <div class="columns">
                                    <ul>
                                        <li style="cursor: pointer;" @click="trademarkdetailclick(o)">
                                            <label>法律状态：</label>
                                            <span class="spec" v-if="o.sbzt">{{o.sbzt}}</span>
                                            <span class="spec" v-else>---</span>
                                        </li>
                                        <li>
                                            <label>申请日期：</label>
                                            <span v-if="o.sqrq==\'\'">---</span>
                                            <span v-else>{{o.sqrq}}</span>
                                        </li>
                                        <li>
                                            <label>申请人：</label>
                                            <span>{{o.zcr}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <!--第二列-->
                                <div class="columns">
                                    <ul>
                                        <li>
                                            <label>国际分类：</label>
                                            <span v-if="o.gjfl==null">---</span>
                                            <span v-else>{{o.gjflname}}</span>
                                        </li>

                                        <li>
                                            <label>初审公告日期：</label>
                                            <span v-if="o.csrq==\'\'">---</span>
                                            <span v-else>{{o.csrq}}</span>
                                        </li>
                                        <li>
                                            <label>商标群组：</label>
                                              <span v-if="o.sbqz==null||o.sbqz==\'\'">---</span>
                                              <span v-else-if="o.sbqz.length>15">
                                                <el-tooltip class="item" effect="dark" :content="o.sbqz" placement="right">
                                                  <span>{{o.sbqz.substring(0,15)}}...</span>
                                                </el-tooltip>
                                              </span>
                                              <span v-else>{{o.sbqz}}</span>
                                        </li>
                                    </ul>
                                </div>

                                <!--第三列-->
                                <div class="columns">
                                    <ul>
                                        <li>
                                            <label>申请号：</label>
                                            <a href="javascript:void(0);" @click="trademarkdetailclick(o)"
                                               style="text-decoration:none;color:#108EE9;">{{o.sbzch}}</a>
                                            <!-- <el-button type="text" style="height:4px;text-align:center;" @click="detailclick(o)">{{o.sbzch}}</el-button> -->
                                        </li>
                                        <li>
                                            <label>注册公告日期：</label>
                                            <span v-if="o.zcrq==\'\'">---</span>
                                            <span v-else>{{o.zcrq}}</span>
                                        </li>
                                    </ul>
                                </div>


                            </div>
                        </div>
                        <!--下划线-->
                        <div class="line-bottom"></div>
                    </li>

                </ul>
                <el-footer class="footer-row" v-if="total>0">
                    <!--下划线-->
                    <div class="line-bottom-02"></div>
                    <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>
            </el-collapse>
        </div>
        <!--<div class="item-right">
            <div style="height:30px;text-align: center;background-color:#EBEEF5">
                <el-button type="text" size="small" disabled>智能化商标服务</el-button>
            </div>
            <div style="height:150px;text-align: center; border-bottom:1px solid #eee;">
                <span style="font-size:12px;">快速商标注册</span>
                <div style="width:140px;height:120px;text-align: center;overflow: hidden; ">
                    <img style="width:140px;height:120px;margin:5px"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_imagequery352111545300309066201820185966jszc.png">
                </div>
            </div>
            <div style="height:150px;text-align: center;margin-top:5px;border-bottom:1px solid #eee;">
                <span style="font-size:12px;">快速商标注册</span>
                <div style="width:140px;height:120px;text-align: center;overflow: hidden; ">
                    <img style="width:140px;height:120px;margin:5px"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_imagequery352111545300309066201820185966jszc.png">
                </div>
            </div>
            <div style="height:150px;text-align: center;margin-top:5px;border-bottom:1px solid #eee;">
                <span style="font-size:12px;">快速商标注册</span>
                <div style="width:140px;height:120px;text-align: center;overflow: hidden; ">
                    <img style="width:140px;height:120px;margin:5px"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_imagequery352111545300309066201820185966jszc.png">
                </div>
            </div>
            <div style="height:150px;text-align: center;margin-top:5px;border-bottom:1px solid #eee;">
                <span style="font-size:12px;">快速商标注册</span>
                <div style="width:140px;height:120px;text-align: center;overflow: hidden; ">
                    <img style="width:140px;height:120px;margin:5px"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_imagequery87111545302066730201820183426730znzc.png">
                </div>
            </div>
            <div style="height:150px;text-align: center;margin-top:5px;border-bottom:1px solid #eee;">
                <span style="font-size:12px;">热门商标出售</span>
                <div style="width:140px;height:120px;text-align: center;overflow: hidden; ">
                    <img style="width:140px;height:120px;margin:5px"
                         src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_imagequery352111545300309066201820185966jszc.png">
                </div>
            </div>
        </div> -->

    </div>

    <!--检索条数元素-->
    <div v-if="img" class="img-total-warp">
        <gsb-flowlayout1 ref="flowlayout"
                         :datasrc="queryimagedata"
                         xspan="4"
                         @pagechanged="pageChanged">
            <span class="item-text" slot="header">共查到<var>{{imagecount}}</var>条数据</span>


            <div class="item-result" slot="content" slot-scope="scope" @click="trademarkdetailclick(scope.item)">
                <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top">
                    <div style="width:120px;height:120px;margin-left:10px;">
                        <img v-if="scope.item.logo" style="width:120px;height:120px;border:0px solid #eee;"
                             :src="scope.item.logo"/>
                        <img v-else style="width:120px;height:120px;border:0px solid #eee;"
                             src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png"/>
                    </div>
                </el-tooltip>
                <div slot="reference" style="font-size:12px;text-align:left;">商标号:{{scope.item.sbzch}}</div>
                <div slot="reference" style="font-size:12px;text-align:left;">国际分类:{{scope.item.gjflname}}</div>
                <div slot="reference" style="font-size:12px;text-align:left;">商标状态:{{scope.item.sbzt}}</div>
            </div>
        </gsb-flowlayout1>
        <!--对比图片元素-->
        <img v-if="imageupurl" title="图像对比"
             style="width:120px;height:120px;border:1px solid #909399;position:fixed;right:20px;top:320px"
             :src="imageupurl"/>
        <!-- <div class="img-compare-warp" v-if="imageupurl">
            <img class="item-img"  title="图像对比" :src="imageupurl"/>
            <div>
                <span>对比图片</span>
            </div>
        </div> -->

    </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">
        <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 v-if="fuwu &&nclfuwudata.length>0" style="width:1002px;margin:auto;">
        <div class="brand-detail1">
            <div class="brand-detail-table">
                <tbody>
                <tr>
                    <td class="td-title1" style="width:400px;">规范商品/服务项目</td>
                    <td class="td-title1">国际分类</td>
                    <td class="td-title1">所在群组</td>
                    <td class="td-title1" style="width:100px;">编码</td>
                    <td class="td-title1">商品类型</td>
                </tr>
                <tr v-for="o in nclfuwudata" :key="o">
                    <td style="width:400px;">
                        {{o.nclthreename}}
                    </td>
                    <td style="width:200px;">
                        {{o.nclonename}}
                    </td>
                    <td style="width:100px;">
                        {{o.ncltwocode}}
                    </td>
                    <td style="width:100px;">
                        {{o.nclthreecode}}
                    </td>
                    <td style="width:200px;" v-if="o.nclthreecode">
                        尼斯商品服务项
                    </td>
                    <td style="width:200px;" v-else>
                        非规范商品服务项
                    </td>
                </tr>

                </tbody>
            </div>
            <el-footer class="footer-row" style="width:1000px" v-if="total>0">
                <div class="line-bottom-02" style="width:1000px"></div>
                <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> -->
    </br>
    <el-dialog title="导出列选择" :visible.sync="exportColumnDialog" center width="550px">
        <el-checkbox-group v-model="exportColumns" style="width: 500px;height: 120px">
            <ul style="list-style:none; padding:0;margin:0;text-align:left;">
                <li v-for="n in allColumns" :key="n" style="float:left;width:125px;">
                    <el-checkbox :label="n">{{n}}</el-checkbox>
                </li>
            </ul>
        </el-checkbox-group>

        <div style="width:100%;text-align:center;font-family:Microsoft YaHei">
            <el-button :loading="downloading" type="primary" @click="exportFile">确定</el-button>
            <el-button @click="exportColumnDialog=false">取消</el-button>
        </div>

    </el-dialog>
    <div v-if="aitmrate">
      <el-row>
        <el-col :span="6" v-for="(item,index) in ainclonerate">
              <gsb-bar :data="item">
              </gsb-bar>
          <span>第{{index+1}}大类</span>
        </el-col>
      </el-row>
    </div>
</div>
