<template>
    <div class="text-left p-10">
        <el-form inline>
            <el-form-item label="目标选择:">
                <el-select v-model="taskValue" placeholder=" " style="width: 140px">
                    <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类选择:">
                <el-select v-model="errorValue" placeholder=" " style="width: 140px">
                    <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="关键词搜索:">
                <el-input v-model="searchInput" style="width: 220px" placeholder="Search" :prefix-icon="Search" />
            </el-form-item>
            <el-form-item label="时间:">
                <el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
                    end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">批量导出</el-button>
                <el-button type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="40" />
        <el-table-column property="name" label="序号" width="55" />
        <el-table-column property="name" label="目标名称" show-overflow-tooltip />
        <el-table-column property="name" label="标题" show-overflow-tooltip />
        <el-table-column property="name" label="关键字"  show-overflow-tooltip />
        <el-table-column property="name" label="数据分类"  show-overflow-tooltip />
        <el-table-column property="name" label="数据时间" width="200" show-overflow-tooltip />
        <el-table-column property="name" label="记录时间" width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="240">
            <template #default="scope">
                <el-button type="primary" plain @click="handleDetails(scope.row)">
                    编辑
                </el-button>
                <el-button type="success" plain @click="handleDetails(scope.row)">
                    详情
                </el-button>
                <el-button type="danger" plain @click="handleConfirm(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
            @pagination="getData" />
    </div>



</template>

<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { Search } from '@element-plus/icons-vue'
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const sortOptions = [
    {
        value: 'task1',
        label: '基础信息',
    },
    {
        value: 'task2',
        label: '信号信息',
    },
    {
        value: 'task3',
        label: '其他信息',
    },
]
const tableData = ref([
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
    }
])
const pageObj = ref({
    total: 10,
    pageSize: 10,
    pageNo: 1
})
const handleDetails = (row: any) => {
    console.log(row);
}

const handleConfirm = (row: any) => {
    console.log(row);
}

const getData = () => {
    console.log('getData');
}
</script>

<style scoped>
.el-button:focus {
    outline: none;
}
</style>
