<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form class="whole_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="物资大类">
            <el-select v-model="searchList.matype1" clearable multiple @change="allSuppliesChange">
              <el-option v-for="item in allSupplies" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资类别">
            <el-select
              v-model="searchList.matype2"
              clearable
              multiple
              :disabled="searDisabled"
              :placeholder="searDisabled ? '请先选择物资大类' : `请选择物资类别`"
            >
              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资名称">
            <el-input v-model="searchList.matype3" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
          <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column prop="matypename1" label="物资大类" header-align="center" align="center" />
      <el-table-column prop="matypename2" label="物资类别" header-align="center" align="center" />
      <el-table-column prop="matypename3" label="物资名称" header-align="center" align="center" />
      <el-table-column prop="specs" label="规格型号" header-align="center" align="center" />
      <el-table-column prop="matypename4" label="单位" header-align="center" align="center" />
    </el-table>
    <pagination
      v-show="page.total > 0"
      v-model:page="page.currentPage"
      v-model:limit="page.pageSize"
      :total="page.total"
      @pagination="getList"
    />
  </basic-container>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getSuppliesType, getSysTreeDict } from "@/api/dataStatistics/index";
import { Search, RefreshRight } from "@element-plus/icons-vue";

const tableData: any = ref([]);
const searchList = ref({
  matype1: [],
  matype2: [],
  matype3: ""
});
const allSupplies: any = ref([]); // 物资大类
const suppliesList: any = ref([]); // 物资类别
const searDisabled = ref(true);
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

getSysTreeDict({ type: 1, difference: 1 }).then((res: any) => {
  // console.log(res);
  if (res.code === 0) {
    allSupplies.value = res.data;
  }
});

const allSuppliesChange = (val: string[]) => {
  searchList.value.matype2 = [];
  if (val.length > 0) {
    searDisabled.value = false;
    getSysTreeDict({ type: 1, difference: 2, parentCodeList: val }).then((res: any) => {
      if (res.code === 0) {
        suppliesList.value = res.data;
      }
    });
  } else {
    searDisabled.value = true;
    suppliesList.value = [];
  }
};

const getList = () => {
  const data = reactive({
    size: page.pageSize,
    current: page.currentPage,
    ...searchList.value
  });
  getSuppliesType(data).then((res: any) => {
    // console.log(res);
    if (res.code === 0) {
      tableData.value = res.data.records;
      page.total = res.data.total;
    }
  });
};

const clearSearch = () => {
  searchList.value = {
    matype1: [],
    matype2: [],
    matype3: ""
  };
  searDisabled.value = true;
  getList();
};

getList();
</script>

<style lang="scss" scoped></style>
