<view class="page">
  <view class="app__bgc bgc" style="background-color: {{detailData.background}};"></view>
  <!-- <view class="app__bg bg " style="background: url('{{detailData.backgroundImage}}')"></view> -->
  <image mode="scaleToFill" class="ebg" src="{{detailData.backgroundImage}}" />
  <view class="app__content main">
    <!-- 顶部背景 -->
    <image class="top-bg" mode="widthFix" src="{{detailData.headImage}}" />
    <!-- <view class="top-bg"></view> -->
    <view class="top-space"></view>
    <view class="content">
      <view class="title">{{detailData.lunarCalendar}}</view>
      <!-- 用户 -->
      <view class="user">
        <!-- 用户头像 -->
        <view class="portrait">
          <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
          <image class="portrait-border ani-rotation" mode="scaleToFill" src="{{detailData.headFrame}}" />
        </view>
        <!-- 用户名称 -->
        <view class="name">
          <view class="tt">{{ownerMember.memberName}}</view>
          <image wx:if="{{ownerMember.mySelf == 1}}" bindtap="showUpdateUserInfoDialog" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
        </view>
        <!-- 编辑房间信息 组队时候才显示 -->
        <view wx:if="{{detailData.type == 1}}" class="edit">
          <view class="tt t1">{{detailData.familyName}}</view>
          <image wx:if="{{ownerMember.mySelf == 1}}" bindtap="showUpdateRoomDialog" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
          <view class="tt t2">{{detailData.count}}人</view>
        </view>
        <!-- 用户组 -->
        <view wx:if="{{detailData.type == 1}}" class="group {{isMore ? 'all' : ''}}">
          <view wx:for="{{memberList}}" wx:key="{{index}}" class="group-item">
            <image class="group-item-portrait" mode="scaleToFill" src="{{item.memberHead}}" />
            <view class="group-item-name">
              <view class="t1">{{item.memberName}}</view>
              <image wx:if="{{item.mySelf == 1}}" bindtap="showUpdateUserInfoDialog" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
            </view>
          </view>
          <!-- 邀请 房主或组队模式显示 -->
          <view class="group-item" wx:if="{{options.t || ownerMember.mySelf == 1}}">
            <button data-data="join" open-type="share" class="group-item-inv">
              <image class="icon-inv" mode="widthFix" src="../../image/icon/icon-inv.png" />
            </button>
          </view>
        </view>
        <!-- 更多 -->
        <view bindtap="onShowMoreHandler" wx:if="{{memberList.length >= 6 && !isMore}}" class="more">
          查看更多
          <image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" />
        </view>
        <!-- 自定义句子 -->
        <view class="sentence">{{detailData.blessTitle}}</view>
      </view>
      <!-- 祝福内容 -->
      <view class="blessing">
        <view wx:for="{{blessContent}}" wx:key="{{index}}" class="blessing-item">
          <!-- 图片 -->
          <image mode="widthFix" wx:if="{{item.type == 'image'}}" class="blessing-item-image" src="{{item.url}}" />
          <!-- 文本 -->
          <text wx:if="{{item.type == 'text'}}" class="blessing-item-text" style="color: {{item.color ? item.color : '#333333'}};">
            {{item.content}}
          </text>
        </view>
      </view>
      <!-- 尾部内容 暂时不显示 -->
      <view class="tail" wx:if="{{1>0}}">
        <!-- 尾部头像 -->
        <view class="portrait">
          <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
          <image class="portrait-border" mode="scaleToFill" src="{{detailData.headFrame}}" />
        </view>
        <view class="name">
          <view class="tt t1">{{ownerMember.memberName}}</view>
          <view class="tt t2">{{detailData.sentence}}</view>
        </view>
        <!-- 按钮组 -->
        <view class="tail-btn-wrap">
          <!-- 分享团队图片 -->
          <image bindtap="onPosterHandler" wx:if="{{detailData.type == 1}}" mode="widthFix" class="tail-btn-wrap-item blessing-share-group-btn" src="../../image/blessing/blessing-share-group-btn.png" />
          <view wx:if="{{detailData.type == 0}}" bindtap="toReward" class="tail-btn-wrap-item more-template">
            <span class="t1">赞赏祝福</span>
            >>
          </view>
          <!-- 选择更多祝福模板 -->
          <view bindtap="onMoreTemplateHandler" class="tail-btn-wrap-item more-template">
            <span class="t1">选择更多祝福模版</span>
            >>
          </view>
        </view>
      </view>
    </view>
    <!-- fix底部 -->
    <view class="bottom">
      <image class="bottom-bg" mode="scaleToFill" src="{{detailData.tailImage}}" />
      <!-- 分情况显示btn-wrap -->
      <!-- 单人 -->
      <block wx:if="{{detailData.type == 0}}">
        <!-- 未定制 -->
        <view wx:if="{{detailData.customMade == 0}}" class="btn-wrap">
          <button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
          <button wx:if="{{!isAuth}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn2">
            定制我的祝福
          </button>
          <view wx:else bindtap="onBlessMakeHandler" class="btn btn2">定制我的祝福</view>
        </view>
        <!-- 已定制 -->
        <view wx:if="{{detailData.customMade == 1}}" class="btn-wrap">
          <button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
          <button open-type="share" class="btn btn2">送出我的祝福</button>
        </view>
      </block>
      <!-- 组队 -->
      <block wx:if="{{detailData.type == 1}}">
        <!-- 未定制 -->
        <view wx:if="{{detailData.customMade == 0}}" class="btn-wrap">
          <!-- 未授权 -->
          <block wx:if="{{!isAuth}}">
            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn1">
              邀请家人加入
            </button>
            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn2">
              定制我的祝福
            </button>
          </block>
          <!-- 已授权 -->
          <block wx:else>
            <button bindtap="showTips" data-data="请定制祝福后再邀请" class="btn btn1">邀请家人加入</button>
            <button bindtap="onBlessMakeHandler" class="btn btn2">定制我的祝福</button>
          </block>
        </view>
        <!-- 已经定制 -->
        <view wx:if="{{detailData.customMade == 1}}" class="btn-wrap">
          <!-- 能加入状态 -->
          <block wx:if="{{isJoin}}">
            <button bindtap="onBlessJoinHandler" class="btn btn1">加入组队祝福</button>
          </block>
          <!-- 不能加入状态 -->
          <block wx:else>
            <button data-data="join" open-type="share" class="btn btn1">邀请家人加入</button>
          </block>
          <button open-type="share" class="btn btn2">送出我的祝福</button>
        </view>
      </block>
    </view>
  </view>
</view>
<!-- 背景音乐 -->
<image bindtap="onBgmHandler" src="../../image/icon/icon-music.png" class="music {{isPlayingBgm?'ani-rotation-music':''}}" mode="widthFix"></image>
<!-- <audio src="{{detailData.musicUrl}}" id="myAudio"></audio> -->
<!-- 修改用户信息 -->
<van-dialog close-on-click-overlay use-slot title="修改信息" confirm-button-text="确认修改" show="{{ updateUserInfoDialogVisible }}" show-cancel-button bind:confirm="onUpdateUserInfoHander">
  <view class="dialog">
    <view class="dialog-item">
      <view class="label">名称</view>
      <input value="{{ updateUserInfo.memberName }}" placeholder="请输入用户名" bindinput="onUpdateUserInfoBindInput" />
    </view>
    <view class="dialog-item">
      <view class="label">头像</view>
      <view class="upload">
        <image class="image" bindtap="onUploadHandler" mode="aspectFit" src="{{files[0] && files[0].path?files[0].path:'../../image/icon/icon-plus.png'}}" />
      </view>
    </view>
  </view>
</van-dialog>
<!-- 修改房间信息 -->
<van-dialog close-on-click-overlay use-slot title="修改信息" confirm-button-text="确认修改" show="{{ updateRoomDialogVisible }}" show-cancel-button bind:confirm="onUpdateRoomHander">
  <view class="dialog">
    <view class="dialog-item">
      <view class="label">家庭名称</view>
      <input value="{{ updateRoomInfo.familyName }}" placeholder="请输入家庭名称" bindinput="onUpdateFamilyNameBindInput" />
    </view>
    <view class="dialog-item">
      <view class="label">祝福语</view>
      <input value="{{ updateRoomInfo.sentence }}" placeholder="请输入祝福语" bindinput="onUpdateSentenceBindInput" />
    </view>
  </view>
</van-dialog>
<!-- 加入房间 -->
<van-dialog close-on-click-overlay use-slot confirm-button-text="点击加入" show="{{ joinRoomDialogVisible }}" bind:confirm="onBlessJoinHandler">
  <view class="dialog dialog2">
    <view class="portrait">
      <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
    </view>
    <view class="nickname">{{ownerMember.memberName}}</view>
    <view class="t1">邀请你一起加入组队送祝福!</view>
  </view>
</van-dialog>
<shortcut2  types="{{[]}}" pics="{{['red-package2','more-bless']}}"></shortcut2>