<template>
<view class="admin-main">
<!-- 头部搜索 -->
<view class="search-card">
<view class="search-row">
<view class="search-item">
<text class="search-label">模板搜索:</text>
<input class="search-input" placeholder="请输入模板名称" />
</view>
<button class="btn-query">查询</button>
</view>
</view>

<!-- 数据表格区域 -->
<view class="table-card">
<view class="table-toolbar">
<button class="btn-add" @click="openDrawer()">添加商品参数</button>
</view>

<view class="table-header">
<text class="th-cell flex-1">ID</text>
<text class="th-cell flex-3">参数模板名称</text>
<text class="th-cell flex-5">参数详情</text>
<text class="th-cell flex-2 text-center">操作</text>
</view>

<view class="table-body">
<view v-if="list.length === 0" class="empty-box">
<text class="empty-text">暂无数据</text>
</view>
<view v-for="(item, index) in list" :key="index" class="table-row">
<text class="td-cell flex-1 color-9">{{ item.id }}</text>
<text class="td-cell flex-3">{{ item.name }}</text>
<view class="td-cell flex-5">
<text class="param-tags">{{ formatParams(item.params) }}</text>
</view>
<view class="td-cell flex-2 row-center">
<text class="btn-link" @click="openDrawer(item)">编辑</text>
<view class="divider"></view>
<text class="btn-link delete" @click="deleteItem(index)">删除</text>
</view>
</view>
</view>
</view>

<!-- 添加/编辑参数抽屉 (右侧 50%) -->
<view class="drawer-mask" v-if="showDrawerMask" @click="closeDrawer">
<view class="drawer-content" @click.stop="" :class="{ 'drawer-show': showDrawer }">
<view class="drawer-header">
<text class="drawer-title">商品参数</text>
<text class="drawer-close" @click="closeDrawer"></text>
</view>
<scroll-view class="drawer-body" scroll-y="true">
<view class="drawer-form-box">
<view class="form-item-grp">
<view class="item-label-box"><text class="item-label">模板名称:</text></view>
<view class="item-value-box">
<input class="styled-input" v-model="form.name" placeholder="请输入模板名称" />
</view>
</view>
<view class="form-item-grp">
<view class="item-label-box"><text class="item-label">排序:</text></view>
<view class="item-value-box">
<input type="number" class="styled-input" v-model="form.sort" placeholder="请输入排序" />
</view>
</view>

<view class="param-edit-section">
<view class="param-grid-head">
<text class="grid-th flex-2 pl-40">参数名称</text>
<text class="grid-th flex-3">参数值</text>
<text class="grid-th flex-1 text-center">操作</text>
</view>
<view class="param-grid-list">
<view v-for="(p, pi) in form.params" :key="pi" class="param-grid-row">
<view class="drag-handle-box flex-center">
<view class="dots-icon"></view>
</view>
<view class="grid-td flex-2">
<input class="grid-cell-input" v-model="p.label" placeholder="请输入参数名称" />
</view>
<view class="grid-td flex-3">
<input class="grid-cell-input" v-model="p.value" placeholder="请输入参数值" />
</view>
<view class="grid-td flex-1 row-center">
<text class="btn-del-text" @click="removeParamRow(pi)">删除</text>
</view>
</view>
</view>
<button class="btn-add-row" @click="addParamRow">添加参数</button>
</view>
</view>
</scroll-view>
<view class="drawer-footer-actions">
<button class="btn-act-cancel" @click="closeDrawer">取消</button>
<button class="btn-act-confirm" @click="saveParam">确定</button>
</view>
</view>
</view>
</view>
</template>

<script setup lang="uts">
import { ref, reactive } from 'vue'

interface ParamKV {
label: string;
value: string;
}

interface ParamItem {
id: number;
name: string;
sort: number;
params: ParamKV[];
}

const list = reactive<ParamItem[]>([
{ id: 1, name: '手机数码', sort: 1, params: [{label: '品牌', value: '华为'}, {label: '型号', value: 'Mate 60'}] as ParamKV[] },
{ id: 2, name: '家用电器', sort: 2, params: [{label: '能效等级', value: '一级'}, {label: '产地', value: '中国'}] as ParamKV[] }
])

const showDrawerMask = ref(false)
const showDrawer = ref(false)
const isEdit = ref(false)
const editIndex = ref(-1)

const form = reactive({
name: '',
sort: 0,
params: [] as ParamKV[]
})

function formatParams(params: ParamKV[]): string {
return params.map(p => p.label + ':' + p.value).join(' | ')
}

function openDrawer(item: ParamItem | null = null) {
if (item != null) {
isEdit.value = true
form.name = item.name
form.sort = item.sort
form.params = JSON.parse<ParamKV[]>(JSON.stringify(item.params)) as ParamKV[]
editIndex.value = list.indexOf(item)
} else {
isEdit.value = false
form.name = ''
form.sort = 0
form.params = [{ label: '', value: '' }] as ParamKV[]
}

showDrawerMask.value = true
setTimeout(() => {
showDrawer.value = true
}, 50)
}

function closeDrawer() {
showDrawer.value = false
setTimeout(() => {
showDrawerMask.value = false
}, 300)
}

function addParamRow() {
form.params.push({ label: '', value: '' } as ParamKV)
}

function removeParamRow(index: number) {
form.params.splice(index, 1)
}

function saveParam() {
if (!form.name) {
uni.showToast({ title: '请输入模板名称', icon: 'none' })
return
}
if (isEdit.value) {
const item = list[editIndex.value]
item.name = form.name
item.sort = form.sort
item.params = JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
} else {
list.unshift({
id: Date.now() % 1000,
name: form.name,
sort: form.sort,
params: JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
} as ParamItem)
}
closeDrawer()
uni.showToast({ title: '保存成功', icon: 'success' })
}

function deleteItem(index: number) {
uni.showModal({
title: '提示',
content: '确定删除该参数模板吗？',
success: (res) => {
if (res.confirm) {
list.splice(index, 1)
}
}
})
}
</script>

<style scoped lang="scss">
.admin-main {
padding: 24px;
background-color: #f0f2f5;
min-height: 100vh;
}

.search-card {
background-color: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
}

.search-row { display: flex; flex-direction: row; align-items: center; }

.search-item { display: flex; flex-direction: row; align-items: center; margin-right: 24px; }
.search-label { font-size: 14px; margin-right: 12px; }
.search-input { width: 220px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }

.btn-query { background-color: #1890ff; color: #fff; height: 32px; line-height: 32px; padding: 0 20px; border-radius: 4px; border: none; font-size: 14px; margin: 0; }

.table-card { background-color: #fff; padding: 24px; border-radius: 4px; }
.table-toolbar { margin-bottom: 20px; }
.btn-add { background-color: #1890ff; color: #fff; height: 32px; line-height: 32px; padding: 0 16px; border-radius: 4px; border: none; font-size: 14px; margin: 0; }

.table-header { display: flex; flex-direction: row; background-color: #fafafa; height: 44px; align-items: center; border: 1px solid #f0f0f0; }
.th-cell { font-size: 14px; font-weight: bold; padding: 0 12px; }

.table-row { display: flex; flex-direction: row; min-height: 54px; align-items: center; border-bottom: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; }

.td-cell { padding: 0 12px; font-size: 14px; color: #666; }
.color-9 { color: #999; }
.param-tags { color: #1890ff; }

.btn-link { color: #1890ff; font-size: 14px; cursor: pointer; }
.btn-link.delete { color: #ff4d4f; }
.divider { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }

.flex-center { display: flex; justify-content: center; align-items: center; }
.row-center { display: flex; flex-direction: row; justify-content: center; align-items: center; }

/* Drawer styles */
.drawer-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: rgba(0,0,0,0.5);
}

.drawer-content {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50%;
background-color: #fff;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
}

.drawer-show {
transform: translateX(0);
}

.drawer-header {
padding: 20px 24px; border-bottom: 1px solid #f0f0f0;
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
}

.drawer-title { font-size: 16px; font-weight: bold; }
.drawer-close { font-size: 20px; color: #999; cursor: pointer; }

.drawer-body { flex: 1; padding: 24px; }

.form-item-grp { display: flex; flex-direction: row; margin-bottom: 24px; align-items: center; }
.item-label-box { width: 100px; text-align: right; margin-right: 16px; }
.item-label { font-size: 14px; color: #333; }
.item-value-box { flex: 1; }
.styled-input { width: 100%; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }

.param-edit-section { margin-top: 20px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 12px; }

.param-grid-head { display: flex; flex-direction: row; background-color: #f8f9fa; height: 40px; align-items: center; border-bottom: 1px solid #f0f0f0; }
.grid-th { font-size: 13px; font-weight: bold; color: #666; }
.pl-40 { padding-left: 40px; }

.param-grid-row { display: flex; flex-direction: row; height: 48px; align-items: center; border-bottom: 1px solid #f0f0f0; }

.drag-handle-box { width: 40px; height: 40px; }
.dots-icon {
width: 14px; height: 10px;
background-image: radial-gradient(#ccc 2px, transparent 2px);
background-size: 4px 4px;
}

.grid-td { padding: 0 8px; }
.grid-cell-input { width: 100%; height: 32px; border: 1px solid transparent; padding: 0 8px; font-size: 13px; }
.grid-cell-input:focus { border-bottom: 1px solid #1890ff; }

.btn-del-text { color: #ff4d4f; font-size: 13px; cursor: pointer; }

.btn-add-row {
margin-top: 16px; height: 32px; line-height: 32px;
border: 1px dashed #1890ff; color: #1890ff; background-color: #fff;
font-size: 13px; border-radius: 4px;
}

.drawer-footer-actions {
padding: 16px 24px; border-top: 1px solid #f0f0f0;
display: flex; flex-direction: row; justify-content: flex-end;
}

.btn-act-cancel, .btn-act-confirm { height: 32px; line-height: 32px; padding: 0 20px; border-radius: 4px; font-size: 14px; margin-left: 12px; }
.btn-act-cancel { background-color: #fff; border: 1px solid #dcdfe6; color: #606266; }
.btn-act-confirm { background-color: #1890ff; color: #fff; border: none; }

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-5 { flex: 5; }
</style>
