<script lang="ts" setup>
/**
 * 配送仓「我的商品」列表页
 * 仓侧建品与上下架入口；未审核商品无专用上下架按钮（仅编辑）
 */
import { Page, useVbenModal } from '@vben/common-ui';

import { Image, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

defineOptions({ name: 'DeliveryWarehouseProduct' });

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

/**
 * 打开新建/编辑弹窗
 * @param data 行数据；新建传空对象
 * @param isUpdate 是否编辑
 */
const showModal = (data: Record<string, any> = {}, isUpdate = false) => {
  formModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

/** 审核状态 Tag 颜色：待审橙、已审绿 */
function auditTagColor(status: number) {
  return Number(status) === 1 ? 'green' : 'orange';
}
</script>

<template>
  <Page auto-content-height title="我的商品">
    <FormModal />
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
          ]"
          :drop-down-actions="[]"
        />
      </template>
      <template #image="{ row }">
        <Image
          v-if="row.image"
          :src="row.image"
          :height="36"
          :width="36"
          :preview="true"
        />
        <span v-else>-</span>
      </template>
      <template #audit_status="{ row }">
        <Tag :color="auditTagColor(row.audit_status)">
          {{ row.audit_status_txt || '-' }}
        </Tag>
      </template>
      <template #status="{ row }">
        <Tag :color="row.status_color || 'default'">
          {{ row.status_txt || '-' }}
        </Tag>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              onClick: showModal.bind(null, row, true),
            },
          ]"
          :drop-down-actions="[]"
        />
      </template>
    </Grid>
  </Page>
</template>
