<gsb-pcpage>
  <div style="background-color:white;width:98%;margin:0 1%;padding:20px 0 ">
    <!-- 付款信息 -->
    <div style="height: auto;border:1px solid #e1e1e1">
      <!-- left -->
      <div style="float:left;width:30%;font-size: 14px;">
        <div style="margin: 25px 20px;border-right:1px solid #e1e1e1">
          <h4>订单流程</h4>
          <p>订单状态：<span style="color:#2692FF">{{order.orderStatusName}}</span></p>
          <p>服务类型：<span style="color:#828282">{{order.sveItemName}}</span></p>
          <p>订单编号：<span style="color:#828282">{{order.code}}</span></p>
        </div>
      </div>
      <!-- right -->
      <div style="float:left;width:70%;">
        <div style="padding: 20px 20px 10px 20px;">
          <el-steps :active="active">
            <el-step v-for="step in orderflowsteps" :title="step.name" description=""></el-step>
          </el-steps>
        </div>
        <div style="padding:0 10px;height:80px;overflow:auto;font-size: 14px;">
          <ul>
            <li v-for="(flow,index) in orderflow" :style="index==0?\'color:#2692FF\':\'color:#E1E1E1\'"> <span :style="index==0?\'color:#2692FF\':\'color:#828282\'">{{flow.created_at}} {{flow.opContent}}</span> </li>
          </ul>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>

    <!-- 商标信息 -->
    <div style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>商标信息</h4>
        <div style="width:100px;float:left;text-align: center">
          <img style="width:100px;height:100px;border:1px solid #e1e1e1" :src="trademark.picUrl" />
          <span style="color:#B2B2B2;font-size: 12px;">商标图样</span>
        </div>
        <div style="float:left;margin-left:20px;font-size: 14px;">
          <p>商标名称：<span style="color:#B2B2B2">{{trademark.name}}</span></p>
          <p>商标类型：<span style="color:#B2B2B2">{{trademark.tmFormTypeName}}</span></p>
          <p>商标说明：<span style="color:#B2B2B2">商标说明文字</span></p>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>

    <!-- 商标类别 -->
    <div style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>商标类别</h4>
        <div style="font-size: 14px;" v-for="tm in trademarks">
          <div style="color:#2F2F2F;">
            {{tm.nclOneCodes}}{{tm.nclOneName}}-{{tm.code}}
          </div>
          <div style="margin-top:5px;color:#828282;">
            <div style="width:150px;float:left;">
              商品服务项目：
            </div>
            <div style="float:left;width:650px;">
              <span style="margin-right:5px;" v-for="nclthree in tm.ncl.nclThree">{{nclthree.code}}{{nclthree.name}}</span>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div v-if="tm.tmofficials && tm.tmofficials.length>0">
            <div style="width:150px;float:left;color:#828282;">
              官方回执文件：
            </div>
            <div style="float:left;width:600px;color:#2692FF;cursor: pointer;">
              <span style="margin-right:5px;" v-for="official in tm.tmofficials" @click="window.open(official.officialFileUrl)">{{official.officialFileName}}</span>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 交官文件 -->
    <div style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>交官文件</h4>
        <div v-if="customerinfo.businessLicensePic" style="float:left;width:120px;margin-right:10px;text-align:center">
          <img src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/PDF20180904.jpg" @click="window.open(customerinfo.businessLicensePic)" style="width:100px;height:100px;border:1px solid #e1e1e1;">
          <p style="color:#828282;font-size: 12px;">营业执照</p>
        </div>
        <div v-if="customerinfo.customerType==\'person\' && customerinfo.identityCardPic" style="float:left;width:120px;margin-right:10px;text-align:center">
          <img src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/PDF20180904.jpg"  @click="window.open(customerinfo.identityCardPic)" style="width:100px;height:100px;border:1px solid #e1e1e1;">
          <p style="color:#828282;font-size: 12px;">身份证明</p>
        </div>
        
        <div v-for="stuff in tmstuffs" v-if="!(stuff.stuffType==\'csty\' && trademark.tmFormType!=6 && trademark.tmFormType!=7)" style="float:left;width:120px;margin-right:10px;text-align:center">
          <img @click="window.open(stuff.stuffUrl)"  :src="stuff.stuffUrl" style="width:100px;height:100px;border:1px solid #e1e1e1;">
          <p style="color:#828282;font-size: 12px;">{{stuff.stuffTypeName}}</p>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>

    <!-- 申请人信息 -->
    <div style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>申请人信息-({{customerinfo.customerType=="person"?"个人":""}}{{customerinfo.customerType=="ent"?"企业":""}})</h4>
        <div style="font-size: 14px;">
          <div style="float:left;width:150px;">
              公司名称：
          </div>
          <div style="float:left;text-align:left;color:#828282">
              {{customerinfo.name}}
          </div>
          <div style="clear:both;"></div>
        </div>
        <div style="font-size: 14px;">
            <div style="float:left;width:150px;">
                社会统一信用代码：
            </div>
            <div style="float:left;text-align:left;color:#828282">
                {{customerinfo.code}}
            </div>
            <div style="clear:both;"></div>
         
        </div>
        <div style="font-size: 14px;" v-if="customerinfo.customerType && customerinfo.customerType==\'person\'">
            <div style="float:left;width:150px;">
                身份证号：
            </div>
            <div style="float:left;text-align:left;color:#828282">
                {{customerinfo.identityCardNo}}
            </div>
            <div style="clear:both;"></div>
          
        </div>
        <div style="font-size: 14px;">
            <div style="float:left;width:150px;">
                公司地址：
            </div>
            <div style="float:left;text-align:left;color:#828282">
                {{customerinfo.applyAddr}}
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="font-size: 14px;">
            <div style="float:left;width:150px;">
                邮政编码：
            </div>
            <div style="float:left;text-align:left;color:#828282">
                {{order.zipCode}}
            </div>
            <div style="clear:both;"></div>
        </div>
      </div>
    </div>

    <!-- 订单联系人 -->
    <div style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>订单联系人</h4>
        <div style="font-size: 14px;">
          <div style="width:20%;float:left">联系人：<span style="color:#828282">{{order.contacts}}</span></div>
          <div style="width:20%;float:left">电话：<span style="color:#828282">{{order.mobile}}</span></div>
          <div style="width:20%;float:left">邮箱：<span style="color:#828282">{{order.email}}</span></div>
          <div style="width:20%;float:left">座机：<span style="color:#828282">{{order.tel}}</span></div>
          <div style="clear:both"></div>
        </div>
      </div>
    </div>

    <!-- 代理人信息 -->
    <div v-if="order.sveItemCode!=\'zzsbzc\'" style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <h4>代理公司信息</h4>
        <div style="font-size: 14px;">
          <div style="width:20%;float:left">联系人：<span style="color:#828282">{{company.contact}}</span></div>
          <div style="width:20%;float:left">电话：<span style="color:#828282">{{company.contactmobile}}</span></div>
          <div style="width:20%;float:left">邮编：<span style="color:#828282">{{company.zipCode}}</span></div>
          <!-- <div style="width:20%;float:left">传真：<span style="color:#828282">{{company.fax}}</span></div> -->
          <div style="clear:both"></div>
        </div>
      </div>
    </div>

    <!-- 付款信息 -->
    <div style="height: auto;">
      <div style="margin: 25px 20px;">
        <h4>付款信息</h4>
        <div style="font-size: 14px;">
          <div style="width:30%;float:left">实付金额：<span style="color:#828282">{{order.totalSum}}</span></div>
          <div style="width:30%;float:left">官费：<span style="color:#828282">{{order.totalPublicExpense}}</span></div>
          <div style="width:30%;float:left">支付时间：<span style="color:#828282">{{receiptvoucher?receiptvoucher.payDate:""}}</span></div>
          <div style="clear:both"></div>
        </div>
        <div style="font-size: 14px;">
          <div v-if="itemCode!=\'zzsbzc\'" style="width:30%;float:left">优惠金额：<span style="color:#828282">{{order.totalDiscounts}}</span></div>
          <div v-if="itemCode!=\'zzsbzc\'" style="width:30%;float:left">服务费：<span style="color:#828282">{{order.totalServiceCharge}}</span></div>
          <div style="width:30%;float:left">支付方式：<span style="color:#828282">{{receiptvoucher?receiptvoucher.accountTypeName:""}}</span></div>
          <div style="clear:both"></div>
        </div>
      </div>
    </div>
    <!-- 支付凭证 -->
    <div v-if="receiptvoucher && receiptvoucher.accountType==\'bank\' && receiptvoucher.certifyFileUrl" style="height: auto;border-bottom:1px solid #e1e1e1">
      <div style="margin: 25px 20px;">
        <div style="float:left;width:100px;margin-right:10px;text-align:center">
          <img :src="receiptvoucher.certifyFileUrl"  @click="window.open(receiptvoucher.certifyFileUrl)" style="width:100px;height:100px;border:1px solid #e1e1e1;">
          <p style="color:#828282;font-size: 12px;">支付凭证</p>

        </div>
        <div style="clear:both"></div>
      </div>
    </div>    
  </div>
</gsb-pcpage>

