<template>
    <headerTop @search="searchFn" @reset="resetFn" @sort="sortFn" @add="addFn"></headerTop>
    <addCom ref="addComRef"></addCom>
    <el-card shadow="always" class="content_body_row">
        <div class="content_body_table">
            <el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
                :max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 48px)'"
                :height="'calc(100vh - 72px - 48px - 65px - 12px - 60px  - 48px)'">
                <el-table-column type="index" width="72" label="序号" />
                <el-table-column prop="date" label="标题" min-width="150" />
                <el-table-column prop="name" label="轮播图" min-width="120" />
                <el-table-column prop="state" label="跳转页面" min-width="120" />
                <el-table-column prop="city" label="是否启用" min-width="320" />
                <el-table-column prop="address" label="创建人" min-width="400" />
                <el-table-column prop="zip" label="创建日期" min-width="120" />
                <el-table-column prop="zip" label="操作" align="center" min-width="180">

                    <template #default="scope">
                        <el-button type="primary" size="small" @click.prevent="editRowFn(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" size="small" @click.prevent="deleteRowFn(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paination_out">
                <Pagination :currentPage="paginationInfo.currentPage" :pageSize="paginationInfo.pageSize"
                    @sendPage="getPageFn"></Pagination>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue"
import { ElConfirmBeforeOpert } from "utils/elementCom"
const addComRef = ref()
const paginationInfo = reactive({
    currentPage: 1,
    pageSize: 15
})
const tableData = [
    {
        v_id: '1',
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        v_id: '2',
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        v_id: '3',
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        v_id: '4',
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        v_id: '5',
        date: '2016-05-08',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },

]

let tableListInfo = reactive({
    list: tableData
})


const editRowFn = (row: any) => {
    addComRef.value.edit({
        a: "111"
    })

}

const deleteItem = (row: any) => {
    const itemID = row.v_id
    console.log("ITEMid", row)
}

const deleteRowFn = (row: any) => {
    ElConfirmBeforeOpert(
        '操作确认',
        '是否确定删除数据？',
        deleteItem,
        '确定',
        '取消',
        row
    )

}

const searchFn = () => {

}

const resetFn = () => {

}

const sortFn = () => {

}

const addFn = () => {
    addComRef.value.open({
        a: "111"
    })
}
const getPageFn = (val: any) => {
    paginationInfo.currentPage = val.currentPage
    paginationInfo.pageSize = val.pageSize
    initTableList()
}

const initTableList = () => {

}


</script>

<style scoped lang="scss"></style>
