<script setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {updateLogInterface} from '@/api/modules/updateLogApi';
import LogSetDialog from './components/LogSetDialog.vue';

let isLogSetShow = ref(false)

let tableData = ref([])
const tableColumns = [
    {label: '更新内容',key: 'Content'},
    {label: '版本号',key: 'Version'},
    {label: '更新日期',key: 'UpdateDate',sort:true}
]
let tableParams = reactive({
    searchText:'',
    pageNo:1,
    pageSize:10,
    total:0,
    sortType:0

})
function getTableData(){
    updateLogInterface.getLogList({
        Keyword:tableParams.searchText,
        SortType:tableParams.sortType,
        CurrentIndex:tableParams.pageNo,
        PageSize:tableParams.pageSize
    }).then(res=>{
        if(res.Ret!==200) return 
        tableData.value = res.Data.List||[]
        tableParams.total = res.Data.Paging.Totals||0
    })
}

getTableData()

function sortChangeHandle(params){
    tableParams.sortType = params.order === 'ascending' ? 1 :params.order === 'descending' ? 2 : 0
    handleChangePage(1)
}

let logInfo = ref({})
function handleEditLog(data){
    logInfo.value = data
    isLogSetShow.value = true
}
function handleDeleteLog(row){
    ElMessageBox.confirm('删除操作不可恢复，确认删除吗?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        updateLogInterface.deleteLogData({Id:row.Id}).then(res=>{
            if(res.Ret!==200) return
            ElMessage.success('删除成功')
            getTableData()
        })
    }).catch(() => {});
}

function handleChangePage(page){
    tableParams.pageNo = page
    getTableData()
}

async function saveLog(form){
    const res = form.Id
                ?await updateLogInterface.editLogData(form)
                :await updateLogInterface.addLogData(form)
    if(res.Ret!==200) return 
    ElMessage.success(`${form.Id?'编辑':'添加'}成功`)
    handleChangePage(1)
    isLogSetShow.value = false
}

</script>

<template>
    <div class="update-log-manage-wrap">
        <div class="top-wrap">
            <el-button type="primary" @click="handleEditLog({})">添加日志</el-button>
            <el-input 
                v-model="tableParams.searchText"
                :prefix-icon="Search" 
                @input="getTableData"
                placeholder="输入更新内容检索" clearable></el-input>
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" 
                @sort-change="sortChangeHandle" border>
                <el-table-column 
                    v-for="item in tableColumns" :key="item.key"
                    :label="item.label" :sortable="item.sort" 
                    align="center"
                    >
                    <template #default="{row}">
                        <div v-if="item.key==='Content'" v-html="row[item.key]"></div>
                        <span v-else>{{ row[item.key] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{row}">
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleEditLog(row)">编辑</el-link>
                        <el-link :underline="false" type="danger" @click="handleDeleteLog(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                layout="prev,pager,next,total" 
                background
                :current-page="tableParams.pageNo"
                @current-change="handleChangePage"
                :page-size="tableParams.pageSize" 
                :total="tableParams.total"
                >
            </el-pagination>
        </div>
    </div>
    <LogSetDialog 
        :isShow="isLogSetShow"
        :logInfo="logInfo"
        @saveLog="saveLog"
        @closeDia="isLogSetShow = false"
    />
</template>

<style scoped lang="scss">
.update-log-manage-wrap{
    padding:30px;
    background-color: #fff;
    border-radius: 4px;
    .top-wrap{
        display: flex;
        justify-content: space-between;
        .el-date-editor{
            margin-left: auto;
        }
        .el-input{
            margin-left:30px;
            width:420px;
        }
    }
    .table-wrap{
        margin-top: 30px;
        .el-pagination{
            margin-top: 30px;
            justify-content: flex-end;
        }
    }
}
</style>
