<gsb-h5page2>
  <gsb-h5nav ref="refnav" slot="nav" title="商标自主提报">
    <el-button v-if="showadd" type="success" slot="action" size="mini" @click="newtmarch">新增</el-button>
  </gsb-h5nav>
  <gsb-card2 title="商标建档" ref="card">
          <div slot="header"></div>
          <!-- <div  slot="extra"><el-button type="default"  @click="gotoorder"><i class="tool-order" style="margin-right:3px;color:orange"/>订单列表</el-button></div> -->
          <div>
            <gsb-h5grid2 ref="grid"
              :bizCode="bizCode"
              spaceHeight="300"
              tblHeight="600"
              modelName="calculateprice"
              listMethod="findAndCountAll"
              deleteMethod="delete"
              initMethod="initNewInstance"
              isDataAuto="true"
              @pagechanged="pageChanged"
              @toolbarclick="toolbarclick"
              @onDlgFormClick="onDlgFormClick"
              @rowclick="rowClick"
             :headStyle="headStyle"
             focuskey="mynew"
              :colFormatter="onColFormater"
              isSingleSelect="true">
              <div slot="other" slot-scope="scope">
                  <div style="font-size:10px;padding:0px;">
                    <div>商标申请人:{{scope.row.applyName}}</div>
                    <div>创建时间:{{new Date(scope.row.created_at).toLocaleString()}}</div>
                    <div>联系人:{{scope.row.customerContact}}</div>
                    <div>联系电话:{{scope.row.mobile}}</div>
                    <div>商标名称:{{scope.row.tmName}}</div>
                    <div>商标大类:{{scope.row.nclOneCodes}}</div>
                    <div>提报状态:{{scope.row.status}}</div>
                    <div style="text-align:right">
                      <el-button style="padding:10px"  @click="rowClick(scope.row,\'myedit\',null,null)">修改</el-button>
                    </div>
                  </div>
              </div>
              <div slot="top" style="text-align:left" >
                <div  style="text-align:left">
                  <br/>
                  <el-alert
                    title="商标注册申请递交后，在审查阶段存在被商标审查机构驳回的可能，且驳回后不予退费，请知悉。"
                    type="warning"
                    close-text="">
                  </el-alert>
                </div>
                <el-form ref="form" label-position="top" :rules="rules" :model="form" class="demo-ruleForm" label-width="120px">
                  <el-collapse ref="refcollapse" accordion>
                    <el-collapse-item title="申请信息" name="1">
                      <div>
                          <el-form-item label="申请人类型" style="float:left;" prop="type" >
                            <gsb-select v-model="form.type" dicKey="tm_apply_type" labelField="label" valueField="value"></gsb-select>
                          </el-form-item>
                          <div style="clear:both;"></div>
                          <el-form-item label="商标申请人" style="float:left;width:100%" prop="applyName">
                            <gsb-select2 ref="select" @change="applierChange"  size="medium" v-model="form.applyName" refMethod="getCompanyInfoByLikeName" autoComplete="on"   isFilter="true"  refModel="calculateprice"  labelField="entName" valueField="entName" style="position:relative;width:100%;" placeHolder="请填写正确的商标申请人(企业/自然人)名称" >
                            </gsb-select2>
                          </el-form-item>
                          <div style="clear:both;"></div>
                          <el-form-item label="申请地址" style="float:left;width:100%" prop="applyAddr">
                            <el-input v-model="form.applyAddr"></el-input>
                          </el-form-item>
                          <div style="clear:both;"></div>
                          <el-form-item v-if="form.type==\'ent\'" label="信用代码" style="width:100%;float:left">
                            <el-input v-model="form.creditCode"></el-input>
                          </el-form-item>
                          <el-form-item v-else label="身份证号" style="float:left;width:100%" prop="identityCard">
                            <el-input v-model="form.identityCard"></el-input>
                          </el-form-item>
                          <div style="clear:both;"></div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="客户信息" name="2">
                      <div>
                          <el-form-item label="客户姓名" style="float:left;width:100%" prop="customerContact">
                            <el-input v-model="form.customerContact"></el-input>
                          </el-form-item>
                          <el-form-item label="电话" style="float:left;width:100%" prop="mobile">
                            <el-input v-model="form.mobile"></el-input>
                          </el-form-item>
                          <div style="clear:both;"></div>
                          <el-form-item label="邮政编码" style="float:left;width:100%" prop="zipCode">
                            <el-input v-model="form.zipCode"></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱" style="float:left;width:100%">
                            <el-input v-model="form.email"></el-input>
                          </el-form-item>
                          <div style="clear:both;"></div>
                      </div>
                    </el-collapse-item>
                    <el-collapse-item title="商标信息" name="3" style="">
                      <div>
                          <el-form-item label="商标类型" style="text-align:left;float:left;width:100%" prop="tm_form_type">
                            <gsb-radiogroup size="small" v-model="form.tmFormType" isButton="false"  dicKey="tm_form_type"></gsb-radiogroup>
                          </el-form-item>
                          <div style="clear:both;"></div>
                          <el-form-item  label="商标名称" style="width:100%" prop="tmName">
                            <el-input v-model="form.tmName"></el-input>
                          </el-form-item>
                          <div style="padding-left:10px" v-if="form.tmFormType==3">
                            <el-button @click="word2pic" >文字图样生成</el-button>
                          </div>
                          <div style="clear:both;"></div>
                          <el-form-item label="商标备注" style="float:left;width:100%">
                            <el-input v-model="form.tmExplain"></el-input>
                          </el-form-item>

                          <div style="clear:both;"></div>
                          <el-form-item style="width:350px;float:left" label="商标图样_黑白" prop="picUrl">
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9"  v-if="form.picUrl" :src="form.picUrl"/>
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/empty2018082212365411225525855.jpg"/>
                            <br/>
                            <gsb-upload flag="picUrl" :d="d" :action="action" filetype="image/jpeg" :ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
                              <el-button type="primary" >黑白商标上传</el-button>
                            </gsb-upload>

                          </el-form-item>
                          <el-form-item v-if="form.tmFormType==7" style="width:350px;float:left" label="商标图样_彩色" prop="colorizedPicUrl">
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9"  v-if="form.colorizedPicUrl" :src="form.colorizedPicUrl" />
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/empty2018082212365411225525855.jpg"/>
                            <br/>
                            <gsb-upload :d="d" :action="action" flag="colorizedPicUrl" filetype="image/jpeg" :ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
                              <el-button type="primary" >彩色商标上传</el-button>
                            </gsb-upload>
                          </el-form-item>
                          <el-form-item v-if="form.tmFormType==6" style="width:350px;float:left" label="商标图样_彩色" prop="colorizedPicUrl">
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9"  v-if="form.colorizedPicUrl" :src="form.colorizedPicUrl" />
                            <img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/empty2018082212365411225525855.jpg"/>
                            <br/>
                            <gsb-upload :d="d" ref="ys_upload" :action="action" flag="colorizedPicUrl" filetype="image/jpeg" :ifshowlist="false" @beforeUpload="beforeUpload" @uploadsuccess="uploadsuccess" @error="error">
                              <el-button type="primary" >彩色商标上传</el-button>
                            </gsb-upload>
                          </el-form-item>
                          <div style="text-align:right;float:right; height:0px;visibility:hidden;">
                            <br/>
                              <h3  v-if="form.status==2" >总额：￥<input type="text" size="6" v-if="form.status==2" disabled="disabled" v-model="form.totalSum" @blur="updatePrice()" :value="form.totalSum"/></p></h3>
                              <h3 v-if="form.status!=2" >总额：￥<input type="text" size="6" v-if="form.status!=2" v-model="form.totalSum" @blur="updatePrice()" :value="form.totalSum"/></p></h3>
                              <p>官费总额：￥{{form.nclTotalPublicExpense}}</p>
                              <p>服务费：￥{{form.nclServiceCharge}}</p>
                              <p >平台使用费：￥{{form.totalPlatformCost}} <span v-if="!platformUseFee>0" style="text-decoration:line-through;font-size: 18px;"><span style="color:red;"> ￥{{nclOne.length==0?100:100*nclOne.length }} </span></span></p>
                              <div style="clear:both"></div>
                              <p>发票税费：￥{{form.invoiceTaxes}}</p>
                          </div>
                          <img width="120px" height="120px" style="float:right;margin-top:110px" v-if="!platformUseFee>0" src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/active201810181550.png" />

                          <div style="clear:both;"></div>
                      </div>
                      <div>
                        <div>
                          <el-radio-group v-model="form.selecttype" style="float:left;padding-left:10px;margin-bottom: 22px;">
                            <el-radio-button label="自主选择" @click.native="selfclear"></el-radio-button>
                          </el-radio-group>
                          <el-badge :value="nclOne.length+\'/\'+nclThreeCount">
                            <el-button v-if="isdetail" @click="isdetail=false;" :loading="!isdetail" icon="el-icon-arrow-left" style="margin-left:20px;">返回选择</el-button>
                            <el-button v-if="!isdetail" @click="isdetail=true;" icon="el-icon-goods" style="margin-left:15px;">详情</el-button>
                          </el-badge>
                        </div>
                        <div style="clear:both;"></div>
                        <el-container  style="height: 400px;background-color:white; border-top: 1px solid #eee;">
                          <el-aside v-if="!isdetail" width="100%" style="text-align:center;background-color:white;" >
                            <el-input @blur="searchInputBlur" style="margin-top:15px;background-color:white; width:90%;"
                              placeholder="输入关键字进行过滤"
                              v-model="filterText">
                              <i slot="suffix" style="position:relative;top:18%;right:5%;z-index:1" class="el-input__icon"  @click="nclSearch">
                                <span><i class="tool-query" style="font-size : 1.5em;"></i></span>
                              </i>
                            </el-input>

                            <el-tree style="height:500px;padding-top:10px;padding-left: 5%;background-color:white;width:90%"
                              class="filter-tree"
                              :data="ncldata"
                              :props="defaultProps"
                              default-expand-all
                              @node-click="nodeClick"
                              :filter-node-method="filterNode"
                              ref="tree">
                            </el-tree>
                          </el-aside>
                          <el-container v-if="isdetail" width="100%">
                            <el-header v-if="false" style="text-align: right; font-size: 12px;background-color:white;padding-top:10px;">
                              <el-button style="float:right" type="primary">导入Contact</el-button>
                              <el-input style="float:right;width:40%" placeholder="请输入历史订单号" clearable></el-input>

                            </el-header>

                            <el-main style="background-color: white">

                                <div v-for="(nclone,index) in nclOne" style="text-align: left;padding-left:5px;padding-bottom:5px;">
                                  <span style="font-size:16px"><b>{{nclone.code}} {{nclone.name}}</b></span>
                                  <span style="font-size:16px;float:right"><b>已选择{{nclone.nclThree.length}}项</b>

                                    <span>￥{{nclone.price}}</span>
                                    &nbsp;&nbsp;&nbsp;
                                    <span @click="removeNclOne(index)"><i class="el-icon-delete" style="font-size : 1.2em;"></i></span>
                                  </span>

                                  <br/>
                                  <br/>
                                  <span v-for="(nclThree,index2) in nclone.nclThree">
                                  <el-tag
                                      key="nclThree.code"
                                      closable="true"
                                      @close="closeTag(nclThree,index,index2)">
                                      {{nclThree.code}} {{nclThree.name}}
                                  </el-tag>
                                  &nbsp;
                                </span>

                                </div>
                            </el-main>
                          </el-container>
                        </el-container>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </el-form>
                <br/>
                <div style="text-align:center">
                  <el-button @click="onDlgFormClick(\'mysave\')">保存</el-button><el-button @click="$refs.grid.onDlgFormClick(\'cancel\')">取消</el-button>
                </div>
              </div>
            </gsb-h5grid2>
          </div>
  </gsb-card2>
</div>
</gsb-h5page2>
