<template>
  <q-dialog v-model="visble">
    <q-card class="shadow-24" style="max-width: 1500px">
      <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" />
          </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" />
          </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" />
          </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 style="width: 1500px">
        <q-table class="my-sticky-header-column-table shadow-24" :rows="tableData" row-key="id" separator="cell"
          :columns="columns" style="height: 600px" flat bordered v-model:pagination="pagination" :loading="loading"
          @request="onRequast" rows-per-page-label="每页记录:" no-data-label="No data" no-results-label="No data you want">
          <template v-slot:body="props">
            <q-tr :props="props" @click="materialSelect(props.row)" class="tr_hover">
              <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-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']);
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 = () => {
  loading.value = true;
  materialApi.getPage(pagination.value).then((res) => {
    convert(pagination.value, res);
    tableData.value = res.dataList;
  }).finally(() => {
    loading.value = false;
  });
};

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

const materialSelect = (row?: any) => {
  resetFormData();
  emit('materialSelect', row);
  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
});
</script>
<style scoped>
.tr_hover:hover {
  background: #e8e8e8;
}
</style>
