<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>享像派修图师助手v3.0.1</title>
    <link rel="stylesheet" href="css/main.css">
    <script rel="script">
        var token = window.localStorage.getItem('token');
        if (!token) {
            //需要登录
            var gui = require('nw.gui')
            var win = gui.Window.get()
            gui.Window.open('./index.html', {
                "position": "center",
                "width": 286,
                "height": 412,
                "resizable": false,
                "icon": "static/ic_desktop_start3.png",
                "id": "login"
            }, () => {
                win.close()
            });
        }
    </script>
</head>

<body>
<div id="root" v-cloak>

    <!--最左侧 用户及设置栏-->
    <div id="menu-bar">
        <img id="main-avatar" class="avatar" :src="user.avatar" @click="showUserinfoDialog=true"/>

        <div id="user-info" v-if="showUserinfoDialog">
            <img id="user-avatar" class="avatar" :src="user.avatar"/>

            <p style="width:auto;height:17px;font-size:12px;font-family:PingFangSC-Regular;
            font-weight:400;color:rgba(102,102,102,1);line-height:17px;margin: 8px 0 32px 0">{{user.name}}</p>

            <button id="logout" @click="logout">退出登录</button>
        </div>

        <!--打开客服联系方式弹窗-->
        <div class="menu-btn" style="bottom: 220px;" @click="showContactDialog=true">
            <img src="./static/ic_contact.png" style="width: 24px; height: 24px; margin-bottom: 4px; margin-top: 10px"/>
            <span style="font-size:12px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">客服</span>
        </div>

        <!--指南-->
        <div class="menu-btn" style="bottom: 150px" @click="openGuide">
            <img src="./static/ic_guide.png" style="width: 24px; height: 24px; margin-bottom: 4px; margin-top: 10px"/>
            <span style="font-size:12px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">指南</span>
        </div>

        <div class="menu-btn" style="bottom: 80px" @click="refresh">
            <img src="./static/ic_refresh.png" style="width: 28px; height: 24px; margin-bottom: 4px; margin-top: 10px"/>
            <span style="font-size:12px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">刷新</span>
        </div>

        <div id="contact-dialog" v-if="showContactDialog">
            <span class="small-text" style="margin-top: 20px;">客服微信</span>
            <img style="width: 80px; height: 80px; margin-top: 6px;" src="static/contact_wechat.jpg"/>
            <span class="small-text" style="margin-top: 10px">客服电话</span>
            <span class="small-text" style="margin-top: 8px">400-009-6808</span>
        </div>

        <!--打开菜单页面-->
        <div class="menu-btn" style="bottom: 10px;" @click="openSetting">
            <img src="./static/ic_setting.png" style="width: 24px; height: 24px; margin-bottom: 4px; margin-top: 10px"/>
            <span style="font-size:12px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">设置</span>
        </div>
    </div>

    <!--相册列表栏-->
    <div id="tasklist-bar" v-if="showTaskList">
        <div style="width: 100%; height: 60px; position: relative">
            <p style="width:64px;height:22px;font-size:16px;font-weight:600;color:rgba(51,51,51,1); margin: 20px; display: inline-block;">
                相册列表</p>
            <button class="chooseAlbum" @click="chooseAlbum">添加任务</button>
        </div>

        <div style="flex-basis: 1px; width: 415px; margin: 0 auto; background-color: #e5e5e5"></div>

        <div id="tasklist-container" style="width: 100%; height: 100%; display: flex; flex-direction: column">
            <div id="list-header">
                <p style="width:200px;height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400;
                color:rgba(153,153,153,1);line-height:20px;padding-left: 24px;margin: 10px 0">相册名称</p>

                <p style="width:64px;height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400;
                color:rgba(153,153,153,1);line-height:20px;padding-left: 24px;margin: 10px 0">下载进度</p>

                <p style="width:98px;height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400;
                color:rgba(153,153,153,1);line-height:20px;padding-left: 24px;margin: 10px 0">上传进度</p>

                <div style="width: 415px; height: 1px; position: absolute; bottom: 0; margin: 0 10px; background-color: #e5e5e5"></div>
            </div>

            <div v-if="albums.length > 0" ref="albumlist" style="width: 100%; flex: 1; overflow: scroll">
                <div v-for="(item, index) in albums" @click="updateAlbum(item)" style="width: 415px; height: 56px;
                display: flex; font-size:12px; color:rgba(51,51,51,1); flex-direction: row; align-items: center;margin: 0 10px; position: relative"
                     :style="{backgroundColor: item.id === album.id ? '#E8F1FF' : 'white'}">
                    <p class="album-name">{{item.name}}</p>

                    <p class="album-process" style="flex-basis: 60px; margin-right: 28px; text-align: center">
                        {{item.downloadedNames.size + '/' + item.getWorkPhotos().length}}</p>

                    <p class="album-process" style="flex-basis: 60px; margin-right: 16px; text-align: center">
                        {{item.uploadedNames.size + '/' + (item.allUploadNames.size)}}</p>

                    <img class="quit" src="static/ic_quit.png" style="width: 18px; height: 18px; margin-right: 5px"
                         @click="$event.cancelBubble=true;$event.stopPropagation();quit(index, item);"/>

                    <div style="width: 100%; height: 1px; position: absolute; bottom: 0; background-color: #e5e5e5"></div>
                </div>
            </div>
            <div v-if="albums.length == 0"
                 style="width:100%; height: 100%; display: flex; align-items: center; justify-content: center">
                <img src="static/empty_album.png" style="width: auto; height: auto">
            </div>
        </div>
    </div>

    <!--todo 修改为点击后收起相册列表-->
    <div style="flex-basis: 8px; height: 100%; background-color: #e5e5e5; display: flex; align-items: center" @click="showTaskList = !showTaskList">
        <!--<img :src="showTaskList ? 'static/ic_left.png' : 'static/ic_right.png'"/>-->
        <!--left -->
        <svg v-if="showTaskList" t="1554363606710" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="15187" width="8" height="8">
            <defs></defs>
            <path d="M689 165.1L308.2 493.5c-10.9 9.4-10.9 27.5 0 37L689 858.9c14.2 12.2 35 1.2 35-18.5V183.6c0-19.7-20.8-30.7-35-18.5z" p-id="15188" fill="#333333"></path>
        </svg>
        <!--&lt;!&ndash;right &ndash;&gt;-->
        <svg v-else t="1554363566084" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="14933" width="8" height="8">
            <defs></defs>
            <path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z" p-id="14934" fill="#333333"></path>
        </svg>
    </div>

    <!--右侧工作区-->
    <div id="workspace-container" style="flex: 1; height: 100%; padding: 0px 10px;" v-if="album">
        <!--头部 -->

        <div id="download-panel" v-if="album.showDownloadPanel"
             style="width: 100%; height: 100%; display: flex; flex-direction: column">
            <div id="download-bar" class="panel-bar">
                <div style="display: flex; align-items: center; flex-basis: 300px;">
                    <span style="margin-left: 8px; margin-right: 10px; width:56px;height:20px;font-size:14px;font-family:PingFangSC-Medium;
                font-weight:500;color:rgba(51,51,51,1);line-height:20px;">下载自:</span>

                    <div class="selector-button" style="margin-left: 10px" @click="showDownloadSubSelector=true">
                        {{album.isDownloadAllSub() ? '全部子相册'
                        : (album.getDownloadSubs().length > 1 ? album.getDownloadSubs()[0].name + '等' + album.getDownloadSubs().length + '个子相册'
                        : (album.getDownloadSubs().length > 0 ? album.getDownloadSubs()[0].name : '无'))}}
                        <img style="margin-left: 0px; margin-right: 0px;" src="./static/ic_home_down.png"/>
                    </div>

                    <div class="selector-button" style="margin-left: 20px" @click="showDownloadPhotographerSelector=true"
                         v-if="album.downloadFrom === DOWNLOAD_FROM_ORIGIN">
                        {{album.isDownloadAllPhotographer() ? '全部摄影师'
                        : (album.getDownloadPhotographers().length > 1 ? album.getDownloadPhotographers()[0].nick_name + '等' + album.getDownloadPhotographers().length + '个摄影师'
                        : (album.getDownloadPhotographers().length > 0 ? album.getDownloadPhotographers()[0].nick_name : '无'))}}
                        <img style="margin-left: 0px; margin-right: 0px;" src="./static/ic_home_down.png"/>
                    </div>
                </div>

                <div style="flex: 1; display: flex; justify-content: flex-end">
                    <div class="download-path-container" onmouseover="" style="cursor: pointer;">
                        <span class="download-path-tip" style="color:rgb(55, 136, 255); user-select: text;" @click="openPath(album.albumDownloadPath)" :title="album.albumDownloadPath">
                            <U>{{album.albumDownloadPath}}</U>
                        </span>
                        <span style="height: 17px; width: 60px; text-align: right; font-size: 12px;font-family: PingFangSC-Regular;font-weight: 400;color: rgba(51, 51, 51, 1);line-height: 17px;">
                            下载路径:</span>
                    </div>

                    <div class="download-path-container" onmouseover="" style="cursor: pointer;">
                        <span class="download-path-tip" style="color:rgb(55, 136, 255); user-select: text;" @click="openPath(album.albumUploadPath)" :title="album.albumUploadPath">
                            <U>{{album.albumUploadPath}}</U>
                        </span>
                        <span style="height: 17px;width: 60px; text-align: right; font-size: 12px;font-family: PingFangSC-Regular;font-weight: 400;color: rgba(51, 51, 51, 1);line-height: 17px;">
                            上传路径:</span>
                    </div>
                </div>

                <!--下拉菜单 2. 切换下载来源：子相册，可多选-->
                <div class="selector"
                     style="width: 156px; max-height: 150px; overflow: scroll; position: absolute; top: 56px; left: 80px;"
                     v-if="showDownloadSubSelector">
                    <label class="selector-item" @click="$event.cancelBubble=true;$event.stopPropagation();">
                        <input type="checkbox" @change="album.toggleSelectDownloadAllSub()"
                               v-model="album.downloadAllSub">
                        <span>全部子相册</span>
                        <img :src="album.downloadAllSub ? 'static/_ic_album_selected_16.png' : 'static/ic_unselect_16.png'"
                             style="position: absolute;left: 8px;top: 12px;margin: 0px;padding: 0px;">
                    </label>
                    <label v-for="subalbum in album.subAlbums" class="selector-item"
                           @click="$event.cancelBubble=true;$event.stopPropagation();">
                        <input type="checkbox" v-model="subalbum.download"
                               @change="album.updateDownloadFilter({subalbum: subalbum})">
                        <span>{{subalbum.name}}</span>
                        <img :src="subalbum.download ? 'static/_ic_album_selected_16.png' : 'static/ic_unselect_16.png'"
                             style="position: absolute;left: 8px;top: 12px;margin: 0px;padding: 0px;">
                    </label>
                </div>

                <!--下拉菜单 2. 切换下载来源：摄影师，可多选-->
                <div class="selector"
                     style="width: 156px; max-height: 150px; overflow: scroll; position: absolute; top: 56px; left: 190px;"
                     v-if="showDownloadPhotographerSelector">
                    <label class="selector-item" @click="$event.cancelBubble=true;$event.stopPropagation();">
                        <input type="checkbox" @change="album.toggleSelectDownloadAllPhotographer()"
                               v-model="album.downloadAllPhotographer">
                        <span>全部摄影师</span>
                        <img :src="album.downloadAllPhotographer ? 'static/_ic_album_selected_16.png' : 'static/ic_unselect_16.png'"
                             style="position: absolute;left: 8px;top: 12px;margin: 0px;padding: 0px;">
                    </label>
                    <label v-for="pher in album.photographers" class="selector-item"
                           @click="$event.cancelBubble=true;$event.stopPropagation();">
                        <input type="checkbox" v-model="pher.download"
                               @change="album.updateDownloadFilter({photographer: pher})">
                        <span>{{pher.nick_name}}({{pher.photo_count}}张)</span>
                        <img :src="pher.download ? 'static/_ic_album_selected_16.png' : 'static/ic_unselect_16.png'"
                             style="position: absolute;left: 8px;top: 12px;margin: 0px;padding: 0px;">
                    </label>
                </div>

            </div>

            <div style="flex-basis: 1px; width: 100%; background-color: #e5e5e5"></div>

            <div id="download-ctrl-bar"
                 style="width: 100%; height: 50px; background-color: #fafafa; position: relative; display: flex; align-items: center; flex-direction: row; justify-content: space-between">

                <div style="flex-basis: 200px; height: 100%; display: flex; flex-direction: row; align-items: center">
                    <img style="flex-basis: 20px; height: 18px; margin-left: 8px; margin-right: 12px"
                         src="static/ic_filter.png">

                    <div class="selector-button" style="flex-basis: 60px" @click="showPhotosPublishFilter=true">
                        {{album.photosPublishFilter === PHOTOS_PUBLISH_FILTER.ALL ? '全部' : (album.photosPublishFilter ===
                        PHOTOS_PUBLISH_FILTER.NOT_PUBLISH ? '未发布' : '已发布')}}
                        <img style="margin-left: 10px" src="./static/ic_home_down.png"/>
                    </div>

                    <div class="selector-button" style="flex-basis: 60px" @click="showPhotosHandleFilter=true">
                        {{album.photosHandleFilter === PHOTOS_HANDLE_FILTER.ALL ? '全部' : (album.photosHandleFilter ===
                        PHOTOS_HANDLE_FILTER.NOT_HANDLED ? '未处理' : '已处理')}}
                        <img style="margin-left: 10px" src="./static/ic_home_down.png"/>
                    </div>

                    <!--<div class="selector-button" style="flex-basis: 180px" @click="showDownloadPhotosFilter=true">-->
                        <!--{{album.downloadPhotosFilter === DOWNLOAD_PHOTOS_FILTER.ALL ? '全部' : (album.downloadPhotosFilter ===-->
                        <!--DOWNLOAD_PHOTOS_FILTER.DOWNLOADED ? '已下载' : (-->
                        <!--album.downloadPhotosFilter === DOWNLOAD_PHOTOS_FILTER.WAIT ? '未下载' : '下载失败'))}}-->
                        <!--<img style="margin-left: 10px" src="./static/ic_home_down.png"/>-->
                    <!--</div>-->

                    <!--<div class="selector" style="position: absolute; top: 36px; left: 15px; width: 138px;"-->
                         <!--v-if="showDownloadPhotosFilter">-->
                        <!--<span class="selector-item"-->
                          <!--:style="{'color': album.downloadPhotosFilter===DOWNLOAD_PHOTOS_FILTER.ALL ? '#3786F8' : '#333333'}"-->
                          <!--@click="album.updateDownloadFilter({downloadPhotosFilter: DOWNLOAD_PHOTOS_FILTER.ALL})">全部</span>-->
                        <!---->
                        <!--<span class="selector-item"-->
                              <!--:style="{'color': album.downloadPhotosFilter===DOWNLOAD_PHOTOS_FILTER.WAIT ? '#3786F8' : '#333333'}"-->
                              <!--@click="album.updateDownloadFilter({downloadPhotosFilter: DOWNLOAD_PHOTOS_FILTER.WAIT})">未下载</span>-->
                        <!--<span class="selector-item"-->
                              <!--:style="{'color': album.downloadPhotosFilter===DOWNLOAD_PHOTOS_FILTER.DOWNLOADED ? '#3786F8' : '#333333'}"-->
                              <!--@click="album.updateDownloadFilter({downloadPhotosFilter: DOWNLOAD_PHOTOS_FILTER.DOWNLOADED})">已下载</span>-->
                        <!--<span class="selector-item"-->
                              <!--:style="{'color': album.downloadPhotosFilter===DOWNLOAD_PHOTOS_FILTER.FAILED ? '#3786F8' : '#333333'}"-->
                              <!--@click="album.updateDownloadFilter({downloadPhotosFilter: DOWNLOAD_PHOTOS_FILTER.FAILED})">下载失败</span>-->
                    <!--</div>-->

                    <div class="selector" style="position: absolute; top: 36px; left: 15px; width: 138px;"
                         v-if="showPhotosPublishFilter">
                        <span class="selector-item"
                          :style="{'color': album.photosPublishFilter===PHOTOS_PUBLISH_FILTER.ALL ? '#FF4E28' : '#333333'}"
                          @click="album.updateDownloadFilter({photosPublishFilter: PHOTOS_PUBLISH_FILTER.ALL})">全部</span>
                        <span class="selector-item"
                              :style="{'color': album.photosPublishFilter===PHOTOS_PUBLISH_FILTER.NOT_PUBLISH ? '#FF4E28' : '#333333'}"
                              @click="album.updateDownloadFilter({photosPublishFilter: PHOTOS_PUBLISH_FILTER.NOT_PUBLISH})">未发布</span>
                        <span class="selector-item"
                              :style="{'color': album.photosPublishFilter===PHOTOS_PUBLISH_FILTER.PUBLISHED ? '#FF4E28' : '#333333'}"
                              @click="album.updateDownloadFilter({photosPublishFilter: PHOTOS_PUBLISH_FILTER.PUBLISHED})">已发布</span>
                    </div>

                    <div class="selector" style="position: absolute; top: 36px; left: 120px; width: 138px;"
                         v-if="showPhotosHandleFilter">
                        <span class="selector-item"
                          :style="{'color': album.photosHandleFilter===PHOTOS_HANDLE_FILTER.ALL ? '#FF4E28' : '#333333'}"
                          @click="album.updateDownloadFilter({photosHandleFilter: PHOTOS_HANDLE_FILTER.ALL})">全部</span>
                        <span class="selector-item"
                              :style="{'color': album.photosHandleFilter===PHOTOS_HANDLE_FILTER.NOT_HANDLED ? '#FF4E28' : '#333333'}"
                              @click="album.updateDownloadFilter({photosHandleFilter: PHOTOS_HANDLE_FILTER.NOT_HANDLED})">未处理</span>
                        <span class="selector-item"
                              :style="{'color': album.photosHandleFilter===PHOTOS_HANDLE_FILTER.HANDLED ? '#FF4E28' : '#333333'}"
                              @click="album.updateDownloadFilter({photosHandleFilter: PHOTOS_HANDLE_FILTER.HANDLED})">已处理</span>
                    </div>
                </div>

                <div class="task-process">下载后请勿修改文件名!待上传照片放入上传路径即可上传</div>

                <div style="flex-basis: 250px; height: 100%">
                    <label style="margin: 4px; position: absolute; right: 10px; top: 8px;">
                        <span style="font-size: 12px;font-family: PingFangSC-Regular;font-weight: 400;color: rgb(51, 51, 51);line-height: 17px;margin-right: 35px;">自动上传</span>
                        <input type="checkbox" v-model="album.autoUpload" @change="album.updateRecord()">
                        <img :src="album.autoUpload ? 'static/ic_auto_upload_open.png' : 'static/ic_auto_upload_close.png'"
                             style="position: absolute;right: 0px;top: 0px;margin: 0px;padding: 0px;margin-top: -5px;">
                    </label>

                    <label style="margin: 4px; position: absolute; right: 120px; top: 8px;" title="自动下载为下载原片, 如需下载已修片请手动点击下载">
                        <span style="font-size: 12px;font-family: PingFangSC-Regular;font-weight: 400;color: rgb(51, 51, 51);line-height: 17px;margin-right: 35px;">自动下载</span>
                        <input type="checkbox" v-model="album.autoDownload" @change="album.updateRecord()">
                        <img :src="album.autoDownload ? 'static/ic_auto_upload_open.png' : 'static/ic_auto_upload_close.png'"
                             style="position: absolute;right: 0px;top: 0px;margin: 0px;padding: 0px;margin-top: -5px;">
                    </label>
                </div>
            </div>

            <div id="photos-container">
                <div class="empty-div" v-if="album.filteredDownloadPhotos.length === 0 && album.uploadFiles.length === 0">
                    <!--<img style="width: 284px; height: 273px; margin: 0 auto;" src="./static/empty_img.png">-->
                    <p class="tip-text" style="width: 310px">{{album.originPhotos.length === 0 ? '暂无可同步照片' : '无筛选结果'}}</p>
                </div>

                <div style="flex: 1; height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; width: 100%" v-else>
                    <div style="width: 100%; display: flex; padding: 4px; flex-wrap: wrap; margin-bottom: 50px;">
                        <div v-for="photo in album.filteredDownloadPhotos" class="photos-item">
                            <div class="photo-img" style="position: relative">
                                <img class="photo-img"
                                     v-lazy="(photo.retouched_info && photo.retouched_info.url_thumbnail) ? photo.retouched_info.url_thumbnail : photo.thumbnail"
                                     :key="(photo.retouched_info && photo.retouched_info.url_thumbnail) ? photo.retouched_info.url_thumbnail : photo.thumbnail"/>
                                <div style="background: rgba(0,0,0,0.6); position: absolute; top: 0px; left: 0px; width: 130px; height: 130px;"
                                        v-if="photo.uploadPhoto"></div>
                                <span v-if="photo.uploadPhoto"
                                      style="font-size: 12px; position: absolute; top: 49px; width: 130px; text-align: center; color: white;">检测到图片改动</span>
                                <br>
                                <span style="font-size: 12px; position: absolute; top: 68px; width: 130px; text-align: center; color: white;"
                                      v-if="photo.uploadPhoto && (album.autoUpload && photo.uploadPhoto.status !== UPLOADSTATUS.FAIL) || photo.uploadPhoto.status === UPLOADSTATUS.UPLOADING">
                                    上传中</span>
                                <span v-if="photo.uploadPhoto && (!album.autoUpload || photo.uploadPhoto.status === UPLOADSTATUS.FAIL) && photo.uploadPhoto.status !== UPLOADSTATUS.UPLOADING"
                                      class="upload-btn" onmouseover="" style="cursor: pointer;"
                                      @click="album.manualUpload(photo)">
                                    <u>点击上传</u>
                                </span>
                                <span class="photo-name">{{photo.file_name.length > 15 ? (photo.file_name.substr(0, 4) + '...' + photo.file_name.substr(photo.file_name.length - 8, photo.file_name.length)) : photo.file_name}}</span>
                                <div style="width: 100%; height: 20px; position: absolute; top: 0px;">
                                    <!--未发布状态下如果没有已修片，则是未发布状态，如果有已修片 是待重修状态-->
                                    <span class="photo-status-tag" style="left: 0px; background: rgba(0,0,0,0.6);" v-if="photo.view_version === 'NONE'">
                                        {{ (photo.retouched_info && photo.retouched_info.url_thumbnail) ? '待重修' : '未发布'}}
                                    </span>
                                    <span class="photo-status-tag" style="right: 0"
                                          :style="{'background': photo.isHandled ? 'rgba(6,183,76,0.6)' : (photo.status === DOWNLOADSTATUS.FAIL ? 'rgba(255,78,40,0.6)' : 'rgba(55, 136, 255, 0.6)')}"
                                          v-if="photo.status !== DOWNLOADSTATUS.WAITTING || photo.isHandled">
                                        {{photo.isHandled ? '已处理'
                                        : (photo.status === DOWNLOADSTATUS.FAIL ? '下载失败'
                                        : (photo.status === DOWNLOADSTATUS.DOWNLOADING ? '下载中'
                                        : '已下载'))}}
                                    </span>
                                </div>
                            </div>
                            <div style="width: 100%; height: 28px; display: flex">
                                <button class="photo-oper-btn" @click="$event.cancelBubble=true;$event.stopPropagation();album.publish(photo)" :disabled="photo.object_type !== 'PHOTO'" v-if="photo.view_version === 'NONE'">发布</button>
                                <button class="photo-oper-btn" @click="album.delete(photo)" v-else>取消发布</button>
                                <div style="width: 1px; height: 100%; background-color: #e5e5e5"></div>
                                <button class="photo-oper-btn" @click="$event.cancelBubble=true;$event.stopPropagation();album.chooseVersionToDownload(photo);">下载</button>
                                <div style="width: 1px; height: 100%; background-color: #e5e5e5"></div>
                            </div>
                            <div class="selector" style="position: absolute; top: 154px; left: 65px; width: 84px; height: 50px" v-if="photo.showVersionSelector">
                                <span class="selector-item" style="color: #333333; margin: 0 8px; line-height: 25px; height: 25px"
                                      @click="album.manualDownload(photo, 0)">下载原片</span>
                                <div style="width: 100%; height: 1px; background-color: #e5e5e5"></div>
                                <span class="selector-item" style="color: #333333; margin: 0 8px; line-height: 25px; height: 25px"
                                      @click="album.manualDownload(photo, 1)">下载已修片</span>
                            </div>
                            <div class="selector" style="position: absolute; top: 154px; left: 1px; width: 84px; height: 50px" v-if="photo.showPublishVersionSelector">
                                <span class="selector-item" style="color: #333333; margin: 0 8px; line-height: 25px; height: 25px"
                                      @click="album.realPublish(photo, 0)">发布原片</span>
                                <div style="width: 100%; height: 1px; background-color: #e5e5e5"></div>
                                <span class="selector-item" style="color: #333333; margin: 0 8px; line-height: 25px; height: 25px"
                                      @click="album.realPublish(photo, 1)">发布已修片</span>
                            </div>
                        </div>

                        <!-- 检测到的新待上传照片, 将作为原片上传 -->
                        <div v-for="photo in album.filteredUploadPhotos" class="photos-item">
                            <div class="photo-img" style="position: relative">
                                <img class="photo-img" v-lazy="photo.thumbnail" :key="photo.thumbnail"/>
                                <div style="background: rgba(0,0,0,0.6); position: absolute; top: 0px; left: 0px; width: 130px; height: 130px;" v-if="photo.status !== UPLOADSTATUS.UPLOADED"></div>
                                <span style="font-size: 12px; position: absolute; top: 49px; width: 130px; text-align: center; color: white;" v-if="photo.status !== UPLOADSTATUS.UPLOADED">
                                    检测到新照片
                                </span>
                                <br>
                                <span style="font-size: 12px; position: absolute; top: 68px; width: 130px; text-align: center; color: white;"
                                        v-if="(album.autoUpload || photo.status === UPLOADSTATUS.UPLOADING) && photo.status !== UPLOADSTATUS.FAIL && photo.subtask_id && photo.status !== UPLOADSTATUS.UPLOADED">上传中</span>
                                <span v-if="(!album.autoUpload && photo.status !== UPLOADSTATUS.UPLOADING) || photo.status === UPLOADSTATUS.FAIL || photo.subtask_id === ''"
                                        style="font-size: 12px; position: absolute; top: 68px; width: 130px; text-align: center; color: white; cursor: pointer;" onmouseover=""
                                         @click="$event.cancelBubble=true;$event.stopPropagation();album.manualUpload(photo);"><u>{{photo.subtask_id ? '点击' : '选择子相册'}}上传</u></span>
                                <!-- 选择子相册上传 -->
                                <div class="selector" style="position: absolute; top: 84px; left: 26px; width: 84px; height: auto; max-height: 100px; overflow-y: scroll;" v-if="photo.showSubSelector">
                                    <span v-for="subalbum in album.subAlbums" class="selector-item" style="color: #333333; margin: 0 8px; line-height: 25px;height: 25px; white-space: nowrap;"
                                          @click="photo.subtask_id = subalbum.id;photo.status = UPLOADSTATUS.WAITTING; album.manualUpload(photo)">{{subalbum.name}}</span>
                                </div>

                                <span class="photo-name">{{photo.name.length > 15 ? (photo.name.substr(0, 4) + '...' + photo.name.substr(photo.name.length - 8, photo.name.length)) : photo.name}}</span>
                                <div style="width: 100%; height: 20px; position: absolute; top: 0px;">
                                    <span class="photo-status-tag" style="left: 0px; background: rgba(0,0,0,0.6);" v-if="photo.status !== UPLOADSTATUS.UPLOADED">未发布</span>
                                    <!--新照片肯定是未上传状态-->
                                    <span class="photo-status-tag" style="right: 0; background: rgba(6,183,76,0.6);"
                                          v-if="photo.status === UPLOADSTATUS.UPLOADED">已处理</span>
                                </div>
                            </div>
                            <div style="width: 100%; height: 28px; display: flex">
                                <button class="photo-oper-btn" disabled v-if="photo.view_version === 'NONE'">发布</button>
                                <button class="photo-oper-btn" disabled v-else>取消发布</button>
                                <div style="width: 1px; height: 100%; background-color: #e5e5e5"></div>
                                <button class="photo-oper-btn" disabled>下载</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div style="display: none; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6)"
         :style="{'display': shouldShowGuid ? 'block' : 'none'}">
        <div v-if="splashStep===1" style="position: absolute; left: 318px; top: 4px; ">
            <img src="static/pic_step1.png">
        </div>

        <div v-if="splashStep===2" style="position: absolute; left: 500px; top: 6px; ">
            <img src="static/pic_step2.png">
        </div>

        <div v-if="splashStep===3" style="position: absolute; left: 484px; top: 74px;">
            <img src="static/pic_step3.png">
        </div>

        <div v-if="splashStep===4" style="position: absolute; right: 10px; top: 65px; ">
            <img src="static/pic_step4.png">
        </div>

        <div v-if="splashStep===5" style="position: absolute; right: 0px; top: 0px;">
            <img src="static/pic_step5.png">
        </div>

        <div v-if="splashStep===6" style="position: absolute; bottom: 0px; left: 0px;">
            <img src="static/pic_step6.png">
        </div>
    </div>

    <div v-if="hasNewVersion"
         style="position: absolute; width: 100%; height: 100%; display: flex;
         align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6)">
        <div style="margin: 0; border-radius: 3px; width: 300px; min-height: 120px; background-color: #ececec; position: relative; padding: 20px">
            <p style="height: 20px; top: 16px; left: 104px; padding: 0; margin: 0; font-size: 14px;
        font-family:PingFangSC-Regular;color: #333333;" >检测到了新版本:{{versionName}}</p>
            <span style="width: 400px; top: 40px; left: 104px; padding: 0; margin: 0; font-size: 12px;
        font-family:PingFangSC-Regular;color: #333333; white-space: pre-wrap" v-html="versionRemarks"></span>
            <button class="blue-btn" style="position: absolute; right: 20px; bottom: 20px" @click="openInBrowser(versionUrl)" >去更新</button>
        </div>
    </div>

    <div v-if="toast"
         style="position: absolute; width: 80%; height: 50px; left: 10%; right: 10%; bottom: 20px; display: flex; align-items: center; justify-content: center">
        <span style="background:rgba(55,134,248,1);box-shadow:0px 1px 8px 0px rgba(0,0,0,0.5);border-radius:4px; padding: 15px 10px 15px 10px;
        font-size:14px;font-family:PingFangSC-Medium;font-weight:500;color:rgba(255,255,255,1);">{{toast}}</span>
    </div>
</div>

<div>
    <script rel="script" src="js/qiniu.min.js"></script>
    <script rel="script" src="js/axios.js"></script>
    <script rel="script" src="js/vue.js"></script>
    <script rel="script" src="js/vue-lazyload.js"></script>
    <script rel="script" src="js/Buffer.js"></script>
    <script rel="script" src="js/ExifImage.js"></script>
    <script rel="script" src="js/main.js"></script>
</div>
</body>
</html>