<template>
  <div class="page card h-100 flex-gap-10 overflow-hidden flex">
    <div class="status-container">
      <div
        class="status-item"
        :class="{ 'is-active': currentStatus === 'sharedInventory' }"
        @click="handleStatusClick('sharedInventory')"
      >
        <span>共享库存设置</span>
      </div>
    </div>

    <div class="content-container flex-1 flex-column overflow-hidden">
      <div class="search-form">
        <ElForm ref="searchFormRef" :model="searchForm" inline>
          <ElFormItem label="创建时间">
            <ElDatePicker
              v-model="dateRange"
              :default-time="[
                new Date(0, 0, 0, 0, 0, 0),
                new Date(0, 0, 0, 23, 59, 59),
              ]"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              clearable
              style="width: 260px"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </ElFormItem>
          <ElFormItem label="库存SKU">
            <ElInput
              v-model="searchForm.warehouseSku"
              clearable
              placeholder="库存SKU"
              style="width: 140px"
            />
          </ElFormItem>
          <ElFormItem label="库存组名称">
            <ElInput
              v-model="searchForm.warehouseGroupName"
              clearable
              placeholder="库存组名称"
              style="width: 140px"
            />
          </ElFormItem>
          <ElFormItem label="状态"
            ><ElSelect
              v-model="searchForm.status"
              placeholder="请选择"
              style="width: 140px"
            >
              <ElOption label="启用" :value="1" />
              <ElOption label="禁用" :value="0" />
            </ElSelect>
          </ElFormItem>
          <ElFormItem>
            <ElButton @click="resetSearchForm">重置</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="search">查询</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="success" @click="() => handleEdit()">新增</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="danger">删除</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
      <div class="table-wrapper">
        <TableView
          serial-numberable
          :selectionable="true"
          :paginated-data="tableData"
          :columns="tableColumns"
          @selection-change="handleSelectionChange"
        />
      </div>
      <div class="table-pagination-bar">
        <div class="selected-count-text">
          已选择
          <strong style="color: red">{{ selectedRows.length }}</strong>
          条数据
        </div>
        <ElPagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400, 500]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin: 0 auto"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
  <EditFormDialog ref="editFormRef" v-model:visible="editDialogVisible" />
</template>
<script lang="ts" setup>
import { getWarehouseRuleSettingListApi } from '@/api/warehouse/warehouseRuleSetting'
import {
  SearchForm,
  WarehouseRuleSettingData,
} from '@/types/api/warehouse/warehouseRuleSetting'
import usePageList from '@/utils/hooks/usePageList'
import { useValue } from '@/utils/hooks/useValue'
import { ElDatePicker, ElFormItem } from 'element-plus'
import { useWarehouseRuleSettingTableColumns } from './hooks/useWarehouseRuleSettingTableColumns'
import EditFormDialog from './components/EditDialog.vue'
const [searchForm, resetSearchForm] = useValue<SearchForm>({
  startTime: '',
  endTime: '',
  warehouseSku: '',
  warehouseGroupName: '',
  status: 1,
})
const dateRange = ref([])
const currentStatus = ref('sharedInventory')
const editDialogVisible = ref(false)
const editFormRef = ref()
const handleStatusClick = (status: string) => {
  currentStatus.value = status
}

const {
  currentPage,
  pageSize,
  total,
  data: tableData,
  refresh: search,
  onCurrentPageChange: handleCurrentChange,
  onPageSizeChange: handleSizeChange,
} = usePageList<WarehouseRuleSettingData>({
  query: (page, pageSize) =>
    getWarehouseRuleSettingListApi(searchForm.value, page, pageSize).then(
      (res) => res.data,
    ),
})
const selectedRows = ref<WarehouseRuleSettingData[]>([])
const handleSelectionChange = (selection: WarehouseRuleSettingData[]) => {
  selectedRows.value = selection
}

const handleEdit = async (row?: WarehouseRuleSettingData) => {
  if (row) {
    // 调用接口，获取数据
  } else {
    await editFormRef.value.resetFields()
  }
  editDialogVisible.value = true
}

const { columns: tableColumns } = useWarehouseRuleSettingTableColumns({
  onEdit: handleEdit,
})
</script>
<style scoped lang="scss">
.status-container {
  width: 160px;
  .status-item {
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    cursor: pointer;
    padding-left: 18px;
    &:hover {
      background-color: #f5f7fa;
    }
    &.is-active {
      background-color: #ecf5ff;
      color: #409eff;
      font-weight: 500;
    }
  }
}
.table-wrapper {
  flex: 1;
  overflow: hidden;
}
.table-pagination-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.selected-count-text {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}
</style>
