@using JXCMS.Core.Themes


<div class="container-fluid p-t-15">
  <div class="card">
    <div class="card-body">
      <ul class="list-inline clearfix">
        @foreach (var theme in ViewBag.themes)
        {
          <li class="col-xs-12 col-sm-5 col-md-3 themebroder">
            <div class="imgbox">
              <img alt="@theme.ThemeName" src="/theme/@theme.FolderName/@theme.ScreenShot"/>
              <span class="themename">@theme.ThemeName</span>
            </div>
            <div style="width: 100%;margin-top: 10px">
              <div class="col-xs-8 col-sm-8 col-md-8" style="text-align: center">
                @switch (@theme.ThemeType)
                {
                  case ThemeUtil.PcTheme:
                    <text>电脑版主题</text>
                    break;
                  case ThemeUtil.MobileTheme:
                    <text>手机版主题</text>
                    break;
                  case ThemeUtil.AdaptiveTheme:
                    <text>自适应主题</text>
                    break;
                  default:
                    <text>电脑版主题</text>
                    break;
                }
              </div>
              <div class="col-xs-4 col-sm-4 col-md-4">
                @if (theme.IsUsing)
                {
                  <button class="btn btn-default" disabled="">已启用</button>
                }
                else
                {
                  <button class="btn btn-primary" onclick="selectTheme('@theme.FolderName', @theme.ThemeType)">启用</button>
                }
              </div>
            </div>
          </li>
        }
      </ul>
    </div>
  </div>
</div>
@section style
{
   <link rel="stylesheet" href="@Url.ContentAdmin("js/jconfirm/jquery-confirm.min.css")">
  <style>
        .imgbox{
            position: relative;
            overflow: hidden;
            padding-bottom: 75%;/*重要属性*/
        }
        .imgbox img{
            width: 100%;
            position: absolute;
        }
        .themename{
          position: absolute;
          bottom: 0; 
          left: 0;
          background-color: #0b2e13;
          color: #FFFFFF;
          width: 100%;
          text-align: center
        }
        .themebroder {
          padding-bottom: 16px;
        }
    </style>
}

@section script
{
  <script src="@Url.ContentAdmin("js/jconfirm/jquery-confirm.min.js")"></script>
  <script>
      function getThemeName(themeType) {
          if (themeType === 2) {
              return '手机版主题'
          }
          return '电脑版主题'
      }

      function selectTheme(themeName, themeType) {
          $.alert({
              title: '切换主题',
              content: '是否将' + getThemeName(themeType) + '主题切换为' + themeName + "？",
              buttons: {
                  confirm: {
                      text: '是',
                      btnClass: 'btn-primary',
                      action: function() {
                          $.ajax({url: '@Url.Action("ChangeTheme")', type: 'post', data: {themeName: themeName, themeType: themeType},
                              success: function(result,status) {
                                  if (result.code === 200){
                                      window.location.reload()
                                  }else {
                                      $.alert(result.msg)
                                  }
                              }, error: function(xhr,status,error) {
                  
                              }})
                      }
                  },
                  cancel: {
                      text: '否'
                  }
              }
          })
      }
  </script>
}