<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.expenseItemName" placeholder="费用名称"/>
      </ElFormItem>
    </template>

    <template #columns>
      <!-- <ElTableColumn label="管理员名称" prop="userId"/> -->
      <!-- <ElTableColumn label="企业名称" prop="customerId"/> -->
      <ElTableColumn label="费用类型" prop="expenseItemCategoryTxt"/>
      <ElTableColumn label="付费项名称" prop="expenseItemName"/>
      <ElTableColumn label="计费策略" prop="expenseStrategyTxt"/>
      <ElTableColumn label="计量单位" prop="unitTxt"/>
      <ElTableColumn label="税率" prop="taxRate">
        <template #default="{row}">
          {{ row.taxRate == null ? '-' : row.taxRate + ' %' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="价格" prop="unitPrice">
        <template #default="{row}">
          {{ row.unitPrice == null ? '-' : row.unitPrice + (row.expenseStrategy === expenseStrategy.DanJia || row.expenseStrategy === expenseStrategy.TanXing ? ` 元/${unit.txt(row.unit)}` : ` 元`) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="起步价" prop="initialPrice">
        <template #default="{row}">
          {{ row.expenseStrategy !== expenseStrategy.TanXing || row.initialPrice == null ? '-' : row.initialPrice + ' ' + unit.txt(row.unit) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="起步量" prop="initialQuantity">
        <template #default="{row}">
          {{ row.expenseStrategy !== expenseStrategy.TanXing || row.initialQuantity == null ? '-' : row.initialQuantity + ' ' + unit.txt(row.unit) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="每档的量" prop="everyQuantity">
        <template #default="{row}">
          {{ row.expenseStrategy !== expenseStrategy.TanXing || row.everyQuantity == null ? '-' : row.everyQuantity + ' ' + unit.txt(row.unit) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="是否可用" prop="canuse" width="100">
        <template #default="{row}">
          <ElSwitch v-model="row.canuse" :disabled="appUserStore.isXiaoNa" @change="enableExpenseItemHandler($event as boolean,row.id)"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <ExpenseItemForm ref="expenseItemForm" :research="research"/>
    <!-- <ExpenseItemDetail ref="expenseItemDetail"/> -->
  </ATablePage>
</template>

<script lang="ts" setup>
import ExpenseItemApi from '@/pages/fin/expense-item/expense-item-api.ts'
import ExpenseItemForm from '@/pages/fin/expense-item/ExpenseItemForm.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import {
  expenseStrategy,
  unit,
} from '@/pages/gds/goods/constants.ts'
import { useAppUserStore } from '@/common/app/app-user-store.ts'

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const expenseItemFormIns = useTemplateRef<InstanceType<typeof ExpenseItemForm>>('expenseItemForm')
// const expenseItemDetailIns = useTemplateRef<InstanceType<typeof ExpenseItemDetail>>('expenseItemDetail')
const appUserStore = useAppUserStore()

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

function enableExpenseItemHandler(enable: boolean, id: string) {
  ExpenseItemApi.enable({enable, id})
    .then(() => {
      ElMessage.success(enable ? '启用成功' : '禁用成功')
      research()
    })
}

const tablePageProps = buildTablePageProps<ExpenseItemTypes.SearchExpenseItemParam, ExpenseItemTypes.SearchExpenseItemResult>({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    paging: ExpenseItemApi.paging,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          expenseItemFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        /* {
         tooltip: '详情',
         icon: 'Postcard',
         action({row}) {
         expenseItemDetailIns.value?.open(row)
         },
         }, */
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          action({row}) {
            expenseItemFormIns.value?.open(row)
          },
        },
        /* {
         icon: 'Delete',
         loading: false,
         type: 'danger',
         tooltip: '删除',
         confirm: {
         title: '是否删除当前数据',
         },
         action({row}) {
         return ExpenseItemApi.del([ row.id! ])
         .then(() => {
         ElMessage.success('删除成功')
         return true
         })
         },
         }, */
      ],
    },
  },
})

</script>
