<template>
  <div class="dark:!bg-[#060818] p-4 bg-white">
    <div class="search-module">
      <el-form :model="searchform" ref="searchformRef" inline>
        <el-form-item>
          <el-input v-model="searchform.searchQuery" placeholder="采购单号" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchform.selectedSupplier" placeholder="供应商" style="min-width: 120px; max-width: 200px">
            <el-option label="供应商1" value="supplier1" />
            <el-option label="供应商2" value="supplier2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchform.selectedWarehouse" placeholder="采购仓库" style="min-width: 120px; max-width: 200px">
            <el-option label="仓库1" value="warehouse1" />
            <el-option label="仓库2" value="warehouse2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchform.selectedSKU" placeholder="SKU" style="min-width: 120px; max-width: 200px">
            <el-option label="SKU1" value="sku1" />
            <el-option label="SKU2" value="sku2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchform.dateRange" type="daterange" placeholder="创建日期" style="min-width: 200px; max-width: 300px" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchform.selectedStatus" placeholder="付款状态" style="min-width: 120px; max-width: 200px">
            <el-option label="状态1" value="status1" />
            <el-option label="状态2" value="status2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待审核" name="pending"></el-tab-pane>
      <el-tab-pane label="待下单" name="toOrder"></el-tab-pane>
      <el-tab-pane label="待发货" name="toShip"></el-tab-pane>
      <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      <el-tab-pane label="已回款" name="paidBack"></el-tab-pane>
      <el-tab-pane label="已作废" name="canceled"></el-tab-pane>
    </el-tabs>
    <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
      <template #table-columns>
        <el-table-column prop="name" :label="$t('order_sn')" />
        <el-table-column prop="brand" :label="$t('custom')" />
        <el-table-column prop="bar_code" :label="$t('order_time')" />
        <el-table-column prop="sku" :label="$t('warechouse_name')" />
        <el-table-column prop="weight" :label="$t('delivery_method')" />
        <el-table-column prop="unit" :label="$t('order_type')" />
        <el-table-column prop="image" :label="$t('user_state')">
          <template #default="scope">
            <img :src="scope.row.image" alt="" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('operate')" fixed="right" width="450">
          <template #default="scope">
            <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
            <el-button
              size="small"
              v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
              @click="handleEditWarehouse(scope.$index, scope.row)"
              >{{ $t('edit') }}</el-button
            >
            <el-button
              type="success"
              size="small"
              v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
              @click="handleDelGoods(scope.row)"
              >{{ $t('delete') }}</el-button
            >
          </template>
        </el-table-column>
      </template>
      <template #pagination>
        <el-pagination
          v-if="tableData.records && tableData.records.length"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="tableData.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.data_total"
        >
        </el-pagination>
      </template>
    </en-table-layout>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from 'vue';
import { ElMessageBox, FormInstance, ElMessage, TabsPaneContext } from 'element-plus';
import { useStore } from 'vuex';

import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const store = useStore();
const activeTab = ref('all');
const tableData = ref<any>({});
const loading = ref(false);
const searchform = ref({
  searchQuery: '',
  selectedSupplier: '',
  selectedWarehouse: '',
  selectedSKU: '',
  dateRange: [],
  selectedStatus: '',
});

/* 按钮权限 */
const checkPermission = (permissions: string[]): boolean => {
  return true;
};

/* 搜索 */
const handleSearch = () => {
  // 处理搜索逻辑
};

/* 查看 */
const handleView = (row: any) => {};
/* 修改 */
const handleEditWarehouse = (index: any, row: any) => {};
/* 删除 */
const handleDelGoods = (row: any) => {};
/* 每页多少条数据 */
const handlePageSizeChange = (size: number) => {
  /*  params.value.page_size = size; */
};
/* 翻页 */
const handlePageCurrentChange = (page: number) => {
  /* params.value.page_no = page; */
};
</script>
  
  <style scoped>
.search-module {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>