<script setup lang="ts">
import { ref, h } from "vue";
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
import {
    Pagination, Select, SelectOption, Input, Button,
    Space, Table,
} from 'ant-design-vue'
import { fields, getProductValues } from "../service/data";
import PageHeader from '../components/page-header.vue'

const searchParams = ref({
    type: '',
    name: ''
})
const current = ref(2);
const pageSize = ref<number>(20);
const columns = fields;
const allDataList = getProductValues();
console.log(allDataList)

const opts = [
    { label: '全部', value: '' },
    { label: '能量密度', value: 'power' },
    { label: 'Pro(g)', value: 'pro' },
    { label: 'Na(g)', value: 'na' },
]
</script>
<template>
    <div class="data-fields-container">
        <PageHeader title="登录账号管理" description="* 超级管理员: 拥有最高权限，可使用全部管理功能。管理员:普通管理权限，不可新建、删除、编辑账号。" />
        <div class="search-form">
            <Space :size="20">
                <Space class="form-item">
                    <span>营养制剂</span>
                    <Input class="search-item" placeholder="请输入营养制剂" v-model:value="searchParams.name" />
                </Space>
                <Space class="form-item">
                    <span>类型</span>
                    <Select class="search-item" v-model:value="searchParams.type">
                        <SelectOption v-for="(it, opIndex) in opts" :key="opIndex" :value="it.value">{{ it.label }}
                        </SelectOption>
                    </Select>
                </Space>
                <Space class="form-item" :size="15">
                    <Button :icon="h(SearchOutlined)" type="primary">查询</Button>
                    <Button :icon="h(PlusOutlined)" class="btn-info">新增</Button>
                </Space>
            </Space>
        </div>
        <div class="search-result-table">
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>营养制剂</th>
                            <th v-for="th in columns">{{ th.name }}</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(tr, rowIndex) in allDataList" :key="rowIndex">
                            <td>{{ tr.product.name }}</td>
                            <td v-for="it in tr.values">{{ it.value }}</td>
                            <td>
                                <Space :size="20">
                                    <a>编辑</a>
                                    <a>删除</a>
                                </Space>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="data-page">
                <Pagination v-model:current="current" v-model:page-size="pageSize" :total="50"
                    :show-total="total => `共 ${total} 条`" />
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.search-form {
    display: flex;
    align-items: center;

    margin: 10px 0;

    .form-item {
        display: inline-flex;
        align-items: center;
    }
}

.search-form {

    .ant-input,
    .ant-select .ant-select-selector {
        background-color: #f7f8fa;
        border: solid 1px transparent;
        min-width: 100px;

        &:focus,
        &:hover {
            border-color: var(--primary-color-1-hover);
        }
    }
}

.search-result-table {}

.data-page {
    margin-top: 20px;
    text-align: right;
}
</style>
