<!--index.wxml-->
<view class="container">
  <view class='nav-wrap' style='height: calc({{navBarHeight}}px - {{MenuButtonTop}}px); padding-top: {{MenuButtonTop}}px;'>
     <view wx:if="{{deviceList && deviceList.length > 0 && !showLogin}}" bindtap="isShowDevicelistFun" class="nav-info" style="height: {{ MenuButtonheight }}px;">
        <image class="device-pic" mode="heightFix"  src="./../../img/min.png"></image>
        <text>{{deviceList[deviceListIndex].devName}}</text>
        <image class="j" mode="heightFix" src="./../../img/{{isShowDevicelist ? 'j_top' : 'j_bottom'}}.png"></image>
     </view>
     
     <view style="height: {{ MenuButtonheight }}px;" bindtap="goDeviceConnect" class="nav-info" wx:elif="{{deviceList && deviceList.length === 0 && !showLogin}}" >
      <image class="z" mode="heightFix" src="./../../img/z.png"></image>
      <text>连接设备</text>
    </view>
    
     <view style="height: {{ MenuButtonheight }}px;" wx:elif="{{showLogin}}" class="nav-info" >
      <image class="z" mode="heightFix" src="./../../img/z.png"></image>
      <text bindtap="goLogin">点击登录</text>
     </view>
  </view>
  <view class="mair" style="height: calc(100vh - 22rpx - {{navBarHeight}}px);">
    <view wx:if="{{isShowDevicelist}}" class="deviceList" catchtap="isShowDevicelistFun">
      <view class="mz">
        <view class="li-view"  wx:for="{{deviceList}}">
          <view bindtap="actionDeviceIndex" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.6'}};" data-index="{{index}}"class="li {{deviceListIndex === index ? 'action' : ''}}">
            <image mode="widthFix" src="./../../img/min.png"></image>
            <text class="deviceName">{{item.devName}}</text>
            <text class="onli">{{item.state && item.state === "online" ? "在线" : "离线"}}</text>
            <image data-index="{{index}}" catchtap="deleteDevice" wx:if="{{showDelete}}" class="delete" mode="widthFix" src="./../../img/l.png"></image>
          </view>
        </view>
        <view class="but" style="width: 100%; float: left;">
          <view  wx:if="{{!showDelete}}"><text style="background-color: #999;" catchtap="showDelete">删除</text></view>
          <view  wx:if="{{!showDelete}}"><text bindtap="goDeviceConnect">新增</text></view>
          <view  wx:else><text catchtap="showDelete">完成</text></view>
        </view>
      </view>
    </view>
    <view class="play-info">
      <view class="info">
        <image src="./../../img/blak.png" class="black" mode="scaleToFill"></image>
        <image src="./../../img/mm.png" class="mode" mode="scaleToFill"></image>
        <image class="logo" mode="heightFix" src="./../../img/logo.png"></image>
        <view wx:if="{{actionIndex !== null}}" style="opacity: 0.8; text-shadow:0px 0px 4px #6D00FF;" class="fm">FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}}</view>
        <view wx:if="{{actionIndex !== null}}" style="opacity: 1;" class="fm">FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} 
          <image class="gochnnalList" mode="heightFix" src="./../../img/a6.png"></image>
        </view>
        <view class="fmMod" bindtap="goChnnel"></view>
        <view wx:if="{{actionIndex !== null}}" class="thisMusic">
          <text>当前播放：</text>
          <view class="scroll-box">
            <view class="scroll-wrap">
              <view class="scroll-item">{{channelData[actionIndex].channelName}}</view>
            </view>
          </view>
        </view>
        <image src="{{'./../../img/dl' + battery + '.png'}}" class="battery" mode="scaleToFill"></image>
      </view>
      <view class="wakeMode" bindtap="goWake">
        <image src="./../../img/woak.png" class="mode" mode="scaleToFill"></image>
        <image class="wake" mode="heightFix" src="{{isSetWake ? './../../img/n24.png' : './../../img/n23.png' }}"></image>
        <text>定时</text>
      </view>
    </view>
    <scroll-view class="pd" scroll-y="true">
      <view class="conm" wx:if="{{channelData && channelData.length > 0}}">
        <image mode="scaleToFill" class="cz" src="./../../img/cz.png"></image>
        <view class="musicList" >
          <view wx:for="{{channelData}}" class="li {{index === actionIndex ? 'action' : ' '}}">
           <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="zz" src="./../../img/zz.png"></image>
            <text class="lm">{{luoma[index]}}</text>
            <view class="musicInfo" data-index="{{index}}" bindtap="actionMusic">
              <image mode="scaleToFill" class="pic" src="{{item.channelPic ? item.channelPic : './../../img/head_pic.png'}}"></image>
              <text>{{item.channelName}}</text>
              <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="svg" src="./../../svg/audio.svg"></image> 
            </view>
          </view>
        </view>
        <!-- <image src="./../../svg/audio.svg"></image> -->
      </view>
    </scroll-view>
    <!-- 登录 -->
    <!-- 过审暂时不启用 -->
    <!-- <view class="gologin" wx:if="{{showLogin}}">
      <view class="model">
        <image mode="scaleToFill" src="./../../img/yy.png"></image>
        <view>
          <image mode="heightFix" src="./../../img/r.png"></image>
          <text>享受独有的生活乐趣</text>
          <view bindtap="goLogin">连接设备</view>
        </view>
      </view>
    </view> -->
    <!-- 登录启用以下版本 -->
    <view class="gologin" wx:if="{{showLogin}}">
      <view class="model">
        <view bindtap="goLogin" style="position: none; height: auto;" class="loginPic">
          <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_long.png"></image>
        </view>
        <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
          <view>
            <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 连接设备 -->
    <!-- 过审暂时不启用 -->
    <!-- <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
      <view class="model">
        <view>
          <image mode="heightFix" src="./../../img/n.png"></image>
          <text>开启专属12频道</text>
          <view bindtap="goDeviceConnect">连接设备</view>
        </view>
      </view>
    </view> -->
    <!-- 连接设备启用以下版本 -->
    <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
      <view class="model">
        <view bindtap="goDeviceConnect" style="position: none; height: auto;" class="loginPic">
          <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_LJ.png"></image>
        </view>
        <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
          <view>
            <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{newVersion}}" class="updataminiwx">
    <view class="mode">
      <image class="bg" src="./../../img/BG@2x.png" ></image>
      <view class="updata-view">
        <image src="./../../img/sj.png"></image>
        <text class="title">更新检测</text>
        <text class="tip">检测到新版本，是否重启小程序</text>
        <view>
          <text bindtap="updataClone" class="onBut">取消</text>
          <text bindtap="updata" class="twoBut">确定</text>
        </view>
      </view>
    </view> 
  </view>
</view>
