<template>
    <el-drawer v-model="dictItemDrawer" size="40%" title="商品列表" :before-close="handleClose">
        <div class="filter-container">
            <el-input v-model="dictItemQuery.itemText" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入名称" />
            <el-select v-model="dictItemQuery.status" class="filter-item" placeholder="请选择状态" style="width: 200px;">
                <el-option label="启用" value="1" />
                <el-option label="不启动" value="0" />
            </el-select>
            <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="dictItemData" border fit highlight-current-row>
            <el-table-column align="center" label="规格值" prop="itemText" />
            <!-- <el-table-column align="center" label="数据值" prop="itemValue" /> -->
            <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="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :page-data="dictItemQuery" :total="total" @size-change="sizeChange"
            @current-change="currentChange" />
    </el-drawer>

    <!-- 新增编辑 -->
    <el-dialog v-model="dictItemForm.show" :title="dictItemForm.title" width="40%" :before-close="handleDialogClose">
        <el-form ref="dictItemRef" :model="dictItemForm.data" :rules="rules" label-width="80px" status-icon>
            <el-form-item label="规格值" prop="itemText">
                <el-input v-model="dictItemForm.data.itemText" placeholder="请输入规格值" />
            </el-form-item>
            <!-- <el-form-item label="数据值" prop="itemValue">
                <el-input v-model="dictItemForm.data.itemValue" placeholder="请输入数据值" />
            </el-form-item> -->
            <el-form-item label="描述">
                <el-input type="textarea" :rows="4" v-model="dictItemForm.data.description" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="dictItemForm.data.sortOrder" :min="0" controls-position="right" />
            </el-form-item>
            <!-- <el-form-item label="是否启用">
                <el-radio-group v-model="dictItemForm.data.status">
                    <el-radio-button label="1">启用</el-radio-button>
                    <el-radio-button label="0">不启用</el-radio-button>
                </el-radio-group>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleDialogClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, defineExpose, reactive } from 'vue'
import { getDictItemList, addDictItem, editDictItem, deleteDictItem } from '@/services/api/market/auxiliary'
import { ElMessage, ElMessageBox } from 'element-plus';
import pagination from '@/components/pagination/index.vue';


let props = defineProps({
    dictId: {
        type: Number
    }
})

let dictItemQuery = ref({
    dictId: props.dictId,
    pageNo: 1,
    pageSize: 10,
    itemText: '',
    status: ''
}) // 字典配置查询参数 

let dictItemForm = reactive({
    show: false,
    title: '新增',
    data: {
        id: '',
        dictId: '' as any,
        itemText: '',
        itemValue: '0',
        description: '',
        sortOrder: 1,
        status: 1
    }
})
let rules = ref({
    itemText: [{ required: true, message: '请输入规格值', trigger: 'blur' }],
    itemValue: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
})

let dictItemDrawer = ref(false)
let dictItemData = ref()
let dictItemRef = ref()
let total = ref()

let handleFilter = () => {
    init(dictItemQuery.value)
}
let handleReset = () => {
    dictItemQuery.value = {
        dictId: props.dictId,
        pageNo: 1,
        pageSize: 10,
        itemText: '',
        status: ''
    }
    init(dictItemQuery.value)
}
let handleAdd = () => {
    dictItemForm.data.dictId = props.dictId
    dictItemForm.show = true
}
let handleEdit = (row: any) => {
    dictItemForm.data = row
    dictItemForm.data.dictId = props.dictId
    dictItemForm.show = true
}

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

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

let onConfirm = () => {
    dictItemRef.value?.validate((valid: any, fields: any) => {
        if (valid) {
            if (dictItemForm.data.id) {
                editDictItem(dictItemForm.data).then((res: any) => {
                    if (res.code === 200) {
                        init(dictItemQuery.value)
                        ElMessage({ type: 'success', message: '编辑成功' })
                        handleDialogClose()
                    }
                })
            } else {
                addDictItem(dictItemForm.data).then((res: any) => {
                    if (res.code === 200) {
                        init(dictItemQuery.value)
                        ElMessage({ type: 'success', message: '添加成功' })
                        handleDialogClose()
                    }
                })
            }
        } else {
            console.log(fields);
        }
    })
}
let handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确认删除?', '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            deleteDictItem(id).then((res: any) => {
                if (res.code === 200) {
                    ElMessage({ type: 'success', message: res.msg })
                    init(dictItemQuery.value)
                } else {
                    ElMessage({ type: 'error', message: res.msg })
                }

            })

        })
}

let init = (query?: any) => {
    getDictItemList(query).then((res: any) => {
        if (res.code === 200) {
            dictItemData.value = res.data.records
            total.value = res.data.total
            dictItemQuery.value.dictId = props.dictId
            console.log(dictItemData.value);
        }

    })
}

let handleClose = () => {
    dictItemQuery.value = {
        dictId: props.dictId,
        pageNo: 1,
        pageSize: 10,
        itemText: '',
        status: ''
    }
    dictItemDrawer.value = false
}

let handleDialogClose = () => {
    dictItemForm.data = {
        id: '',
        dictId: '',
        itemText: '',
        itemValue: '0',
        description: '',
        sortOrder: 1,
        status: 1
    }
    dictItemForm.show = false
}

defineExpose({
    dictItemDrawer,
    init
})
</script>
 
<style lang = "scss" scoped>
</style>