<cu-custom id="head" isCustom="{{false}}" isBack="{{false}}" isIndex="{{true}}">
  <view slot="content">{{nameTxt}}</view>
</cu-custom>
<view style="background-color:#F7F7F7;">
  <view class="top-box">
    <!-- 名片 -->
    <view class="card-container"
      style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
      <view class="card"
        style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
        <!-- 背景图 -->
        <image src="{{cardUrl}}{{cardInfo.cardTemplateUseBackgroundImage}}" alt="" class="card-bgImg" mode="widthFix"
          wx:if="{{cardInfo.cardTemplateUseBackgroundImage}}"></image>
        <!-- 文字 -->
        <view class="area-box" wx:for="{{areaList}}" wx:key="index"
          style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}};font-size:{{item.templateAreaFontSize}};font-style:{{item.templateAreaFontStyle}};font-weight:{{item.templateAreaFontBold}};text-align:{{item.templateAreaFontCenter}}"
          wx:if="{{item.templateAreaServerLink == '1'}}">{{item.templateAreaFontValue}}</view>
        <!-- 图片 -->
        <view wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index"
          style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}}"
          wx:if="{{item.templateAreaServerLink != '1'}}">
          <image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%" mode="widthFix">
          </image>
        </view>
      </view>
    </view>
    <view class="flex flex-direction">
      <view class="mid">
        <button open-type="share" class="mid-box">
          <image src="../../images/share-icon.png"></image>
          <view class="mid-box-text">分享名片</view>
        </button>
        <view class="mid-box" bindtap="includedCard">
          <image src="../../images/contact-icon.png"></image>
          <view class="mid-box-text">加入卡包</view>
        </view>
        <view class="mid-box" bindtap="showBarCode">
          <image src="../../images/code-icon.png"></image>
          <view class="mid-box-text">名片码</view>
        </view>
      </view>
      <view class="mid-btn">
        <view class="mid-btn-box" bindtap="makeCall">
          <image src="../../images/mid-btn-1.png"></image>
          <view class="mid-btn-text">
            <view class="text-top">电话</view>
            <view class="text-bottom">{{phoneTxt}}</view>
          </view>
        </view>
        <view class="mid-btn-box" bindtap="copyText" data-text="{{wechateTxt}}">
          <image src="../../images/mid-btn-2.png"></image>
          <view class="mid-btn-text">
            <view class="text-top">微信</view>
            <view class="text-bottom">{{wechateTxt}}</view>
          </view>
        </view>
        <view class="mid-btn-box" bindtap="copyText" data-text="{{emailTxt}}">
          <image src="../../images/mid-btn-3.png"></image>
          <view class="mid-btn-text">
            <view class="text-top">邮箱</view>
            <view class="text-bottom">{{emailTxt}}</view>
          </view>
        </view>
        <view class="mid-btn-box" bindtap="copyText" data-text="{{addressTxt}}">
          <image src="../../images/mid-btn-4.png"></image>
          <view class="mid-btn-text">
            <view class="text-top">地址</view>
            <view class="text-bottom">{{addressTxt}}</view>
          </view>
        </view>
      </view>
      <view class="good">
        <view class="good-avatar">
          <view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user">
            <image src="{{imgUrl}}{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
            <image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
          </view>
        </view>
        <view class="good-click">
          <view class="view-count">
            <image src="/images/view-count.png" mode="scaleToFill"></image>
            <text class="margin-left-sm text-center"> {{cardInfo.cardTemplateUseScansNumber >999? '999+' :
              cardInfo.cardTemplateUseScansNumber}}</text>
          </view>
          <view class="view-count-no">
            <image src="/images/share-count.png" mode="scaleToFill"></image>
            <text class="margin-left-sm text-center">{{cardInfo.cardTemplateUseDispatchNumber>999 ?
              '999+':cardInfo.cardTemplateUseDispatchNumber}}</text>
          </view>
        </view>
      </view>

      <view wx:if="{{dataList.length>0}}" style="background-color:#F7F7F7;">
        <!-- 栏目组 -->
        <view wx:for="{{dataList}}" wx:key="index">
          <view class="flex flex-direction  margin-sm">
            <!-- 栏目 -->
            <view class="catelog-title margin-top-xs" data-item="{{item}}" data-idx="{{index}}"
              data-userid="{{tempUserId}}" bindtap="showMore">
              <view class="action">
                <view class="title intro-title">
                  <text class="cuIcon-vipcard"></text>
                  <text> {{item.name}}</text>
                </view>
              </view>
              <view class="action text-blue" wx:if="{{item.mode=='2'}}">
                更多 >
              </view>
            </view>
            <view class="column-content">
              <view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it" style="" class="column-box">
                <!-- 栏目数据 -->
                <view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i" bindtap="showDetail"
                  data-ctype="{{item.type}}" data-cid="{{item.cId}}" data-id="{{it.uid}}">
                  <!-- 具体数据 -->
                  <!-- 文本 -->
                  <view wx:if="{{child.dataType=='1' && child.displayList}}" class="align-center">
                    <view class="bg-white">
                      <view class="cu-form-group">
                        <view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
                          style="line-height:40rpx;">
                          <text class="{{item.type=='dda5007c-5fb7-48f2-8537-3cb8ea298242' ? 'cuIcon-title' : ''}}">
                          </text>
                          <text>{{child.value}}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 图片 -->
                  <view wx:if="{{child.dataType=='2' && child.displayList}}">
                    <!-- 九宫格 -->
                    <view wx:if="{{child.dataMode == '95bef6e2-0ab8-442f-b53d-b1f18130bae1'}}"
                      class="cu-form-group padding-sm">
                      <view class="grid col-3 grid-square flex-sub">
                        <view class="bg-img" wx:for="{{child.valueList}}" wx:key="d" wx:for-item="photo"
                          catchtap="viewImg" data-url="{{photo.path}}">
                          <image src='{{photo.path}}' mode='scaleToFill'></image>
                        </view>
                      </view>
                    </view>
                    <!-- 左右滑动 -->
                    <view
                      wx:elif="{{child.dataMode=='bae3d6c1-8f6e-4e27-bba2-e42860758db7' || child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
                      <swiper style="width:100%;height:400rpx;margin-top:20rpx;" indicator-dots="{{true}}"
                        autoplay="{{child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
                        <block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
                          <swiper-item style="width:100%;">
                            <image style="width:100%;border-radius:20rpx;height:400rpx;" src="{{photo.path}}"
                              mode="scaleToFill">
                            </image>
                          </swiper-item>
                        </block>
                      </swiper>
                    </view>
                    <!-- 上下 -->
                    <view wx:elif="{{child.dataMode=='121133b0-3596-46f4-a35f-7aaae79cf47a'}}">
                      <block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
                        <image style="width:100%;border-radius:20rpx;margin-top:20rpx;" src="{{photo.path}}"
                          mode="widthFix">
                        </image>
                      </block>
                    </view>
                  </view>
                  <!-- 视频 -->
                  <view wx:if="{{child.dataType=='4' && child.displayList}}">
                    <view class="cu-form-group margin-top-sm padding-sm"
                      style="border:1rpx solid #f9f9f9;border-radius:10rpx;">
                      <view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
                        <view class="bg-img" wx:for="{{child.valueList}}" wx:for-index="d" wx:key="d"
                          wx:for-item="video" catchtap="viewVideo"
                          style="{{count > 3 ? '' :'height:280rpx;width:100%;padding-bottom:0px;'}}"
                          data-url="{{video.path}}">
                          <image style="width:100%;height:100%;" src='{{video.imgPath}}' mode='scaleToFill'></image>
                          <view class="{{count > 3 ? 'play-box-arrow-pos':'play-box-arrow-flex'}}">
                            <image src="/images/ic_video_play.png" mode="scaleToFill"
                              style="{{count > 3 ? 'width:32px;height:32px':'height:64px;width:64px;'}}"></image>
                          </view>
                        </view>
                      </view>
                    </view>

                  </view>
                  <!-- 音频 -->
                  <view wx:if="{{child.dataType=='3' && child.displayList}}" style="width:100%;">
                    <view class="cu-form-group padding-sm">
                      <view class="flex align-center shadow-box margin-top-xs" style="width:100%;"
                        wx:for="{{child.valueList}}" wx:for-index="a" wx:key="a" wx:for-item="audio">
                        <image src="/images/ic_user_default.png" mode="scaleToFill" style="width:80rpx;height:80rpx;">
                        </image>
                        <view class="play-box">
                          <view class="flex justify-between align-center" style="width:80%;">
                            <text>{{audio.curDurationStr}}</text>
                            <slider class="flex-sub" bindchange="slider4change" min="{{0}}" max="{{audio.duration}}"
                              value="{{audio.curDuration}}" backgroundColor="#cacaca" activeColor="#1296db"
                              data-index="{{index}}" data-idx="{{idx}}" data-i="{{i}}" data-item="{{audio}}"
                              data-a="{{a}}" block-size="14" block-color="#1296db" />
                            <text>{{audio.totalDurationStr}}</text>
                          </view>
                          <view class="flex justify-between" style="width:80%;">
                            <image src="/images/ic_audio_rewind.png" mode="scaleToFill" data-index="{{index}}"
                              data-idx="{{idx}}" data-a="{{a}}" data-i="{{i}}" data-item="{{audio}}" catchtap="rewind">
                            </image>
                            <image src="{{audio.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
                              mode="scaleToFill" catchtap="play" data-index="{{index}}" data-i="{{i}}"
                              data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}"></image>
                            <image src="/images/ic_audio_speed.png" mode="scaleToFill" catchtap="speed"
                              data-index="{{index}}" data-a="{{a}}" data-idx="{{idx}}" data-i="{{i}}"
                              data-item="{{audio}}"></image>
                          </view>
                        </view>
                      </view>
                    </view>

                  </view>
                  <!-- 地图定位 -->
                  <view wx:if="{{child.dataType=='6' && child.displayList}}">
                    <view class="padding-sm">
                      <view wx:for="{{child.valueList}}" wx:key="mindex" wx:for-index="mindex" wx:for-item="m"
                        style="width:100%;" class="margin-top-xs">
                        <view class="flex justify-between">
                          <view>
                          </view>
                          <view></view>
                        </view>
                        <view style="border-radius:10rpx;overflow:hidden;margin-top:10rpx;">
                          <map style="width:100%;height:300rpx;" longitude="{{m.longitude}}" latitude="{{m.latitude}}"
                            scale="12" enable-scroll="{{false}}" enable-zoom="{{false}}" enable-rotate="{{false}}"
                            enable-traffic="{{false}}"
                            markers="{{[{latitude:m.latitude,longitude:m.longitude}]}}"></map>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 文本域 -->
                  <view wx:if="{{child.dataType == '7' && child.displayList}}">
                    <view class="bg-white">
                      <view class="cu-form-group">
                        <view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
                          style="line-height:40rpx;">
                          {{child.value}}
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 单选 -->
                  <view wx:if="{{child.dataType == '8' && child.displayList}}">
                    <view class="flex" style="flex-direction:row;">
                      <view class="cu-bar bg-white">
                        <view class="action">
                          <text class="cuIcon-vipcard"></text> <text class="text-black">{{child.comment}}:</text><text
                            class="margin-left-sm">{{child.selValue}}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 多选 -->
                  <view wx:if="{{child.dataType == '9' && child.displayList}}">
                    <view class="cu-bar bg-white">
                      <view class="action">
                        <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
                      </view>
                    </view>
                    <view class="cu-capsule radius" wx:for="{{child.dictionariesList}}" wx:key="ids" wx:for-index="ids"
                      wx:for-item="ss">
                      <view wx:if="{{ss.isSel}}" class="cu-tag bg-blue radius padding-left-sm padding-right-sm">
                        {{ss.dataName}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view wx:else style="margin-top:200rpx;width:100%;">
        <van-empty description="暂无数据" image="/images/ic_empty_data.png" />
      </view>
    </view>
  </view>
  <!-- 创建名片 -->
  <view class="creat-card" bindtap="goList">
    <image src="../../images/create-btn.png"></image>
  </view>
</view>
<view class="bar-code" wx:if="{{isShowBarCode}}" bindtap="hideBarCode">
  <view class="content">
    <view class="code-title">一段话</view>
    <image src="{{cardUrl}}{{cardInfo.cardTemplateUseBarcode}}"></image>
    <view class="code-txt">
      有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
    </view>
  </view>
</view>