<div class="moreservice">
  <el-carousel :interval="5000" arrow="never"  height="490px">
    <el-carousel-item v-for="item in loopplays" style="height:100%">
      <div class="el_gsb_img" :style="\'background: url(\' + item.leftimg + \') center center no-repeat;\'"></div>
      <!-- <img ref="imgHeight" :src="item.leftimg" style="width:100%;height:100%"/> -->
    </el-carousel-item>
    <div class="home-search-swiper-main">
      <div class="home-search-pos" style="position:absolute;top: 72%;left: 15%;text-align:center;z-index:99;">
          <el-input  style="width:800px;margin-top:10px;"  v-model="inputstr"    placeholder="请输入商标名称、申请号、申请人等信息" @keyup.enter.native="onfocus">
            <el-button slot="append" @click= "onfocus"  icon="el-icon-search" style="font-size: 20px;z-index:9999;border: none">检索</el-button>
          </el-input>
      </div>
    </div>
  </el-carousel>
  <div style="width:100%;background-color:#FFFFFF;box-shadow:0px 2px 4px 0px rgba(47,47,47,0.1)" >
    <div :class="divTop ? \'moreservice-itemTypeName-top\' : \'moreservice-itemTypeName\'">
      <div style="width:1200px;height:60px;line-height: 60px;margin:0 auto;display: flex;">
          <div id="itemTypeName" v-for="(item,key) in datalist" v-if="key < 6" class="moreservice-itemTypeName-item" @click="change(item.itemType,key)">
            <span :style="tabKey == key ? \'color:#2F95FC;border-bottom: 2px solid;\' : \'\'">{{item.itemTypeName}}</span>
          </div>
      </div>
      <!-- <div style="clear:both"></div> -->
    </div>
    <!-- 小类及对应产品设置 -->
    <div class="brand" v-for="item in datalist" style="width:100%;">
      <div v-if="item.itemType==itemtype" style="width:1200px;margin:0 auto" >
        <div v-for="(it,key) in item.smallList" style="width:1200px;padding-bottom:20px;">
          <div style="width:1200px">
            <!-- <div style="background-color:#2692FF;height:24px;width:4px;float:left"></div> -->
            <div class="moreservice-title">{{it.serviceSmallClassTypeName}}</div>
            <div class="moreservice-text">
              <span> <img src="imgs/dui.png" style="margin-right: 10px;" alt=""> 诚信商家</span>
              <span> <img src="imgs/dui.png" style="margin-right: 10px;" alt=""> 1v1专业服务</span>
              <span> <img src="imgs/dui.png" style="margin-right: 10px;" alt=""> 省钱省心省力</span>
            </div>
          </div>
          <div style="clear:both"></div>
          <!-- 下行注释v-if="it.serviceSmallClassTypeName==\'商标注册\'" -->
          <div class="clearfix" style="padding: 0px 64.5px;position: relative;" @mouseenter="enter(key,it.productList)" @mouseleave="leave()"> 
            <i v-if="it.productList.length > 3" class="el-icon-arrow-right moreservice-right-button" @click="rightSlide(key,it.productList)"></i>
            <i v-if="it.productList.length > 3" class="el-icon-arrow-left moreservice-left-button" @click="leftSlide(key,it.productList)"></i>
            <div class="moreservice-swiper-items">
              <div class="moreservice-swiper-item" ref="lunboitem" style="transform: translateX(sspx) scale(1);">
                  <div v-for="(i,k) in it.productList" :class="cardK == k && cardKey == key ? \'productList-pitch-on\' : \'productList\'" @mouseenter="enterCard(k,key)">
                    <div slot="header" :class="cardK == k && cardKey == key ? \'productList-header-pitch-on\' : \'productList-header\'">
                      <!-- <img class="productList-header_img" src="imgs/icon1.png" alt=""> -->
                      <img class="productList-header_img" v-if="i.iconUrl" :src="i.iconUrl" alt="">
                      <img class="productList-header_img" v-else src="imgs/icon1.png" alt="">
                      <span>{{i.name}}</span>
                    </div>
                    <div class="desc"><i></i>{{i.shortDesc ? i.shortDesc.split("。")[0] : 0}}</div>
                    <div class="desc"><i></i>{{i.shortDesc ? i.shortDesc.split("。")[1] : 0}}</div>
                    <div class="desc"><i></i>{{i.shortDesc ? i.shortDesc.split("。")[2] : 0}}</div>
                    <div class="productList-price">¥ <span>{{i.price}}</span>/件</div>
                    <div style="width:100%;margin-top: 20px;">
                      <div class="productList-button" :style="cardK == k && cardKey == key ? \'background:rgba(47,149,252,1);color:#fff;\' : \'color:rgba(47,149,252,1);\'" v-if="i.code==\'zzsbzc\'" @click="toZzsbzc(i.name,i.code)">
                          立即办理
                      </div>
                      <div class="productList-button" :style="cardK == k && cardKey == key ? \'background:rgba(47,149,252,1);color:#fff;\' : \'color:rgba(47,149,252,1);\'" v-else @click="goServiceDetails(i.id)">
                          委托办理
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <!-- <el-button v-if="i.code==\'zzsbzc\'" type="primary" style="color:white" class="productList-buy" @click="toZzsbzc(i.name,i.code)">
            立即办理
          </el-button>
          <el-button v-else type="primary" style="color:white" class="productList-buy" @click="showneed(i.name,i.code)">
            立即咨询
          </el-button> -->
          <!-- <div v-if="it.serviceSmallClassTypeName!=\'商标注册\'">
            <el-card  v-for="i in it.productList" class="productList">
              <div class="productList2-img">
                <img :src="i.mobilePic" style="width:100%;height:100%"></img>
              </div>
              <div class="productList2-name">{{i.name}}hswwww</div>
              <div class="productList2-desc">{{i.shortDesc}}</div>
              <div class="productList2-b">
                <el-button type="primary" style="color:white" class="productList-buy" @click="showneed(i.name,i.code)">
                    立即咨询
                </el-button>
              </div>
            </el-card>
          </div> -->


        <div style="clear:both"></div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog title="提交需求" :visible.sync="dialogFormVisible" center width="600px" >
    <el-form :model="form" ref="form" :rules="rules" style="margin-left:40px">
      <div style="color:#606266;font-size:14px;font-weight:400;line-height:12px;margin-bottom:30px;margin-left:12px">服务需求：{{serviceName}}</div>
      <el-form-item label="您的名字：" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入您的名字" style="width:360px"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：" prop="mobile">
        <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入您的电话" style="width:360px"></el-input>
      </el-form-item>
      <el-form-item label="所属城市：" prop="city" style="margin-left:12px">
        <el-cascader style="width:360px"
          expand-trigger="hover"
          :options="bigtype"
          v-model="form.city" placeholder="请选择所属城市">
        </el-cascader>
      </el-form-item>
      <el-form-item label="需求详情：" prop="notes" style="margin-left:12px">
        <el-input v-model="form.notes" type="textarea" :rows="3" autocomplete="off" placeholder="请输入您的详细内容" style="width:360px"></el-input>
      </el-form-item>
      <el-form-item >
        <div style="width:100%;font-size:12px;color:#B2B2B2;margin-left:12px;font-family:Microsoft YaHei">
          <i class="el-icon-info"></i>
          提交需求后，我们专业代理人会及时与您联系，为您服务，请保持电话畅通。
        </div>
      </el-form-item >
      <el-form-item >
        <div style="width:100%;text-align:center;font-family:Microsoft YaHei">
          <el-button type="primary" @click="submitneed">提交</el-button>
          <el-button @click="dialogFormVisible=false">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
