<gsb-pcpage>
<div class="tmtransactionmarket" :style="\'background-color:\' + bgcolor">
    <div class="tmk-banner" v-if="bannerImg" :style="\'background:url(\' + bannerImg + \') no-repeat center top\'"></div>
    <div class="tmk-banner-hide" v-if="!bannerImg"></div>
    <div class="tmk-body">
        <div class="tmk-header-input">
            <div class="tmk-header-nameLeft">商标交易</div>
            <div style="width: 730px;height: 40px;margin: 0 auto;line-height: 36px;">
                <div style="width: 598px;height: 36px;float: left;">
                    <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
                    <input class="tmk-input" v-model="trademarkInput" placeholder="请输入内容" @keyup.enter="trademarkSearch(null)">
                </div>
                <div class="tmk-header-input-text" @click="trademarkSearch(null)">检索</div>
            </div>
            <div class="tmk-header-hot" :style="\'color:\' + hotcolor" >
                <span style="margin-left: 14px;font-size: 12px;line-height: 17px;">热门行业：</span>
                <span v-for="(item,key) in navarr" style="margin-left: 14px;font-size: 12px;line-height: 17px;cursor: pointer;" @click="trademarkHot(item)">{{item}}</span>
            </div>
        </div>
        <div class="tmk-header-nav">
            <div style="margin:0px;">
                <span class="tmk-header-nav-item">已选条件：</span>
                <div class="tmk-header-nav-item-right">
                    <span class="tmk-header-nav-itemKey" v-for="(item,key) in selectedConditionArr">{{item}}<i class="el-icon-close" style="cursor: pointer;" @click="trademarkDelete(key)"></i></span>
                    <span class="tmk-header-nav-itemKey" v-if="trademarkPriceName">{{trademarkPriceName}}<i class="el-icon-close" style="cursor: pointer;" @click="trademarkDelete(46)"></i></span>
                    <span class="tmk-header-nav-itemKey" v-if="trademarkStructureName">{{trademarkStructureName}}<i class="el-icon-close" style="cursor: pointer;" @click="trademarkDelete(47)"></i></span>
                    <span class="tmk-header-nav-itemKey" v-if="trademarkNumberName">{{trademarkNumberName}}<i class="el-icon-close" style="cursor: pointer;" @click="trademarkDelete(48)"></i></span>
                </div>
            </div>
            <div>
                <span class="tmk-header-nav-item">商标类别：</span>
                <div class="tmk-header-nav-item-right" :style="trademarkHeight">
                    <div class="tmk-header-nav-itemtext" :style="trademarkDataKeyArr.indexOf(99) != -1 ? \'color: #ff7200!important;\' : \'\'" @click="trademarkTypeData(99)">不限</div>
                    <p class="tmk-header-nav-itemtext-right">
                        <span class="tmk-header-nav-item1text" v-for="(item,key) in ncldata" :style="trademarkDataKeyArr.indexOf(key) != -1 ? \'color: #ff7200!important;\' : \'\'" @click="trademarkTypeData(key,item.name,item.code)">{{item.code}}{{item.code ? \'类 \' : \'\'}}{{item.name}}</span>
                    </p>
                </div>
                <div v-if="trademarkType" class="tmk-header-nav-itemtext-showHide" @click="ncldataShowHide">收起<i class="el-icon-arrow-up"></i></div>
                <div v-else class="tmk-header-nav-itemtext-showHide" @click="ncldataShowHide">更多<i class="el-icon-arrow-down"></i></div>
            </div>
            <div>
                <span class="tmk-header-nav-item">商标价格：</span>
                <span class="tmk-header-nav-itemtext" v-for="(item,key) in trademarkPriceArr" :style="trademarkPriceKey == key ? \'background: #ff7200!important;color: #fff!important;\' : \'\'" @click="trademarkPrice(key,item)">{{item}}</span>
                <span class="tmk-header-nav-iteminput">
                    <input type="text" v-model="trademarkMin">
                    <span>-</span>
                    <input type="text" v-model="trademarkMax">
                    <span class="yes" @click="trademarkYes">确定</span>
                </span>
            </div>
            <div>
                <span class="tmk-header-nav-item">商标结构：</span>
                <span class="tmk-header-nav-itemtext" v-for="(item,key) in trademarkStructureArr" :style="trademarkStructureKey == key ? \'background: #ff7200!important;color: #fff!important;\' : \'\'" @click="trademarkStructure(key,item)">{{item}}</span>
            </div>
            <div>
                <span class="tmk-header-nav-item">商标字数：</span>
                <span class="tmk-header-nav-itemtext" v-for="(item,key) in trademarkNumberArr" :style="trademarkNumberKey == key ? \'background: #ff7200!important;color: #fff!important;\' : \'\'" @click="trademarkNumber(key,item)">{{item}}</span>
            </div>
            <div class="tmk-header-nav-item1">
                <span class="tmk-header-nav-item">综合排序：</span>
                <span class="tmk-header-nav-itemtext" v-for="(item,key) in trademarkSortingArr" :style="trademarkSortingKeyArr.indexOf(key) != -1 ? \'color: #ff7200!important;\' : \'\'" @click="trademarkSorting(key,item.name)">
                        {{item.name}}
                    <i v-if="trademarkSortingArr[key].type" class="el-icon-caret-top"></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                </span>
                <!-- <div class="tmk-header-nav-item1-right">
                    为您找到<span style="color:rgb(255, 114, 0)">{{total}}</span>个商标
                </div> -->
                <div style="float:right">
                    <!-- <span class="tmk-header-yes" @click="exportList">导出</span>
                    <a id="grid2_export"></a> -->
                </div>
            </div>
        </div>
        <div v-if="trademarkData.length>0">
            <!-- <div class="tmk-header-nav-iteminput" style="text-align:right;margin:6px 0 -6px 0;">
                <el-button type="primary" size="mini" @click="exportList">导出</el-button>
                <span class="yes" @click="exportList">导出</span>
                <a id="grid2_export"></a>
            </div> -->
            <div class="tmk-main-items">
                <div class="tmk-main-item" v-for="(item,key) in trademarkData" @click="toDetail(item.tm_regist_num,item.ncl_one_codes)">
                    <p class="tmk-data-img">
                        <img v-if="item.pic_url_user" :src="item.pic_url_user" alt="">
                        <img v-else :src="item.pic_url" alt="">
                    </p>
                    <div class="tmk-data-block">
                        <div class="tmk-data-block-name">{{item.tm_name}}</div>
                        <div class="tmk-data-block-prcie">¥{{item.platform_quoted_price}}</div>
                        <div class="tmk-data-block-type">{{item.ncl_one_codes_name}}</div>
                        <div class="tmk-data-block-click">
                            <el-button type="danger" size="mini" style="width:100%;" plain @click.stop="open(item)">提交报价</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div style="width:100%;height: 60px;text-align: center;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="36"
                    :current-page.sync="currentpage"
                    :total="total">
                </el-pagination>
            </div> -->
            <div v-if="loading" style="width:100%;text-align: center;">
                <div class="tmtransactionmarket-loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <p v-if="noMore" style="width:100%;text-align: center;">没有更多了</p>
        </div>
        <div v-if="trademarkData.length == 0">
          <div class="no-result" style="margin-top:100px;margin-bottom:100px;text-align:center">
            <img src="/imgs/noresult.png" style="width:400px;">
            <div style="font-size: 20px;">没有相关可出售商标</div>
          </div>
        </div>

        <el-dialog title="提交报价" :visible.sync="dialogTableVisible" center width="40%"">
             <el-form :model="form" label-width="140px" :rules="rules" ref="form">
                <el-form-item label="商标名称：" style="margin-bottom:6px;">
                   {{tmdetail.tm_name}}
                </el-form-item>
                <el-form-item label="商标类别：" style="margin-bottom:6px;">
                    {{tmdetail.ncl_one_codes_name}}
                </el-form-item>
                <el-form-item label="商品 / 服务项：" style="margin-bottom:6px;">
                   {{spfwxm}}
                </el-form-item>
                <el-form-item label="您的报价：" style="margin-bottom:20px;" prop="price">
                    <el-input size="medium" v-model="form.price" style="width:60%"></el-input>
                </el-form-item>
                <el-form-item label="您的称呼：" style="margin-bottom:20px;" prop="name">
                    <el-input size="medium" v-model="form.name" style="width:60%"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" style="margin-bottom:20px;" prop="mobile">
                    <el-input size="medium" v-model="form.mobile" style="width:60%"></el-input>
                </el-form-item>
                <div style="color:#c0c4cc;margin-bottom:20px;margin-left:40px;">提示：提交后，我们业务人员会帮您联系卖家，及时跟进商标购买进度。</div>
                <el-form-item >
                    <el-button type="warning" style="margin-left:20%;border-radius:4px;width:120px;" @click="submitNeed">
                        提交
                    </el-button>
                </el-form-item>
             </el-form>
        </el-dialog>
        

    </div>
</div>
</gsb-pcpage>