<template>
    <div class="center">
        <div class="project">
            <div class="title">
                <div class="info">
                    <img :src="userInfo.avatarUrl" alt="" />
                    <span class="name">{{ userInfo.nickName }}</span>
                </div>
                <div class="logout" @click="logout">Sign out</div>
            </div>
            <div class="list">
                <template v-if="pageList.length">
                    <div class="item" v-for="(item, index) in pageList" :key="index">
                        <div class="logo">
                            <img :src="item.nftCardFaceImage" alt="" />
                        </div>
                        <div class="desc">
                            <div class="name">{{item.nftProjectName}}</div>
                            <div class="font">Sell <span>{{item.sellCount}}/{{item.totalCount}}</span></div>
                            <div class="font">Earnings <span>{{item.earningAmount}} {{item.currencySymbol}}</span></div>
                        </div>
                        <div class="opt">
                            <template v-if="item.publishStatus === 1">
                                <el-button link type="danger" @click="unpublish(item)">Unlist</el-button>
                                <el-button link type="primary" @click="view">View</el-button>
                            </template>
                            <template v-else>
                                <el-button link type="danger" @click="remove(item)">Delete</el-button>
                                <el-button link type="primary" @click="publish(item)">Sell</el-button>
                            </template>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="empty">
                        <img src="../../static/img/icon-empty.svg" alt="" />
                    </div>
                </template>
            </div>
            <div class="add" @click="add">
                <img src="../../static/img/header-add.svg" alt="">
                <span>Add New NFT Collection</span>
            </div>
        </div>
    </div>

    <!-- publish -->
    <div class="publish" v-if="publishDialog">
        <div class="msg">
            <template v-if="publishType === 1">You are going to list the NFT collection</template>
            <template v-else>Do you wish to unlist the NFT collection</template>
        </div>
        <div class="buttons">
            <button @click="hidePublishLayer">Cancel</button>
            <button class="confirm" @click="confirmPublishLayer">Continue</button>
        </div>
    </div>
    <div class="bg" v-if="publishDialog"></div>

    <!-- delete -->
    <div class="publish delete" v-if="deleteDialog">
        <div class="msg">Once deleted, it cannot be restored</div>
        <div class="buttons">
            <button @click="hideDeleteLayer">Cancel</button>
            <button class="confirm" @click="confirmDeleteLayer">Continue</button>
        </div>
    </div>
    <div class="bg" v-if="deleteDialog"></div>

    <div class="feedBack" @click="feedback">
        <a href="mailto:service@cybertogether.net">
            <div class="mail">
                <img src="../../static/img/icon-feedback.svg" alt="" />
            </div>
            <div class="font">Feedback</div>
        </a>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import Api from '../../static/http/api';
import { postRequest } from '../../static/http'
import { getStorage, setStorage, storageKey, removeStorage } from '../../static/utils/storage'
import { Report } from '../../static/report'
import { businessType, pageSource, objectType } from '../../static/report/enum'

const userInfo: any = ref({})
const route = useRoute()
const publishType = ref(0)
const publishItem = ref(null)
const publishDialog = ref(false)

const deleteItem = ref(null)
const deleteDialog = ref(false)

const pageNum = ref(1)
const pageSize = 1000
const pageList = ref([])
const buttonType = {
    publish: 'publish-button',
    delete: 'delete-button',
    unlist: 'unlist-button',
    view: 'view-button',
    feedback: 'feedback-button',
    cancel: 'cancel-button',
    continue: 'continue-button',
}

const logout = () => {
    removeStorage(storageKey.userInfo)
    location.href = `/`
}

const add = () => {
    location.href = `/nft/add`
}

const remove = (item: any) => {
    deleteItem.value = JSON.parse(JSON.stringify(item));
    showDeleteLayer()
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.managerPage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: buttonType.delete,
            }
        }
    })
}

const publish = (item: any) => {
    publishType.value = 1;
    publishItem.value = item;
    showPublishLayer()
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.managerPage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: buttonType.publish,
            }
        }
    })
}

const unpublish = (item: any) => {
    publishType.value = 2;
    publishItem.value = item;
    showPublishLayer()
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.managerPage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: buttonType.unlist,
            }
        }
    })
}

const view = () => {
    let userInfo = getStorage(storageKey.userInfo);
    let nickName = userInfo && userInfo.nickName || '';
    // open
    window.open(`https://twitter.com/${nickName}`);
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.managerPage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: buttonType.view,
            }
        }
    })
}

const feedback = () => {
    // Report
    Report({
        baseInfo: {
            pageSource: pageSource.managerPage,
        },
        params: {
            eventData: {
                businessType: businessType.buttonClick,
                objectType: buttonType.feedback,
            }
        }
    })
}

const getList = () => {
    postRequest(Api.userNftList, {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize
        }
    }).then(res => {
        console.log(333, res)
        let { code, data } = res;
        if (code === 0) {
            pageList.value = data;
        }
    })
}

const hideDeleteLayer = () => {
    deleteDialog.value = false;
}

const showDeleteLayer = () => {
    deleteDialog.value = true;
}

const confirmDeleteLayer = () => {
    postRequest(Api.userNftDel, {
        params: {
            nftProjectId: deleteItem.value.nftProjectId,
        }
    }).then(res => {
        let { code, msg } = res;
        if ( code === 0 ) {
            // filter
            pageList.value.some((item, index) => {
                if (item.nftProjectId === deleteItem.value.nftProjectId) {
                    pageList.value.splice(index, 1);
                    return true;
                }
            })
            ElMessage({
                type: 'success',
                message: 'Delete Success!',
            })
            
        } else {
            ElMessage({
                type: 'error',
                message: msg,
            })
        }
        hideDeleteLayer()
    })
}

const hidePublishLayer = (ifReport = true) => {
    publishDialog.value = false;
    if (publishType.value === 1 && ifReport) {
        // Report
        Report({
            baseInfo: {
                pageSource: pageSource.confirmationPage,
            },
            params: {
                eventData: {
                    businessType: businessType.buttonClick,
                    objectType: buttonType.cancel,
                }
            }
        })
    }
}

const showPublishLayer = () => {
    publishDialog.value = true;
}

const confirmPublishLayer = () => {
    let item = JSON.parse(JSON.stringify(publishItem.value));
    let status = publishType.value === 1 ? 1 : 0;
    // request
    postRequest(Api.userNftSetStatus, {
        params: {
            nftProjectId : item.nftProjectId,
            publishStatus : status
        }
    }).then(res => {
        let { code, msg } = res;
        if ( code === 0 ) {
            // list
            getList()

            ElMessage({
                type: 'success',
                message: publishType.value === 1 ? 'Published Successfully!' : 'We have listed your NFT collection!',
            })
            if (publishType.value === 1) {
                // Report
                Report({
                    baseInfo: {
                        pageSource: pageSource.confirmationPage,
                    },
                    params: {
                        eventData: {
                            businessType: businessType.buttonClick,
                            objectType: buttonType.continue,
                        },
                        extParams: {
                            Publish: 'success'
                        }
                    }
                })
            }
        } else {
            if (code === 5004) {
                ElMessage({
                    type: 'error',
                    message: `You can list at most one NFT collection, unlist one collection to list another.`
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: msg
                })
            }
            if (publishType.value === 1) {
                // Report
                Report({
                    baseInfo: {
                        pageSource: pageSource.confirmationPage,
                    },
                    params: {
                        eventData: {
                            businessType: businessType.buttonClick,
                            objectType: buttonType.continue,
                        },
                        extParams: {
                            Publish: 'fail'
                        }
                    }
                })
            }
        }
        hidePublishLayer(false)
    })
}

onMounted(() => {
    // jump login
    let str = route.query && route.query.params || ''
    if (str) {
        // @ts-ignore
        let params = JSON.parse(atob(str));
        setStorage(storageKey.userInfo, params)
        userInfo.value = params;
    } else {
        userInfo.value = getStorage(storageKey.userInfo);
    }

    nextTick(() => {
        // 获取列表
        getList()
        // Report
        Report({
            baseInfo: {
                pageSource: pageSource.managerPage,
            },
            params: {
                eventData: {
                    businessType: businessType.pageView,
                }
            }
        })
    })
})
</script>

<style lang="less" scoped>
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    --el-font-size-base: 16px;
}
.project {
    width: 800px;
    border-radius: 20px;
    background: #FFFFFF;
    .title {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: inset 0px -1px 0px #EDEDED;
        .info {
            display: flex;
            align-items: center;
            img {
                width: 24px;
                height: 24px;
                overflow: hidden;
                border-radius: 50%;
                margin: 0 8px 0 20px;
            }
            .name {
                color: #919191;
                font-size: 14px;
            }
        }
        .logout {
            color: #FF0000;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            margin-right: 20px;
        }
    }
    .list {
        margin: 20px;
        height: 360px;
        overflow-y: auto;
        .empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .item {
            display: flex;
            align-items: center;
            height: 104px;
            margin-bottom: 20px;
            border-radius: 10px;
            border: 1px solid #EDEDED;
            &:last-child  {
                margin-bottom: unset;
            }
            .logo {
                overflow: hidden;
                width: 70px;
                height: 70px;
                margin: 0 24px;
                border-radius: 50%;
                background-color: #f5f5f5;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .desc {
                flex: 1;
                line-height: 20px;
                .name {
                    color: #000;
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 4px;
                }
                .font {
                    color: #666;
                    font-size: 12px;
                    span {
                        color: #EDA00A;
                    }
                }
            }
            .opt {
                margin-right: 30px;
            }
        }
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        cursor: pointer;
        margin: 0 20px 20px 20px;
        border-radius: 75px;
        background: #F7F9FB;
        img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            vertical-align: middle;
        }
        span {
            color: #1D9BF0;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: -4px;
        }
    }
}

.publish {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 16px;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 300px;
    border-radius: 20px;
    background-color: #FFFFFF;
    .msg {
        padding: 36px 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }
    .buttons {
        display: flex;
        justify-content: space-between;
        button {
            cursor: pointer;
            width: 145px;
            height: 45px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 24px;
            border: 1px solid #D6D6D6;
            &.confirm {
                color: #FFFFFF;
                background: #1D9BF0;
                border: 1px solid #1D9BF0;
            }
        }
    }
    &.delete {
        .confirm {
            background: #FF0000!important;
            border: 1px solid #FF0000!important;
        }
    }
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}

.feedBack {
    position: absolute;
    right: 44px;
    bottom: 88px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    a:link, a:visited {
        color: #A8A8A8;
        text-decoration: none;
    }
    .mail {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
    .font {
        opacity: 0.7;
        color: #A8A8A8;
        letter-spacing: 0.3px;
    }
}
</style>