<template>
    <!-- 基础页面 -->
    <div class="app-container">
        <el-form
            v-show="showSearch"
            :model="queryParams"
            ref="queryForm"
            size="small"
            inline
            @submit.native.prevent
        >
            <el-form-item label="" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="数据类型名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                    style="width: 240px"
                />
            </el-form-item>

            <!-- 表单按钮 -->
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button icon="el-icon-refresh" @click="handleReset"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleDialog(null, 'add')"
                    >新增</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            />
        </el-row>

        <el-table
            :data="tableList"
            fit
            highlight-current-row
            style="width: 100%"
            v-loading="isLoading"
            :max-height="650"
            border
        >
            <el-table-column
                type="index"
                width="55"
                label="序号"
                align="center"
                :index="
                    (index) =>
                        (queryParams.pageNum - 1) * queryParams.pageSize +
                        index +
                        1
                "
            />
            <el-table-column
                v-for="(column, index) in tableColumns"
                show-overflow-tooltip
                :key="index"
                :label="column.label"
                :prop="column.prop"
                align="center"
            />
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="300">
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleDialog(row, 'edit')"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(row)"
                        style="color: #f56c6c"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 弹框 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="40%"
            v-loading="isLoading"
        >
            <el-form
                ref="dialogForm"
                :model="dialogForm"
                :rules="dialogRules"
                label-width=""
                size="small"
                @submit.native.prevent
            >
                <el-form-item label="分类名称" prop="classificationName">
                    <el-input
                        v-model="dialogForm.classificationName"
                        placeholder="请输入"
                        clearable
                        maxlength="50"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="维度" prop="dimensionality">
                    <el-select
                        v-model="dialogForm.dimensionality"
                        placeholder="请选择"
                        clearable
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in dimensionalityList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类描述" prop="remark">
                    <el-input
                        v-model="dialogForm.remark"
                        placeholder="请输入"
                        clearable
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        maxlength="200"
                        show-word-limit
                        style="width: 100%"
                    />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="handleSubmit"
                    >提 交</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import {  } from '@/api/'

export default {
    data() {
        return {
            isLoading: false,
            showSearch: true,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: '', // 数据类型名称
            },
            total: 0, // 总条数
            // 表头
            tableColumns: [
                { label: '分类名称', prop: 'classificationName' },
                { label: '维度', prop: 'dimensionality' },
                { label: '更新人', prop: 'updater' },
                { label: '更新时间', prop: 'updateTime' },
                { label: '分类描述', prop: 'remark' },
            ],
            // 表格数据
            tableList: [
                {
                    id: 1,
                    classificationName: '测试',
                    dimensionality: '测试维度',
                    updater: '张三',
                    updateTime: '2024-06-20 12:00:00',
                    remark: '测试数据',
                },
            ],
            isOut: false, // 是否出库
            dialogTitle: '详情',
            dialogVisible: false,
            dialogForm: {
                classificationName: '',
                remark: '',
            },
            dialogRules: {
                classificationName: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        trigger: 'blur',
                    },
                ],
            },
            dimensionalityList: [
                { label: '变电', value: 1 },
                { label: '线路', value: 2 },
                { label: '电缆', value: 3 },
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 查询
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 重置
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.getList()
        },
        // 获取列表
        async getList() {
            console.log('列表-查询', this.queryParams)
            this.isLoading = true
            try {
                const params = {
                    ...this.queryParams,
                }
                console.log('🚀 ~ getList ~ params:', params)
                // const res = await (params)
                // console.log('🚀 ~ 获取列表 ~ res:', res)
                // this.tableList = res.data.rows || []
                // this.total = res.data.total || 0
            } catch (error) {
                console.log('🚀 ~ 获取列表 ~ error:', error)
                this.tableList = []
                this.total = 0
            } finally {
                this.isLoading = false
            }
        },
        handleDialog(row, type) {
            console.log('🚀 ~ handleDialog ~ row:', row)
            this.dialogTitle = type == 'add' ? '新增' : '编辑'
            this.dialogVisible = true
            setTimeout(() => {
                this.$refs.dialogForm.resetFields()
                if (type == 'edit') {
                    this.dialogForm.fileName = row.fileName
                    this.dialogForm.remark = row.remark
                    this.getDialogInfo()
                }
            }, 100)
        },
        // 删除
        handleDelete(row) {
            console.log('删除', row)
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    try {
                        if (this.isLoading) return
                        this.isLoading = true
                        const params = { id: row.id }
                        console.log('🚀 ~ handleDelete ~ params:', params)
                        // const res = await (params)
                        // console.log('🚀 ~ 删除 ~ res:', res)
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                        })
                    } catch (error) {
                        console.log('🚀 ~ handleDelete ~ error:', error)
                    } finally {
                        this.isLoading = false
                        this.getList()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        // 获取弹框信息
        async getDialogInfo() {
            try {
                this.isLoading = true
                const params = { ...this.dialogForm }
                console.log('🚀 ~ getDialogInfo ~ params:', params)
                // const res = await (params)
                // console.log('🚀 ~ 获取弹框信息 ~ res:', res)
            } catch (error) {
                console.log('🚀 ~ 获取弹框信息 ~ error:', error)
            } finally {
                this.isLoading = false
            }
        },
        // 提交弹框
        handleSubmit() {
            this.$refs.dialogForm.validate((valid) => {
                console.log('🚀 ~ handleSubmit ~ valid:', valid)
                if (!valid) return
                try {
                    if (this.isLoading) return
                    this.isLoading = true
                    const params = { ...this.dialogForm }
                    console.log('🚀 ~ handleSubmit ~ params:', params)
                } catch (error) {
                    console.log('🚀 ~ handleSubmit ~ error:', error)
                } finally {
                    this.isLoading = false
                    this.dialogVisible = false
                    this.getList()
                }
            })
        },
        // 导出数据
        formatTime(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            return `${year}${month}${day}_${hours}${minutes}${seconds}`
        },
        // 导出数据
        handleExport() {
            // 提示
            this.$message({
                type: 'warning',
                message: '导出功能开发中，敬请期待！',
            })
            try {
                let fileName = `导出_${this.formatTime(new Date())}.xLsx`
                let url = '/material/backstage/costPush/exportPushCheck'
                const params = { ...this.queryParams }
                console.log('🚀 ~ 导出 ~ params:', params)
                // this.derive(url, params, fileName)
                // this.download(url, params, fileName)
            } catch (error) {
                console.log('导出数据失败', error)
            }
        },
    },
}
</script>

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