<template>
  <Page>
    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
       <ElFormItem label="Id">
        <ElInput
          v-model="searchForm.id"
          placeholder="Id"/>
      </ElFormItem>
       <ElFormItem label="仓库 Id">
        <ElInput
          v-model="searchForm.warehouseId"
          placeholder="仓库 Id"/>
      </ElFormItem>
       <ElFormItem label="产品 Id">
        <ElInput
          v-model="searchForm.goodsId"
          placeholder="产品 Id"/>
      </ElFormItem>
       <ElFormItem label="存放位置">
        <ElInput
          v-model="searchForm.location"
          placeholder="存放位置"/>
      </ElFormItem>
       <ElFormItem label="当前库存数量">
        <ElInput
          v-model="searchForm.stockQuantity"
          placeholder="当前库存数量"/>
      </ElFormItem>
       <ElFormItem label="锁定数量">
        <ElInput
          v-model="searchForm.lockQuantity"
          placeholder="锁定数量"/>
      </ElFormItem>
       <ElFormItem label="总量">
        <ElInput
          v-model="searchForm.totalQuantity"
          placeholder="总量"/>
      </ElFormItem>
       <ElFormItem label="剩余量">
        <ElInput
          v-model="searchForm.remainingQuantity"
          placeholder="剩余量"/>
      </ElFormItem>
       <ElFormItem label="计量单位；字典代码：unit">
        <ElInput
          v-model="searchForm.unit"
          placeholder="计量单位；字典代码：unit"/>
      </ElFormItem>
       <ElFormItem label="创建人 Id； sys_user.id">
        <ElInput
          v-model="searchForm.creatorId"
          placeholder="创建人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="修改人 Id； sys_user.id">
        <ElInput
          v-model="searchForm.modifierId"
          placeholder="修改人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="创建时间">
        <ElInput
          v-model="searchForm.createTime"
          placeholder="创建时间"/>
      </ElFormItem>
       <ElFormItem label="修改时间">
        <ElInput
          v-model="searchForm.modifyTime"
          placeholder="修改时间"/>
      </ElFormItem>
       <ElFormItem label="是否删除； 0-->未删除、1-->已删除">
        <ElInput
          v-model="searchForm.deleted"
          placeholder="是否删除； 0-->未删除、1-->已删除"/>
      </ElFormItem>
      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>

    <div class="tool-bar">
      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
    </div>

    <ElTable v-loading="searching" :data="tableData"
      cell-class-name="table-cell"
      class="table-list"
      empty-text="暂无数据"
      header-row-class-name="table-header"
      row-key="id">
        <ElTableColumn label="Id" prop="id"/>
        <ElTableColumn label="仓库 Id" prop="warehouseId"/>
        <ElTableColumn label="产品 Id" prop="goodsId"/>
        <ElTableColumn label="存放位置" prop="location"/>
        <ElTableColumn label="当前库存数量" prop="stockQuantity"/>
        <ElTableColumn label="锁定数量" prop="lockQuantity"/>
        <ElTableColumn label="总量" prop="totalQuantity"/>
        <ElTableColumn label="剩余量" prop="remainingQuantity"/>
        <ElTableColumn label="计量单位；字典代码：unit" prop="unit"/>
        <ElTableColumn label="创建人 Id； sys_user.id" prop="creatorId"/>
        <ElTableColumn label="修改人 Id； sys_user.id" prop="modifierId"/>
        <ElTableColumn label="创建时间" prop="createTime"/>
        <ElTableColumn label="修改时间" prop="modifyTime"/>
        <ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
      <ElTableColumn label="操作" width="180">
        <template #default="scope">
          <div class="action-btn">
            <ElPopconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              confirm-button-type="danger"
              cancel-button-type="primary"
              placement="top"
              title="是否删除当前数据?"
              width="180"
              @confirm="delHandler(scope)">
              <template #reference>
                <ElButton text type="danger" :loading="deling">删除</ElButton>
              </template>
            </ElPopconfirm>
            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
     <ElPagination
      layout="->, sizes, total, prev, pager, next"
      v-model:current-page="searchForm.current"
      v-model:page-size="searchForm.size"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100, 500]"
      :hide-on-single-page="false"
      :teleported="false"
      @change="paging"/>
    <InventoryForm ref="inventoryForm" @edit-succ="paging"/>
  </Page>
</template>

<script lang="ts" setup>
import InventoryApi from '@/pages/wh/inventory/inventory-api.ts'
import InventoryForm from '@/pages/wh/inventory/InventoryForm.vue'
import Page from '@/components/page/Page.vue'
import { elIcons } from '@/common/element/element.ts'
import Utils from '@/common/utils'

const totalCount = ref(0)
const tableData = Utils.resetAble(reactive<InventoryTypes.SearchInventoryResult[]>([]))
const searchForm = Utils.resetAble(reactive<InventoryTypes.SearchInventoryParam>({
  current: 1,
  size: 20,
}))
const searching = ref(false)
const deling = ref(false)
const showSearchForm = ref(true)
const inventoryFormIns = useTemplateRef<InstanceType<typeof InventoryForm>>('inventoryForm')

function showDialog(data?: InventoryTypes.SearchInventoryResult) {
  inventoryFormIns.value?.open(data)
}

function delHandler({row}: { row: InventoryTypes.SearchInventoryResult }) {
  deling.value = true
  InventoryApi.del([ row.id! ])
  .then(() => {
      ElMessage.success('删除成功')
      paging()
    })
  .finally(() => {
      deling.value = false
    })
}

function modifyHandler({row}: { row: InventoryTypes.SearchInventoryResult }) {
  showDialog(row)
}

function addHandler() {
  showDialog()
}

function reset() {
  searchForm.$reset()
  paging()
}

function paging() {
  searching.value = true
  InventoryApi.paging(searchForm)
    .then(res => {
      totalCount.value = res.data?.total ?? 0
      tableData.$reset(res.data?.records ?? [])
    })
    .finally(() => {
      searching.value = false
    })
}
onMounted(() => {
  paging()
})

</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  margin 0 0 20px 0
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }
  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>
