<template>
  <div :style="styleData.nYuanTrial" ref="nYuanTrial" @click="styleClick('click', 'nYuanTrial')"
    @mousemove="styleClick('mousemove', 'nYuanTrial')" @mouseout="styleClick('mouseout')">
    <div class="bargainTeam1" :style="styleData[keyData.bargainTeam1]" v-if="!shopFlag">
      <div v-if="!shopFlag">
        <div class="shopNameLable" :style="styleData[keyData.shopNameLable]">
          <div>{{ shopName }}</div>
        </div>
        <div class="goShop" :style="styleData[keyData.goShop]" v-lz-click="'4'" @click="goToShop()">
          进店逛逛
        </div>
        <div class="tac" :style="styleData[keyData.tac]">
          <div v-if="type == 0" class="cb" :style="styleData[keyData.cb]">
            <div class="fl" :style="styleData[keyData.fl]">
              <div class="ib" :style="styleData[keyData.ib]">
                <img :src="initiatorImage" alt="" style="
                    width: 0.7rem;
                    height: 0.7rem;
                    border-radius: 100%;
                    top: 3.8rem;
                    left: 1rem;
                  " />
              </div>
              <div class="ib" :style="styleData[keyData.ib]"
                style="margin-left: 0.2rem; font-size: 0.25rem; color: #51a86b">
                <div>{{ initiatorName }} 邀请您帮忙砍价</div>
              </div>
            </div>
          </div>
          <div class="skuDetail" :style="styleData[keyData.skuDetail]">
            <div class="fTac" :style="styleData[keyData.fTac]">
              <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
                <div class="animated fadeIn" :style="styleData[keyData.animated]">
                  <img style="width: 100%" alt="" :src="skuImg" />
                </div>
                <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                  <div class="drawTrialPrizeItem01" :style="styleData[keyData.drawTrialPrizeItem01]">
                    <div class="f-ib">试用价：</div>
                    <div class="f-ib">￥</div>
                    <div class="f-ib" style="font-size: 0.4rem">
                      <strong>{{ discountPrice }}</strong>
                    </div>
                    <div v-if="limitNum == 0" class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      不限购
                    </div>
                    <div v-else class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      限{{ limitNum }}件
                    </div>
                  </div>
                  <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                    {{ applyUserCount }}人已申请
                  </div>
                </div>
                <div class="f-tal" style="margin: 0.2rem 0.25rem">
                  <div :style="styleData.jdName">{{ skuName }}</div>
                  <div class="f-cb" :style="styleData.jdFont">
                    <div class="f-fl">
                      京东价：￥<strong>{{ skuPrice }}</strong>
                    </div>
                    <div class="f-fr" @click="goBuy()">
                      <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                    </div>
                  </div>
                  <div class="drawTrialDetailLine" :style="styleData[keyData.drawTrialDetailLine]">
                    <div class="drawline" :style="styleData[keyData.drawline]"></div>
                  </div>
                  <div class="drawTrialDetailStep" :style="styleData[keyData.drawTrialDetailStep]">
                    <div class="stepBar" :style="styleData[keyData.stepBar]"></div>
                    <div>
                      <span :style="styleData.num" class="f-ib">1</span>
                      <span class="f-ib" :style="styleData.fIbContent">免费申请</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span :style="styleData.num" class="f-ib">2</span>
                      <span class="f-ib" :style="styleData.fIbContent">系统审核，结果短信通知</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span :style="styleData.num" class="f-ib">3</span>
                      <span class="f-ib" :style="styleData.fIbContent">
                        <span style="color: rgb(242, 60, 60)">{{
                          discountPrice
                        }}</span>
                        元领取试用商品
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 1 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">关注店铺立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 0 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]" v-if="hasApply">
          <a href="javascript:;" class="drawTrialBtn2 disabled" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem">已申请</a>
        </div>
      </div>
      <div id="app" class="app" :style="styleData[keyData.app]" v-if="shopFlag">
        <div style="height: 13.5rem; overflow: auto" v-if="!referFlag">
          <div style="
              padding-top: 0.2rem;
              font-size: 0.28rem;
              line-height: 0.3rem;
              text-align: center;
            ">
            关注{{ applicationRequire }}个商品即可提交申请
          </div>
          <div>
            <ul class="drawSignList f-cb" :style="styleData[keyData.drawSignList]">
              <li class="drawSignListLi" :style="styleData[keyData.drawSignListLi]" v-for="(item, index) in skuInfoList"
                :key="index">
                <div class="pic">
                  <a href="javascript:;">
                    <img alt="" :src="item.skuImg" style="width: 100%" />
                  </a>
                </div>
                <div class="drawSignListLiTitle" :style="styleData[keyData.drawSignListLiTitle]">
                  {{ item.skuName }}
                </div>
                <div class="drawSignListLiDetail f-cb" :style="styleData[keyData.drawSignListLiDetail]">
                  <div class="f-fl">
                    <div class="price" :style="styleData[keyData.price]">
                      ￥{{ item.skuPrice }}
                    </div>
                  </div>
                  <div class="f-fr">
                    <a href="javascript:;" class="detailBtn disabled" v-if="item.taskType == 3"
                      @click="gzShop1()">已关注</a>
                    <a href="javascript:;" class="detailBtn" :style="styleData[keyData.detailBtn]" v-else
                      @click="gzShop(item.skuId, index)">关注</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]">
            <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
              style="margin-top: 0.15rem" @click="askSubmit()">提交申请</a>
          </div>
        </div>
        <div style="height: 13.5rem; overflow: auto" v-if="referFlag">
          <div style="
              width: 7.5rem;
              margin-top: 0.5rem;
              margin-bottom: 0.3rem;
              font-size: 0.4rem;
              line-height: 0.5rem;
              text-align: center;
            ">
            恭喜您申请成功<br />审核结果将在{{ endTime }}之前公布
          </div>
          <div>
            <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
              <div class="animated fadeIn" :style="styleData[keyData.animated]">
                <img alt="" :src="skuImg" />
              </div>
              <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                <div class="drawTrialprizeItem01" :style="styleData[keyData.drawTrialprizeItem01]">
                  <div class="f-ib">试用价：</div>
                  <div class="f-ib">￥</div>
                  <div class="f-ib" style="font-size: 0.4rem">
                    <strong>{{ discountPrice }}</strong>
                  </div>
                  <div v-if="limitNum == 0" class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    不限购
                  </div>
                  <div v-else class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    限{{ limitNum }}件
                  </div>
                </div>
                <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                  {{ applyUserCount + 1 }}人已申请
                </div>
              </div>
              <div class="f-tal" style="margin: 0.2rem 0.25rem">
                <div :style="styleData.jdName">{{ skuName }}</div>
                <div class="f-cb" style="
                    margin-top: 0.1rem;
                    color: rgb(102, 102, 102);
                    height: 27px;
                  ">
                  <div class="f-fr" @click="goBuy()">
                    <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="win-modal" v-if="phoneFlag">
        <div class="win-modal-mask"></div>
        <div class="winModalWrap" :style="styleData[keyData.winModalWrap]">
          <div class="winModalModal" :style="styleData[keyData.winModalModal]"
            style="margin-top: 50%; border-radius: 0.2rem; overflow: hidden">
            <div class="winNodalContent" :style="styleData[keyData.winNodalContent]">
              <div class="winModalBody" :style="styleData[keyData.winModalBody]">
                <div style="margin-top: 0.5rem; margin-bottom: 0.3rem">
                  手机号：
                  <input type="text" id="phone" v-model="phoneInfo"
                    style="width: 70%; height: 35px; border: 1px solid" />
                </div>
              </div>
              <div class="winModalFooter f-cb" :style="styleData[keyData.winModalFooter]">
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneFlag = false">取消</a>
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneSub()">确定</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bargainTeam2" :style="styleData[keyData.bargainTeam2]" v-if="shopFlag">
      <div v-if="!shopFlag">
        <div class="shopNameLable" :style="styleData[keyData.shopNameLable]">
          <div>{{ shopName }}</div>
        </div>
        <div class="goShop" :style="styleData[keyData.goShop]" v-lz-click="'4'" @click="goToShop()">
          进店逛逛
        </div>
        <div class="tac" :style="styleData[keyData.tac]">
          <div v-if="type == 0" class="cb" :style="styleData[keyData.cb]">
            <div class="fl" :style="styleData[keyData.fl]">
              <div class="ib" :style="styleData[keyData.ib]">
                <img :src="initiatorImage" alt="" style="
                    width: 0.7rem;
                    height: 0.7rem;
                    border-radius: 100%;
                    top: 3.8rem;
                    left: 1rem;
                  " />
              </div>
              <div class="ib" :style="styleData[keyData.ib]"
                style="margin-left: 0.2rem; font-size: 0.25rem; color: #51a86b">
                <div>{{ initiatorName }} 邀请您帮忙砍价</div>
              </div>
            </div>
          </div>
          <div class="skuDetail" :style="styleData[keyData.skuDetail]">
            <div class="fTac" :style="styleData[keyData.fTac]">
              <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
                <div class="animated fadeIn" :style="styleData[keyData.animated]">
                  <img alt="" :src="skuImg" />
                </div>
                <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                  <div class="drawTrialPrizeItem01" :style="styleData[keyData.drawTrialPrizeItem01]">
                    <div class="f-ib">试用价：</div>
                    <div class="f-ib">￥</div>
                    <div class="f-ib" style="font-size: 0.4rem">
                      <strong>{{ discountPrice }}</strong>
                    </div>
                    <div v-if="limitNum == 0" class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      不限购
                    </div>
                    <div v-else class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      限{{ limitNum }}件
                    </div>
                  </div>
                  <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                    {{ applyUserCount }}人已申请
                  </div>
                </div>
                <div class="f-tal" style="margin: 0.2rem 0.25rem">
                  <div :style="styleData.jdName">{{ skuName }}</div>
                  <div class="f-cb" :style="styleData.jdFont">
                    <div class="f-fl">
                      京东价：￥<strong>{{ skuPrice }}</strong>
                    </div>
                    <div class="f-fr" @click="goBuy()">
                      <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                    </div>
                  </div>
                  <div class="drawTrialDetailLine" :style="styleData[keyData.drawTrialDetailLine]">
                    <div class="drawline" :style="styleData[keyData.drawline]"></div>
                  </div>
                  <div class="drawTrialDetailStep" :style="styleData[keyData.drawTrialDetailStep]">
                    <div class="stepBar" :style="styleData[keyData.stepBar]"></div>
                    <div>
                      <span class="f-ib num">1</span>
                      <span class="f-ib" style="margin-left: 0.1rem">免费申请</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span class="f-ib num">2</span>
                      <span class="f-ib" style="margin-left: 0.1rem">系统审核，结果短信通知</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span class="f-ib num">3</span>
                      <span class="f-ib" style="margin-left: 0.1rem">
                        <span style="color: rgb(242, 60, 60)">{{
                          discountPrice
                        }}</span>
                        元领取试用商品
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 1 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">关注店铺立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 0 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]" v-if="hasApply">
          <a href="javascript:;" class="drawTrialBtn2 disabled" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem">已申请</a>
        </div>
      </div>
      <div id="app" class="app" :style="styleData[keyData.app]" v-if="shopFlag">
        <div style="height: 13.5rem; overflow: auto" v-if="!referFlag">
          <div style="
              padding-top: 0.2rem;
              font-size: 0.28rem;
              line-height: 0.3rem;
              text-align: center;
            ">
            关注{{ applicationRequire }}个商品即可提交申请
          </div>
          <div>
            <ul class="drawSignList f-cb" :style="styleData[keyData.drawSignList]">
              <li class="drawSignListLi" :style="styleData[keyData.drawSignListLi]" v-for="(item, index) in skuInfoList"
                :key="index">
                <div class="pic">
                  <a href="javascript:;">
                    <img alt="" :src="item.skuImg" style="width: 100%" />
                  </a>
                </div>
                <div class="drawSignListLiTitle" :style="styleData[keyData.drawSignListLiTitle]">
                  {{ item.skuName }}
                </div>
                <div class="drawSignListLiDetail f-cb" :style="styleData[keyData.drawSignListLiDetail]">
                  <div class="f-fl">
                    <div class="price" :style="styleData[keyData.price]">
                      ￥{{ item.skuPrice }}
                    </div>
                  </div>
                  <div class="f-fr">
                    <a href="javascript:;" class="detailBtn disabled" v-if="item.taskType == 3"
                      @click="gzShop1()">已关注</a>
                    <a href="javascript:;" class="detailBtn" :style="styleData[keyData.detailBtn]" v-else
                      @click="gzShop(item.skuId, index)">关注</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]">
            <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
              style="margin-top: 0.15rem" @click="askSubmit()">提交申请</a>
          </div>
        </div>
        <div style="height: 13.5rem; overflow: auto" v-if="referFlag">
          <div style="
              width: 7.5rem;
              margin-top: 0.5rem;
              margin-bottom: 0.3rem;
              font-size: 0.4rem;
              line-height: 0.5rem;
              text-align: center;
            ">
            恭喜您申请成功<br />审核结果将在{{ endTime }}之前公布
          </div>
          <div>
            <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
              <div class="animated fadeIn" :style="styleData[keyData.animated]">
                <img alt="" :src="skuImg" />
              </div>
              <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                <div class="drawTrialprizeItem01" :style="styleData[keyData.drawTrialprizeItem01]">
                  <div class="f-ib">试用价：</div>
                  <div class="f-ib">￥</div>
                  <div class="f-ib" style="font-size: 0.4rem">
                    <strong>{{ discountPrice }}</strong>
                  </div>
                  <div v-if="limitNum == 0" class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    不限购
                  </div>
                  <div v-else class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    限{{ limitNum }}件
                  </div>
                </div>
                <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                  {{ applyUserCount + 1 }}人已申请
                </div>
              </div>
              <div class="f-tal" style="margin: 0.2rem 0.25rem">
                <div :style="styleData.jdName">{{ skuName }}</div>
                <div class="f-cb" style="
                    margin-top: 0.1rem;
                    color: rgb(102, 102, 102);
                    height: 27px;
                  ">
                  <div class="f-fr" @click="goBuy()">
                    <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="win-modal" v-if="phoneFlag">
        <div class="win-modal-mask"></div>
        <div class="winModalWrap" :style="styleData[keyData.winModalWrap]">
          <div class="winModalModal" :style="styleData[keyData.winModalModal]"
            style="margin-top: 50%; border-radius: 0.2rem; overflow: hidden">
            <div class="winNodalContent" :style="styleData[keyData.winNodalContent]">
              <div class="winModalBody" :style="styleData[keyData.winModalBody]">
                <div style="margin-top: 0.5rem; margin-bottom: 0.3rem">
                  手机号：
                  <input type="text" id="phone" v-model="phoneInfo"
                    style="width: 70%; height: 35px; border: 1px solid" />
                </div>
              </div>
              <div class="winModalFooter f-cb" :style="styleData[keyData.winModalFooter]">
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneFlag = false">取消</a>
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneSub()">确定</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bargainTeam3" :style="styleData[keyData.bargainTeam3]" v-if="hasApply && !shopFlag">
      <div v-if="!shopFlag">
        <div class="shopNameLable" :style="styleData[keyData.shopNameLable]">
          <div>{{ shopName }}</div>
        </div>
        <div class="goShop" :style="styleData[keyData.goShop]" v-lz-click="'4'" @click="goToShop()">
          进店逛逛
        </div>
        <div class="tac" :style="styleData[keyData.tac]">
          <div v-if="type == 0" class="cb" :style="styleData[keyData.cb]">
            <div class="fl" :style="styleData[keyData.fl]">
              <div class="ib" :style="styleData[keyData.ib]">
                <img :src="initiatorImage" alt="" style="
                    width: 0.7rem;
                    height: 0.7rem;
                    border-radius: 100%;
                    top: 3.8rem;
                    left: 1rem;
                  " />
              </div>
              <div class="ib" :style="styleData[keyData.ib]"
                style="margin-left: 0.2rem; font-size: 0.25rem; color: #51a86b">
                <div>{{ initiatorName }} 邀请您帮忙砍价</div>
              </div>
            </div>
          </div>
          <div class="skuDetail" :style="styleData[keyData.skuDetail]">
            <div class="fTac" :style="styleData[keyData.fTac]">
              <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
                <div class="animated fadeIn" :style="styleData[keyData.animated]">
                  <img alt="" :src="skuImg" />
                </div>
                <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                  <div class="drawTrialPrizeItem01" :style="styleData[keyData.drawTrialPrizeItem01]">
                    <div class="f-ib">试用价：</div>
                    <div class="f-ib">￥</div>
                    <div class="f-ib" style="font-size: 0.4rem">
                      <strong>{{ discountPrice }}</strong>
                    </div>
                    <div v-if="limitNum == 0" class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      不限购
                    </div>
                    <div v-else class="f-ib" style="
                        height: 0.4rem;
                        line-height: 0.4rem;
                        font-size: 0.24rem;
                        border: 1px solid rgb(240, 160, 190);
                        border-radius: 10px;
                        padding: 0px 0.15rem;
                      ">
                      限{{ limitNum }}件
                    </div>
                  </div>
                  <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                    {{ applyUserCount }}人已申请
                  </div>
                </div>
                <div class="f-tal" style="margin: 0.2rem 0.25rem">
                  <div :style="styleData.jdName">{{ skuName }}</div>
                  <div class="f-cb" :style="styleData.jdFont">
                    <div class="f-fl">
                      京东价：￥<strong>{{ skuPrice }}</strong>
                    </div>
                    <div class="f-fr" @click="goBuy()">
                      <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                    </div>
                  </div>
                  <div class="drawTrialDetailLine" :style="styleData[keyData.drawTrialDetailLine]">
                    <div class="drawline" :style="styleData[keyData.drawline]"></div>
                  </div>
                  <div class="drawTrialDetailStep" :style="styleData[keyData.drawTrialDetailStep]">
                    <div class="stepBar" :style="styleData[keyData.stepBar]"></div>
                    <div>
                      <span class="f-ib num">1</span>
                      <span class="f-ib" style="margin-left: 0.1rem">免费申请</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span class="f-ib num">2</span>
                      <span class="f-ib" style="margin-left: 0.1rem">系统审核，结果短信通知</span>
                    </div>
                    <div style="margin-top: 0.2rem">
                      <span class="f-ib num">3</span>
                      <span class="f-ib" style="margin-left: 0.1rem">
                        <span style="color: rgb(242, 60, 60)">{{
                          discountPrice
                        }}</span>
                        元领取试用商品
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 1 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">关注店铺立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]"
          v-if="(needFollowShop == 0 || !hasApply) && !isWebClick">
          <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem" @click="followShop()">立即免费申请</a>
        </div>
        <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]" v-if="hasApply">
          <a href="javascript:;" class="drawTrialBtn2 disabled" :style="styleData[keyData.drawTrialBtn2]"
            style="margin-top: 0.15rem">已申请</a>
        </div>
      </div>
      <div id="app" class="app" :style="styleData[keyData.app]" v-if="shopFlag">
        <div style="height: 13.5rem; overflow: auto" v-if="!referFlag">
          <div style="
              padding-top: 0.2rem;
              font-size: 0.28rem;
              line-height: 0.3rem;
              text-align: center;
            ">
            关注{{ applicationRequire }}个商品即可提交申请
          </div>
          <div>
            <ul class="drawSignList f-cb" :style="styleData[keyData.drawSignList]">
              <li class="drawSignListLi" :style="styleData[keyData.drawSignListLi]" v-for="(item, index) in skuInfoList"
                :key="index">
                <div class="pic">
                  <a href="javascript:;">
                    <img alt="" :src="item.skuImg" style="width: 100%" />
                  </a>
                </div>
                <div class="drawSignListLiTitle" :style="styleData[keyData.drawSignListLiTitle]">
                  {{ item.skuName }}
                </div>
                <div class="drawSignListLiDetail f-cb" :style="styleData[keyData.drawSignListLiDetail]">
                  <div class="f-fl">
                    <div class="price" :style="styleData[keyData.price]">
                      ￥{{ item.skuPrice }}
                    </div>
                  </div>
                  <div class="f-fr">
                    <a href="javascript:;" class="detailBtn disabled" v-if="item.taskType == 3"
                      @click="gzShop1()">已关注</a>
                    <a href="javascript:;" class="detailBtn" :style="styleData[keyData.detailBtn]" v-else
                      @click="gzShop(item.skuId, index)">关注</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="drawTrialFixedBottom" :style="styleData[keyData.drawTrialFixedBottom]">
            <a href="javascript:;" class="drawTrialBtn2" :style="styleData[keyData.drawTrialBtn2]"
              style="margin-top: 0.15rem" @click="askSubmit()">提交申请</a>
          </div>
        </div>
        <div style="height: 13.5rem; overflow: auto" v-if="referFlag">
          <div style="
              width: 7.5rem;
              margin-top: 0.5rem;
              margin-bottom: 0.3rem;
              font-size: 0.4rem;
              line-height: 0.5rem;
              text-align: center;
            ">
            恭喜您申请成功<br />审核结果将在{{ endTime }}之前公布
          </div>
          <div>
            <div class="drawTrialDetail" :style="styleData[keyData.drawTrialDetail]">
              <div class="animated fadeIn" :style="styleData[keyData.animated]">
                <img alt="" :src="skuImg" />
              </div>
              <div class="drawTrialprizeItem f-tal" :style="styleData[keyData.drawTrialprizeItem]">
                <div class="drawTrialprizeItem01" :style="styleData[keyData.drawTrialprizeItem01]">
                  <div class="f-ib">试用价：</div>
                  <div class="f-ib">￥</div>
                  <div class="f-ib" style="font-size: 0.4rem">
                    <strong>{{ discountPrice }}</strong>
                  </div>
                  <div v-if="limitNum == 0" class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    不限购
                  </div>
                  <div v-else class="f-ib" style="
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.24rem;
                      border: 1px solid rgb(240, 160, 190);
                      border-radius: 10px;
                      padding: 0px 0.15rem;
                    ">
                    限{{ limitNum }}件
                  </div>
                </div>
                <div class="drawTrialPrizeItem02" :style="styleData[keyData.drawTrialPrizeItem02]">
                  {{ applyUserCount + 1 }}人已申请
                </div>
              </div>
              <div class="f-tal" style="margin: 0.2rem 0.25rem">
                <div :style="styleData.jdName">{{ skuName }}</div>
                <div class="f-cb" style="
                    margin-top: 0.1rem;
                    color: rgb(102, 102, 102);
                    height: 27px;
                  ">
                  <div class="f-fr" @click="goBuy()">
                    <a href="javascript:;" class="drawTrialBtn1" :style="styleData[keyData.drawTrialBtn1]">直接购买</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="win-modal" v-if="phoneFlag">
        <div class="win-modal-mask"></div>
        <div class="winModalWrap" :style="styleData[keyData.winModalWrap]">
          <div class="winModalModal" :style="styleData[keyData.winModalModal]"
            style="margin-top: 50%; border-radius: 0.2rem; overflow: hidden">
            <div class="winNodalContent" :style="styleData[keyData.winNodalContent]">
              <div class="winModalBody" :style="styleData[keyData.winModalBody]">
                <div style="margin-top: 0.5rem; margin-bottom: 0.3rem">
                  手机号：
                  <input type="text" id="phone" v-model="phoneInfo"
                    style="width: 70%; height: 35px; border: 1px solid" />
                </div>
              </div>
              <div class="winModalFooter f-cb" :style="styleData[keyData.winModalFooter]">
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneFlag = false">取消</a>
                <a href="javascript:;" class="showbtn f-fl" :style="styleData[keyData.showbtn]"
                  @click="phoneSub()">确定</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
import { newToSkuPage, goToShopPage } from "../../../util/tools.js";
import { allShare } from "../../../js/share.js";
import dateUtil from "../../../util/dateUtil";
import { Toast } from "vant";
let {
  apply,
  followShopList,
  followSku,
  taskYuanTrial,
  barginFollowShop,
  barginToBargain,
  storeGoodsPoint
} = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      skuImg: "", //商品图片
      skuName: "", //商品名字
      discountPrice: "", //试用价格
      applyUserCount: "", //已申请人数
      skuPrice: "", //京东价
      limitNum: 0, //0不限购 1限购
      skuInfo: "",
      shopName: "",
      needFollowShop: 0,
      shopFlag: false, //判断是够显示关注店铺页面
      phoneFlag: false, //判断提交申请页面显示
      referFlag: false, //判断申请成功页面显示
      skuInfoList: [], //关注店铺信息
      phoneInfo: "", //手机号
      taskType: 0, //判断商品是否管关注(按钮状态)
      canApplyFlag: false, //判断商品是否管关注
      hasApply: false, //判断是否申请成功
      endTime: "",
      applicationRequire: 0, //需要关注几个商品
      endTime2: "",
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },

  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    goToActive() {
      this.type = 1;
      this.helpStatus = 4;
      taskYuanTrial((bargain) => {
        console.log("22222222222", bargain);
        this.skuImg = bargain.data.skuInfo.skuImg;
        this.skuName = bargain.data.skuInfo.skuName;
        this.discountPrice = bargain.data.discountPrice;
        this.applyUserCount = bargain.data.applyUserCount;
        this.skuInfo = bargain.data.skuInfo;
        this.skuPrice = bargain.data.skuInfo.skuPrice;
        this.limitNum = bargain.data.limitNum;
        this.shopName = bargain.data.shopName;
        this.needFollowShop = bargain.data.needFollowShop;
        this.skuInfoList = bargain.data.skuInfoList;
        this.canApplyFlag = bargain.data.canApplyFlag;
        this.hasApply = bargain.data.hasApply;
        this.endTime2 = parseInt(new Date(bargain.data.endTime).getDate()) + 3;
        this.endTime =
          new Date(bargain.data.endTime).getFullYear() +
          "-" +
          (parseInt(new Date(bargain.data.endTime).getMonth()) + 1) +
          "-" +
          this.endTime2 +
          "日";
      });
      this.publicData.$emit("bargainTeamJoin", false);
    },
    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          console.log(datasAll);
          this.skuImg = datasAll.bargain.skuInfo.imagePath;
          this.skuName = datasAll.bargain.skuInfo.name;
          this.discountPrice = datasAll.bargain.displayPrice;
          this.applyUserCount = datasAll.bargain.inviteFirst;
          this.skuPrice = datasAll.bargain.skuInfo.price;
          this.helpStatus = 4;
          this.condition1Empty = true;
          this.condition2Empty = true;
          this.condition3Empty = true;
          this.reallyLevelId = 0;
          this.piecesLeft1 = 1;
          this.piecesLeft2 = 1;
          this.piecesLeft3 = 1;
          this.shopName = "滴露京东自营旗舰店";
          this.type = 1;
          this.discount = 10;
        } else {
          this.applyUserCount = 250;
          this.skuPrice = 299;
          this.price = 100;
          this.discountPrice = 1;
          this.skuName = "本儿夹子";
          this.skuImg =
            "http://img12.360buyimg.com/n0/jfs/t1/163350/35/7270/371414/6034cdefEfba59493/98a23d8b2ba8cc92.jpg";
          this.helpStatus = 4;
          this.condition1Empty = true;
          this.condition2Empty = true;
          this.condition3Empty = true;
          this.reallyLevelId = 0;
          this.inviteSecond = 5;
          this.discountSecond = 10;
          this.totalSecond = 5;
          this.inviteThird = 10;
          this.discountThird = 15;
          this.totalThird = 2;
          this.ifLimit = 0;
          this.limitMin = 0;
          this.limitMax = 0;
          this.displayPrice = 0;
          this.preferentialWay = 0;
          this.piecesLeft1 = 1;
          this.piecesLeft2 = 1;
          this.piecesLeft3 = 1;
          this.shopName = "滴露京东自营旗舰店";
          this.type = 1;
          this.discount = 10;
          this.needFollowShop = 0;
        }
      } else {
        this.type = store.state.shareUserId ? "0" : "1"; // 1 主端 0 客端

        taskYuanTrial((bargain) => {
          console.log("11111111111111", bargain);
          this.skuImg = bargain.data.skuInfo.skuImg;
          this.skuName = bargain.data.skuInfo.skuName;
          this.discountPrice = bargain.data.discountPrice;
          this.applyUserCount = bargain.data.applyUserCount;
          this.skuInfo = bargain.data.skuInfo;
          this.skuPrice = bargain.data.skuInfo.skuPrice;
          this.limitNum = bargain.data.limitNum;
          this.canApplyFlag = bargain.data.canApplyFlag;
          this.shopName = bargain.data.shopName;
          this.needFollowShop = bargain.data.needFollowShop;
          this.skuInfoList = bargain.data.skuInfoList;
          this.hasApply = bargain.data.hasApply;
          this.applicationRequire = bargain.data.applicationRequire;
          this.endTime2 =
            parseInt(new Date(bargain.data.endTime).getDate()) + 3;
          this.endTime =
            new Date(bargain.data.endTime).getFullYear() +
            "-" +
            (parseInt(new Date(bargain.data.endTime).getMonth()) + 1) +
            "-" +
            this.endTime2 +
            "日";
        });
      }
    },
    followShop() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        // Toast
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      followShopList((callback) => {
        this.shopFlag = true;
        this.initData();
      });
    },

    gzShop(skuId, index) {
      var skuId = skuId;
      followSku(skuId, (callback) => {
        this.canApplyFlag = callback.data.canApplyFlag;
        this.skuInfoList[index].taskType = 3;
        this.$toast("关注成功");
      });
    },

    gzShop1() {
      this.$toast("不可重复关注同一件商品");
    },
    askSubmit() {
      if (this.canApplyFlag) {
        this.phoneFlag = true;
      } else {
        this.$toast("关注" + this.applicationRequire + "个商品才可以提交申请");
      }
    },
    phoneSub() {
      console.log(this.phoneInfo);
      var reg =
        /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
      if (this.phoneInfo == "" || this.phoneInfo == undefined) {
        this.$toast("请输入手机号码");
      } else if (!reg.test(this.phoneInfo)) {
        this.$toast("手机号码格式不正确");
      } else {
        apply(this.phoneInfo, (callback) => {
          this.phoneFlag = false;
          this.referFlag = true;
        });
      }
    },
    clickShare() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if (this.followShopFlag == false && this.needFollowShop == 1) {
        barginFollowShop((data) => { });
      }
      allShare(this.isTemplate, this, (callBackData) => {
        console.log(callBackData, "callBackData");
      });
    },
    goToShop() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
    goBuy() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        // Toast
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      storeGoodsPoint(5)
      newToSkuPage(this.skuInfo);
    },
    //我也要参加
    joinTeam() {
      barginToBargain(store.state.shareUserId, (data) => {
        this.helpStatus = data.data.helpStatus;
      });
    },
  },
  filters: {
    twostar: function (value) {
      if (!value) {
        return "";
      }
      return value.substr(0, 1) + "**" + value.substr(-1, 1);
    },
    //时间转换
    dateTime(val) {
      if (val) {
        return dateUtil.formatTime(val, "yyyy-MM-dd hh:mm");
      }
      return val;
    },
  },
};
</script>

<style lang="scss">
.f-cb:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  content: '.';
}
.detailBtn.disabled {
  background: #ccc;
  color: #fff;
}

.f-cb {
  zoom: 1;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawTrialBtn2.disabled {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}

.f-ib {
  display: inline-block;
  vertical-align: middle;
}
.f-tal {
  text-align: left;
}

.f-fl {
  float: left;
}

strong {
  font-weight: 700;
}
.f-fr {
  float: right;
}

.drawTrialDetailLine:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0.28rem;
  height: 0.28rem;
  background: #f72e7b;
  border-radius: 100%;
  z-index: 3;
}

.drawTrialDetailLine:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.28rem;
  height: 0.28rem;
  background: #f72e7b;
  border-radius: 100%;
  z-index: 3;
}

.num {
  width: 0.32rem;
  height: 0.32rem;
  line-height: 0.32rem;
  text-align: center;
  color: #fff;
  background: #f72e7b;
  border-radius: 100%;
  position: relative;
  z-index: 2;
}

.cbli li {
  zoom: 1;
}
</style>
