<template>
    <q-dialog v-model="visble" persistent>
        <q-card class="shadow-24" style="max-width: 90vw">
            <q-card-section class="no-padding">
                <q-card-actions class="bg-light-blue-10 text-white">
                    <q-card-actions class="text-h6">选择物料</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="visble = false">
                        <q-tooltip content-class="bg-amber text-black shadow-4">{{
                            $t('index.close')
                        }}</q-tooltip>
                    </q-btn>
                </q-card-actions>
                <q-card-section>
                    <div class="row q-col-gutter-md">
                        <div class="col-xl-3 col-lg-3 col-sm-12">
                            <q-input class="text-h6" outlined bg-color="white" debounce="500"
                                v-model="pagination.data.materialName" clearable label="物料名称" @keyup.enter="query"
                                :maxlength="255" />
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-12">
                            <q-input class="text-h6" bg-color="white" outlined debounce="500" clearable
                                v-model="pagination.data.materialCode" label="物料编码" @keyup.enter="query" :maxlength="32" />
                        </div>

                        <div class="col-xl-3 col-lg-3 col-sm-12">
                            <q-input class="text-h6" bg-color="white" outlined clearable debounce="500"
                                v-model="pagination.data.specsName" label="规格型号" @keyup.enter="query" :maxlength="32" />
                        </div>

                        <div class="col-xl-3 col-lg-3 col-sm-12">
                            <q-btn size="lg" push label="查询" color="primary" class="q-ml-md" icon="search" @click="query">
                                <q-tooltip content-class="bg-amber text-black shadow-4">查询物料</q-tooltip>
                            </q-btn>
                            <q-btn size="lg" push label="重置" color="primary" class="q-ml-md" icon="youtube_searched_for"
                                @click="reset">
                                <q-tooltip content-class="bg-amber text-black shadow-4">重置</q-tooltip>
                            </q-btn>
                        </div>
                    </div>
                </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section style="width: 90vw">
                <q-table class="my-sticky-header-column-table" :rows="tableData" row-key="materialId" separator="cell"
                    :columns="columns" style="height: 600px" flat bordered v-model:pagination="pagination"
                    :loading="loading" @request="onRequast" selection="multiple" v-model:selected="selected">
                    <template v-slot:body="props">
                        <q-tr :props="props" class="tr_hover">
                            <q-td key="warehouseName" :props="props">
                                <q-checkbox :model-value="props.selected"
                                    @update:model-value="(val, evt) => { Object.getOwnPropertyDescriptor(props, 'selected').set(val, evt); }" />
                            </q-td>
                            <q-td key="warehouseName" :props="props">{{
                                props.row.warehouseName
                            }}</q-td>
                            <q-td key="materialCode" :props="props">{{
                                props.row.materialCode
                            }}</q-td>
                            <q-td key="materialName" :props="props">{{
                                props.row.materialName
                            }}</q-td>
                            <q-td key="materialDesc" :props="props">{{
                                props.row.materialDesc
                            }}</q-td>
                            <q-td key="specsName" :props="props">{{
                                props.row.specsName
                            }}</q-td>
                            <q-td key="unit" :props="props">{{
                                props.row.unit
                            }}</q-td>
                        </q-tr>
                    </template>
                </q-table>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="visble = false">{{ $t('cancel')
                }}</q-btn>
                <q-btn color="primary" @click="materialSelect()">确认选择</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { materialApi } from 'src/api/materials/materialApi';
import { Pagination, convert } from 'src/api/class';
import { MaterialSearchEntity } from 'src/api/materials/model/material';
const emit = defineEmits(['materialSelect']);

const selected = ref([]);
let tableData = ref([{}]);
const loading = ref(false);
const visble = ref(false);

const columns: any = ref([
    {
        name: 'warehouseName',
        label: '所属工厂',
        align: 'center',
        field: 'warehouseName',
    },
    {
        name: 'materialCode',
        required: true,
        label: '物料编码',
        align: 'center',
        field: 'materialCode',
    },
    {
        name: 'materialName',
        label: '物料名称',
        field: 'materialName',
        align: 'center',
    },
    {
        name: 'materialDesc',
        label: '物料描述',
        field: 'materialDesc',
        align: 'center',
    },
    { name: 'specsName', label: '规格型号', field: 'specsName', align: 'center' },
    {
        name: 'unit',
        label: '单位',
        field: 'unit',
        align: 'center',
    }
]);
const pagination = ref(new Pagination(new MaterialSearchEntity()));

const onRequast = (props: any) => {
    const { page, rowsPerPage, rowsNumber } = props.pagination;
    pagination.value.page = page;
    pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
    getPage();
};

const getPage = (callback?: VoidCallback) => {
    loading.value = true;
    materialApi.getPage(pagination.value).then((res) => {
        convert(pagination.value, res);
        tableData.value = res.dataList;
        callback ? callback() : ''
    }).finally(() => {
        loading.value = false;
    });
};

// 打开窗体 查询物料
const clickForm = (warehouseId: any, selectedList: any) => {
    pagination.value.data.warehouseId = warehouseId
    getPage(() => {
        selected.value = selectedList;
    });
    visble.value = true;
};

// 清空选择项
const clearSelected = () => {
    selected.value = [];
}

const materialSelect = () => {
    resetFormData();
    emit('materialSelect', selected.value);
    visble.value = false;
};

const query = () => {
    getPage();
};

const resetFormData = () => {
    pagination.value.data.materialName = '';
    pagination.value.data.materialCode = '';
    pagination.value.data.specsName = '';
}

const reset = () => {
    resetFormData();
    getPage();
};
defineExpose({
    clickForm,
    clearSelected
});
</script>
  