<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(scope.row.id)">规格配置</el-button>
                    <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination :page-data="dictQuery" :total="total" @size-change="sizeChange" @current-change="currentChange" />

        <!-- 添加修改 -->
        <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="dictName">
                    <el-input v-model="dictForm.dictName" />
                </el-form-item>
                <el-form-item label="商品编码">
                    <el-input v-model="dictForm.dictCode" :disabled="dictForm.id != ''" />
                </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>

        <!-- 字典配置 -->
        <dict-item ref="dictItemRef" :dictId="dictId" />
    </div>
</template>

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


let dictQuery = ref({
    dictName: '',
    dictCode: '',
    column: 'createTime',
    order: 'desc',
    pageNo: 1,
    pageSize: 10
}) // 字典查询参数

let dictId = ref('' as any)
// 字典配置查询参数 

let dictItemRef = ref()
let dictData = ref() // 字典数据
let total = ref() // 总条数 
let dictTitle = ref('添加') //dialog标题
let dictVisible = ref(false) // dialog显隐
let dictForm = ref({
    id: '' as any,
    dictName: '',
    dictCode: '',
    description: ''
})
let rules = ref({
    dictName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
})
let dictRef = ref()

let handleFilter = () => {
    init(dictQuery.value)
}

let handleReset = () => {
    dictQuery.value = {
        dictName: '',
        dictCode: '',
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 10
    }
    init(dictQuery.value)
}

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

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

let handleConfigure = (id: number) => {
    if (!id) return init(dictQuery)
    else {
        dictId.value = id
        dictItemRef.value.init({ dictId: id })
        dictItemRef.value.dictItemDrawer = true
    }
}

let sizeChange = (val: number) => {
    dictQuery.value.pageSize = val
    init(dictQuery.value)
}

let currentChange = (val: number) => {
    dictQuery.value.pageNo = val
    init(dictQuery.value)
}

let onConfirm = () => {
    dictRef.value?.validate((valid: any, fields: any) => {
        if (valid) {
            if (dictForm.value.id) {
                editDict(dictForm.value).then((res: any) => {
                    if (res.code === 200) {
                        init(dictQuery.value)
                        ElMessage({ type: 'success', message: '添加成功' })
                        handleClose()
                    }
                })
            } else {
                addDict(dictForm.value).then((res: any) => {
                    if (res.code === 200) {
                        init(dictQuery.value)
                        ElMessage({ type: 'success', message: '编辑成功' })
                        handleClose()
                    }
                })
            }
        } else {
            console.log(fields);

        }
    })

}
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
        total.value = res.data.total
        console.log(res, '字典数据');
    })
}
init(dictQuery.value)
</script>
 
<style lang = "scss" scoped>
</style>