<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <a-layout>
        <a-layout-content
                :style="{ background: '#fff' ,padding: '24px', margin: 0,
            minHeight: '280px' }">
            <a-table
                    :columns="columns"
                    :row-key="record => record.id"
                    :data-source="ebooks"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange"
            >
                <template #cover="{ text: cover }">
                    <img v-if="cover" :src="cover" alt="avatar"/>
                </template>
                <template v-slot:action="{ text, record }">
                    <a-space size="small">
                        <a-button type="primary" @click="edit(record)">
                        <!--<a-button type="primary" @click="edit">-->
                            编辑
                        </a-button>
                        <a-button type="danger">
                            删除
                        </a-button>
                    </a-space>
                </template>
            </a-table>
        </a-layout-content>
    </a-layout>

    <a-modal
        title="电子书表单"
        v-model:visible="modalVisible"
        :confirm-loading="modalLoading"
        @ok="handleModalOk"
        >
        <a-form :model="ebook" :label-col="{span:6}">
            <a-form-item label="封面">
                <a-input v-model:value="ebook.cover"/>
            </a-form-item>
            <a-form-item label="名称">
                <a-input v-model:value="ebook.name"/>
            </a-form-item>
            <a-form-item label="分类一">
                <a-input v-model:value="ebook.category1Id"/>
            </a-form-item>
            <a-form-item label="分类二">
                <a-input v-model:value="ebook.category2Id"/>
            </a-form-item>
            <a-form-item label="描述">
                <a-input v-model:value="ebook.desc" type="text"/>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    export default defineComponent({name: 'AdminEbook', setup() {
        const ebooks = ref();
        const pagination = ref({
            current: 1,
            pageSize: 4,
            total: 0});
        
        const loading = ref(false);
        const columns = [
         {
            title: '封面',
            dataIndex: 'cover',
            slots: { customRender: 'cover'}
         },
        {
         title: '名称',
         dataIndex: 'name'
        },
        {
         title: '分类一',
         key: 'category1Id',
         dataIndex: 'category1Id'
        },
        {
         title: '分类二',
         dataIndex: 'category2Id'
        },
        {
         title: '文档数',
         dataIndex: 'docCount'
        },
        {
         title: '阅读数',
         dataIndex: 'viewCount'
        },
        {
         title: '点赞数',
         dataIndex: 'voteCount'
        },
        {
         title: 'Action',
         key: 'action',
          slots: {
          customRender: 'action'}
        }
    ];
        
     /**
         数据查询
         **/
     const handleQuery = (p: any) => {
            loading.value = true;
            axios.get("/ebook/list", {
                params:p
            }).then((response) => {
                loading.value = false;
                
                const data = response.data;
                ebooks.value = data.content.list;
                 // 重置分页按钮
                pagination.value.current = p.page;
                pagination.value.total = data.content.total;
            });
        };
        
         /**
             * 表格点击页码时触发
          */
      const handleTableChange = (pagination: any) => {
          console.log("看看自带的分页参数都有啥：" + pagination);
          handleQuery({
            page: pagination.current,
            size: pagination.pageSize
        });
       };

      // -----表单--------
       const ebook = ref({});
       const modalVisible = ref(false);
       const modalLoading = ref(false);
       const handleModalOk = () =>{
           setTimeout(()=>{
               modalVisible.value = false;
               modalLoading.value = false;
           },2000)
       }

       // 编辑
       const edit = (record: any) =>{
           modalVisible.value = true;
           ebook.value = record
       }

       onMounted(() => {
          handleQuery({
              page: 1, // 参数与PageReq中的变量名一致才行
              size: pagination.value.pageSize
          });
       });

       return {
       ebooks,
       pagination,
       columns,
       loading,
       handleTableChange,

       edit,

       modalVisible,
       modalLoading,
       handleModalOk
    }
    }
    })
    ;
    </script>

<style scoped>
    img {
        width: 50px;
        height: 50px;
    }
</style>