<template>
    <div class="store-page">
        <Breadcrumb />

        <a-card title="趣选书 · 书单查询" class="card">
            <div class="userLogin">
                <a-form :model="form" size="large" class="login-form">
                    <a-form-item field="username" label="用户名">
                        <a-input v-model="form.username" :style="{ width: '320px' }" placeholder="请输入趣选书账户" allow-clear>
                            <template #prefix>
                                <icon-user />
                            </template>
                        </a-input>
                        <template #extra>
                            <div>默认账号：手机号/身份证号/ctbu+学号</div>
                        </template>
                    </a-form-item>
                    <a-form-item field="password" label="密码">
                        <a-input-password v-model="form.password" placeholder="请输入趣选书密码" :style="{ width: '320px' }"
                            :defaultVisibility="false" allow-clear>
                            <template #prefix>
                                <icon-lock />
                            </template>
                        </a-input-password>
                        <!-- <template #extra>
                            <div>已为您填充默认密码：ctbu123456</div>
                        </template> -->
                    </a-form-item>
                    <a-form-item>
                        <a-space>
                            <a-button @click="getBookList" :loading="loading">查询</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>

                <a-divider direction="vertical" class="divider"/>

                <div class="userInfo">
                    <a-avatar :style="{ backgroundColor: '#FE82A5' }" :size="70">
                        <IconUser />
                    </a-avatar>

                    <div class="username">{{ userInfo.userName ?? '待查询' }}</div>
                    <div class="termName">{{ userInfo.univName ?? '' }} - {{ userInfo.termName ?? '' }}</div>
                </div>
            </div>

            <a-alert v-if="notice" style="margin-top: 15px;">{{ notice }}</a-alert>

            <a-watermark :content="['RunForge', 'xxoo365.top']" :alpha="0.5">
                <a-table :bordered="false" :data="data" stripe hoverable :pagination="false" column-resizable class="table"
                    :loading="loading" :columns="columns">
                    <template #imgUrl="{ record }">
                        <a-image width="50" height="50" fit="contain" v-if="record.imgUrl" :src="record.imgUrl" />
                        <a-avatar shape="square" :size="50" :style="{ backgroundColor: 'rgba(0,0,0,0.25)' }"
                            v-else-if="!bookInfo[record.isbn]?.img">
                            <icon-book />
                        </a-avatar>
                        <a-image width="50" height="50" fit="contain" v-else :src="bookInfo[record.isbn]?.img" />
                    </template>
                    <template #textbookPrice="{ record }">
                        <span class="oldPrice" v-if="record.textbookPrice"><del>￥{{ record.textbookPrice }}</del></span>
                        ￥{{
                            record.textbookDiscountedPrice ?? record.totalDiscountedPrice }}
                    </template>
                    <template #crouseName="{ record }">
                        {{ record.crouseName }}({{ record.courseType }})
                    </template>
                    <template #optional="{ record }">
                        <a-button @click="showDetail(record.isbn)">查看详情</a-button>
                    </template>
                </a-table>
            </a-watermark>

            <div class="total">
                共找到 {{ data.length }} 本书籍
            </div>
        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive, h } from 'vue'
import { GetBookList, GetBookImg } from '@/api/qxs'
import { Notification, Modal, Button } from '@arco-design/web-vue'
import { useRoute } from 'vue-router'
import { getNotice } from '@/utils/util'

const notice = ref('')

const GetNotice = async () => {
  const { path } = useRoute()
  const res = await getNotice(path)
  notice.value = res
}

GetNotice()

const form = reactive({
    username: '',
    password: '',
})

const loading = ref(false)
const data = ref([])
const bookInfo = ref({})
const userInfo = ref({})

const columns = [
    {
        title: '封面',
        slotName: 'imgUrl',
    }, {
        title: '书名',
        dataIndex: 'title',
    }, {
        title: '出版社',
        dataIndex: 'pressName',
    }, {
        title: '作者',
        dataIndex: 'author',
    }, {
        title: 'ISBN号',
        dataIndex: 'isbn',
    }, {
        title: '定价',
        slotName: 'textbookPrice',
    }, {
        title: '课程名称',
        dataIndex: 'courseName',
    }, {
        title: '任课教师',
        dataIndex: 'multiTeacherName',
    }, {
        title: '上课班级',
        dataIndex: 'className',
    }, {
        title: '',
        slotName: 'optional',
    }
]

const showDetail = (isbn) => {
    Modal.info({
        title: '书籍详情',
        content: () => h('div', { class: 'info-modal-content' }, [
            h('div', { style: 'margin-bottom: 10px;' }, `出版日期：${bookInfo.value[isbn].pubdate != '' ? bookInfo.value[isbn].pubdate : '未知'}`),
            h('div', { style: 'margin-bottom: 10px;' }, `书籍简介：${bookInfo.value[isbn].summary != '' ? bookInfo.value[isbn].summary : '暂无简介'}`)
        ])
    })
}

const getBookInfo = async (isbn) => {
    try {
        const res = await GetBookImg({ isbn })
        if (!res || res.code !== 0)
            return console.log(`获取书籍信息失败！${res.msg ?? ''}`)
        bookInfo.value[isbn] = res.data
    } catch (error) {
        console.log(`获取书籍信息失败！${error.message}`)
    }
}

const getBookList = async () => {
    try {
        loading.value = true
        const { username, password } = form
        if (!username || !password)
            return Notification.error({
                title: '请完善趣选书账号信息！'
            })
        const res = await GetBookList({ username, password })
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取书单失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data.bookList || []
        userInfo.value = res.data.userInfo

        data.value.forEach((item) => {
            getBookInfo(item.isbn)
        })
    } catch (error) {
        Notification.error({
            title: '获取书单失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

</script>

<style lang="less" scoped>
.table {
    margin-top: 15px;

    .oldPrice {
        color: #777;
        font-size: 0.8em;
    }
}

.card {
    .userLogin {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        width: 100%;
        margin: 0 auto;

        .login-form {
            flex: 1 1 280px;
            min-width: 0;
            max-width: 100%;

            :deep(.arco-input),
            :deep(.arco-input-wrapper) {
                width: 100% !important;
                max-width: 360px;
            }
        }

        .userInfo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1 1 200px;
            min-width: 0;

            .username {
                margin-top: 10px;
                font-size: 1.6em;
            }

            .termName {
                margin-top: 10px;
                font-size: 1.1em;
            }
        }
    }

    .total {
        text-align: center;
        margin: 15px;
        font-size: 0.8em;
    }
}

@media (max-width: 768px) {
    .divider {
        display: none;
    }
  }
</style>