<template>
    <el-row :span="24">
        <el-col :span="18">
            <div class="mt-4">
                <el-input v-model="input3" placeholder="查询事务" class="input-with-select">
                    <template #prepend>
                        <el-select v-model="select" placeholder="查询方式">
                            <el-option label="事务编号" value="1" />
                            <el-option label="事务名称" value="2" />
                            <el-option label="日期" value="3" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button>查询</el-button>
                    </template>
                </el-input>
            </div>
        </el-col>

        <el-col :span="4">
            <el-button type="warning" round>待审批</el-button>
            <el-button type="success" round>已审批</el-button>
        </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="事务编号" prop="id" />

        <el-table-column label="事务名称" prop="title" />

        <el-table-column label="事务类型" prop="typeId" />

        <el-table-column label="申请者" prop="applicantId" />

        <el-table-column label="日期" prop="createTime">
            <template #default="scope">
                {{ format(scope.row.createTime) }}
            </template>
        </el-table-column>

        <el-table-column label="操作" key="slot" width="240">
            <template #default="scope">
                <el-button size="small" type="text" @click="handleYes(scope.row)"
                    >具体内容
                </el-button>

                <el-button size="small" type="success" @click="handleYes(scope.row)"
                    >同意
                </el-button>

                <el-button size="small" type="danger" @click="handleNo(scope.row)">
                    驳回
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-divider :data="labelData">
        <div class="block">
            <el-pagination
                style="color: #888888"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:current-page="currentPage3"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000"
            >
            </el-pagination>
        </div>
    </el-divider>
</template>

<script>
import request from '@/services'
import 'element-plus/theme-chalk/index.css'

export default {
    data() {
        return {
            tableData: [
                {
                    id: '',
                    title: '',
                    content: '',
                    type_id: '',
                    status: '',
                    applicant_id: '',
                    inspector_id: '',
                    create_time: '',
                    inspect_time: '',
                    priority: '',
                    modify_time: '',
                    origin_id: '',
                    old: '',
                    deleted: '',
                    version: ''
                }
            ],
            //     }],

            labelData: [
                {
                    currentPage1: 5,
                    currentPage2: 5,
                    currentPage3: 5,
                    currentPage4: 4
                }
            ]
        }
    },
    methods: {
        handleYes(row) {
            console.log(row)
            request
                .put('http://localhost:8621/affair/yes', row)
                .then((response) => {
                    console.log(response.data)
                    this.getApproed()
                })
                .catch((reportError) => {
                    console.log(reportError)
                })
        },
        handleNo(row) {
            console.log(row)
            request
                .put('http://localhost:8621/affair/no', row)
                .then((response) => {
                    console.log(response.data)
                    this.getApproed()
                })
                .catch((reportError) => {
                    console.log(reportError)
                })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
        },
        getApproed() {
            request
                .get('http://localhost:8621/affair/NotApproved')
                .then((response) => {
                    this.tableData = response.data.data
                    console.log(this.tableData)
                })
                .catch((reportError) => {
                    console.log(reportError)
                })
        },
        format(time) {
            return new Date(time).toLocaleString()
        }
    },
    created() {
        this.getApproed()
        console.log(this.tableData)
    }
}
</script>
<style></style>
