<template>
    <div class='app-container'>
        <div class="filter-container">
            <el-input v-model="dictQuery.dictName" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品名称" />
            <el-input v-model="dictQuery.dictCode" clearable class="filter-item" style="width: 200px;"
                placeholder="商品编码" />
            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
            <el-button class="filter-item" type="default" icon="refresh" @click="handleReset">重置</el-button>
        </div>
        <el-button style="margin-bottom: 20px;" type="primary" icon="plus" @click="handleAdd">添加</el-button>
        <el-table :data="dictData" border fit highlight-current-row>
            <el-table-column align="center" label="商品名称" prop="dictName" width="400" />
            <el-table-column align="center" label="商品编码" prop="dictCode" width="400" />
            <el-table-column align="center" label="商品描述" prop="description" />
            <el-table-column align="center" label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" link @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" link @click="handleConfigure">商品配置</el-button>
                    <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加修改 -->
        <el-dialog v-model="dictVisible" :title="dictTitle" width="30%" :before-close="handleClose">
            <el-form ref="dictRef" :model="dictForm" :rules="rules" label-width="80px" status-icon>
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="dictForm.dictName" />
                </el-form-item>
                <el-form-item label="商品编码">
                    <el-input v-model="dictForm.dictCode" />
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input type="textarea" :rows="4" v-model="dictForm.description" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="onConfirm">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { getDictList, deleteDict, addDict, editDict } from '@/services/api/market/auxiliary'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';

let dictQuery = ref({
    dictName: '',
    dictCode: ''
})
let dictData = ref()
let dictTitle = ref('添加')
let dictVisible = ref(false)
let dictForm = ref({
    id: '' as any,
    dictName: '',
    dictCode: '',
    description: ''
})
let rules = ref()
let dictRef = ref()

let handleFilter = () => {

}

let handleReset = () => {

}

let handleAdd = () => {
    dictTitle.value = '添加'
    dictForm.value.id = ''
    dictVisible.value = true
}

let handleEdit = (row: any) => {
    dictForm.value = row
    dictVisible.value = true
    dictTitle.value = '编辑'
}

let handleConfigure = () => {

}

let onConfirm = () => {
    if (dictForm.value.id) {
        editDict(dictForm.value).then((res: any) => {
            if (res.code === 200) {
                handleClose()
                init(dictQuery.value)
            }
        })
    } else {
        addDict(dictForm.value).then((res: any) => {
            if (res.code === 200) {
                handleClose()
                init(dictQuery.value)
            }
        })
    }
    dictVisible.value = false
}
let handleClose = () => {
    dictForm.value = {
        id: '' as any,
        dictName: '',
        dictCode: '',
        description: ''
    }
    dictVisible.value = false
}

let handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确认删除?', '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            deleteDict(id).then((res: any) => {
                if (res.code === 200) {
                    ElMessage({ type: 'success', message: res.msg })
                    init(dictQuery.value)
                } else {
                    ElMessage({ type: 'error', message: res.msg })
                }

            })

        })
}

let init = (params?: any) => {
    getDictList(params).then((res: any) => {
        dictData.value = res.data.records
        console.log(res, '字典数据');
    })
}
init()
</script>
 
<style lang = "scss" scoped>
</style>