<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">
        <el-dialog
            width="30%"
            :visible.sync="showLargePic">
            <img style="width:100%;height:auto" :src="largePicUrl">
        </el-dialog>
        <div class="brand-detail" style="width:60%;margin:0 20%;margin-top:3%;">
            <!--弹出层-->
            <el-dialog id="mask" :visible.sync="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="/imgs/jdt/GSlogo.png">
                            <div class="title">
                                {{companyInfo.name}}
                            </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/jdt/website.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">
                                        -
                                    </td>
                                    <td colspan="3" rowspan="3" v-else>
                                        <p>{{companyInfo.scope}}</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </el-dialog>

            <div class="td-steps">
                <div class="td-steps-left" :style="tdStepsLeftWidth">申请流程</div>
                <div class="td-steps-right" :style="tdStepsRightWidth">
                    <div v-for="(o,i) in progressNarArr">
                        <div class="td-steps-img" :style="progressNarBgColor(i)">
                            <img :src="o.icon" alt="">
                        </div>
                        <div class="td-steps-name" :style="progressNarColor(i)">{{o.name}}</div>
                        <div class="td-border" v-if="i != 3" :style="progressNarBorColor(i)"></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" style="cursor: pointer">
                        <img @click="showLargeTm(detaildata.logo)" v-if="detaildata.logo" style="width:140px;height:140px"
                             :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">
                                    已注册群组
                                    <el-button size="mini" @click="copyLink" style="margin-left:12px;border-radius:4px;">
                                        复制
                                    </el-button>
                                </td>
                                <td class="td-title">
                                    未注册群组
                                </td>
                            </tr>
                            <tr class="row02">
                                <td class="td-title td-row01">
                                    <ul style="list-style:none; padding:0px 15px;margin:0;text-align:left;">
                                        <li v-for="(o,i) in nclexist" :key="o">
                                            <span>{{o.code}} {{o.small_name}} </span>
                                        </li>
                                    </ul>
                                    <!-- <ul style="width:50%;list-style:none; padding:0;margin:0;text-align:left;float: left;">
                                        <li v-for="(o,i) in nclexist" :key="o" v-if="i%2 != 0">
                                            <span>{{o.code}} {{o.small_name}} </span>
                                        </li>
                                    </ul> -->
                                </td>
                                <td class="td-title">
                                    <ul style="list-style:none; padding:0px 15px;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" v-if="detaildata.zcrq!=\'\' || detaildata.jzrq!=\'\'">
                      {{detaildata.zcrq}} 至 {{detaildata.jzrq}}
                    </td>
                    <td class="td-content" v-else>---</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">
                    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>
                      <ul style="list-style:none; padding:7px 0px;margin:0;text-align:left;">
                        <li v-for="o in detaildata.lcxx" :key="o" >
                          <span>{{o.name}} </span>
                          <i class="iconfont" @click="lcxxdetailClick(o)" style="cursor: pointer;color: rgb(16, 142, 233)">&#xe67d;</i>
                        </li>
                      </ul>
                    </td>
                </tr>
                <el-dialog :title="rowName" :visible.sync="dialogTableVisible">
                    <img style="width:100%" :src="rowLinkUrl" alt="">
                </el-dialog>
                </tbody>


            </div>
        </div>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>
