<div>
    <!-- <div style="width:1000px;height:100%;color:black;margin:auto;overflow:auto"> -->
    <div style="width:100%;height:100%;color:black;margin:auto;overflow:auto">
        <div class="brand-detail" style="width:50%;margin:0 25%;margin-top:3%;">
            <!--弹出层-->
            <div id="mask" ref="mask"  v-if="showMask">

                <div class="list-warp">
                    <div class="list">
                        <!--关闭按钮-->
                        <div class="close-button" @click="mask">
                            <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 class="brand-detail-table">
                <tbody>
                <tr>
                    <td class="td-content" colspan="7" style="padding-left:0;">
                        <el-steps :active="tmstatus" finish-status="success" simple align-center>
                            <el-step title="未公开"></el-step>
                            <el-step title="申请中"></el-step>
                            <el-step title="已初审"></el-step>
                            <el-step title="已注册"></el-step>
                            <el-step title="已无效"></el-step>
                        </el-steps>
                    </td>
                </tr>
                <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>
                        {{detaildata.zcr}}
                        <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" style="color: #108EE9;" v-if="detaildata.csggqh==null || detaildata.csggqh==\'\'">---</td>
                    <td class="td-content" style="color: #108EE9;" 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" style="color: #108EE9;" v-if="detaildata.zcggqh==null || detaildata.zcggqh==\'\'">---</td>
                    <td class="td-content" style="color: #108EE9;" 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>
                        {{detaildata.dljg}}
                        <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">
                    2018-03-16  等待注册证发文</br>
                    2017-11-28  商标初审公告</br>
                    2016-12-05  商标注册申请中</br>
                  </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>
        </div>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>
