<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择相册</title>
    <link rel="stylesheet" href="css/albumlist.css">
</head>
<body>
<div id="root" v-cloak>
    <div id="top-mid-container">
        <div id="top-container">
            <div id="top-left">
                <button id="refresh" @click="refresh"></button>
            </div>
            <div id="top-right">
                <input id="searchbar" type="search" v-model="searchCode" placeholder="请输入协同修图码" @keyup.13="search"/>
                <button id="search" :disabled="!searchCode.length == 6" @click="search">搜索</button>
            </div>
        </div>
    </div>

    <div id="mid-container">
        <div id="list-header">
            <p style="width:36px;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: 0px">选择</p>
            <div style="width:1px;height:24px;border:none;background-color: #eaeaea;border: none"></div>
            <p style="width:422px;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: 0px">相册名称</p>
            <div style="width:1px;height:24px;border:none;background-color: #eaeaea;border: none"></div>
            <p style="width:234px;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: 0px">创建时间</p>
        </div>
        <div v-if="albums.length > 0" id="album-list" ref="albumlist">
            <div v-for="(album, index) in albums">
                <label class="album-item" @click="select(index, album)">
                    <input class="album-choose" type="checkbox" v-model="album.choosen" :disabled="album.noPermission"/>
                    <p class="album-name" :style="{color: album.noPermission ? '#999' : '#333'}">{{album.name}}</p>
                    <p class="album-time" :style="{color: album.noPermission ? '#999' : '#333'}">{{album.date_time ? formatDtt('yyyy-MM-dd hh:mm', new Date(Date.parse(album.date_time))) : '无'}}</p>
                </label>
            </div>
        </div>
        <div v-if="albums.length == 0" id="album-empty"
             style="display: flex; align-items: center; justify-content: center">
            {{loading ? "加载中..." : "没有查询到相关结果"}}
        </div>
    </div>


    <div id="bottom-container" v-if="currentSelectAlbum">
        <p style="margin-left:16px;width:auto;height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400;
        color:rgba(153,153,153,1);line-height:20px;">已选择{{choosedAlbums.length}}个相册, 点击"确定"即可开始处理。</p>
        <button id="cancel" class="border-button" @click="cancel">取消</button>
        <button id="confirm" :disabled="!currentSelectAlbum" class="border-button" @click="confirm">确定</button>
    </div>
</div>

<div>
    <script rel="script" src="js/axios.js"></script>
    <script rel="script" src="js/vue.js"></script>
    <script rel="script" src="js/albumlist.js"></script>
</div>
</body>
</html>