<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.keywords" placeholder="产品名称/编码"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="产品编码" prop="sn"/>
      <ElTableColumn label="图片" width="100">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="产品名称" prop="goodsName"/>
      <ElTableColumn label="规格" prop="specParams"/>

      <ElTableColumn label="是否可用" prop="canuse" width="100">
        <template #default="{row}">
          <ElSwitch v-model="row.canuse" :disabled="appUserStore.isXiaoNa" @change="enableGoodsHandler($event as boolean,row.id)"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo" show-overflow-tooltip width="180"/>
      <ElTableColumn label="创建时间" prop="createTime" width="180"/>
    </template>
    <GoodsForm ref="goodsForm" :default-biz-type="defaultBizType" :research="research"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
import GoodsForm from '@/pages/gds/goods/GoodsForm.vue'
import AppApi from '@/common/app/app-api.ts'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import { bizType } from '@/pages/gds/goods-category/constants.ts'
import { useAppUserStore } from '@/common/app/app-user-store.ts'

const props = defineProps<{
  defaultBizType: typeof bizType[number]['val']
}>()
const appUserStore = useAppUserStore()

const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

function research() {
  tablePageIns.value?.doSearch()
}

const tablePageProps = buildTablePageProps({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    defaultData: {bizType: props.defaultBizType},
    highForm: {
      contentWidth: 320,
    },
    paging(param: GoodsTypes.SearchGoodsParam) {
      return GoodsApi.paging(param)
    },
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          goodsFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          action({row}) {
            goodsFormIns.value?.open(row)
          },
        },
        {
          show() {
            return !appUserStore.isXiaoNa
          },
          icon: 'Delete',
          loading: false,
          type: 'danger',
          tooltip: '删除',
          confirm: {
            title: '是否删除当前数据',
          },
          action({row}) {
            return GoodsApi.del([ row.id! ])
              .then(() => {
                ElMessage.success('删除成功')
                return true
              })
          },
        },
      ],
    },
  },
})


function enableGoodsHandler(enable: boolean, id: string) {
  GoodsApi.enable({enable, id})
    .then(() => {
      ElMessage.success(enable ? '启用成功' : '禁用成功')
      research()
    })
}
</script>
