<template>
  <cacp-search-layout>
    <cacp-complex-table :actions="actions" :data="categoryInfoList" ref="table" :actionsWidth="200">
      <el-table-column label="分类编码" width="200" prop="categoryCode"></el-table-column>
      <el-table-column label="分类名称" min-width="282" prop="categoryName"></el-table-column>
    </cacp-complex-table>
  </cacp-search-layout>
  <cacp-dialog v-model="dialogVisible" title="新建分类" :resizable="false" width="“360”" @closed="onDialogClosed">
    <el-form :model="formData" ref="formRef" :rules="formRule" label-position="left">
      <el-form-item label="分类名称" prop="categoryName"
        ><el-input v-model="formData.categoryName"></el-input
      ></el-form-item>
      <el-form-item label="分类编码" prop="categoryCode"
        ><el-input :disabled="isEdit" v-model="formData.categoryCode"></el-input
      ></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </cacp-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onBeforeMount, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { TableAction } from '@cacp/ui'
import { useCategoryStore } from '@/stores'
import type { OrderCategoryInfo } from '@/types/order'
import { storeToRefs } from 'pinia'

const formRef = ref<FormInstance>()
const formData = reactive<OrderCategoryInfo>({
  categoryName: '',
  categoryCode: ''
})
const formRule = reactive<FormRules<OrderCategoryInfo>>({
  categoryName: [{ required: true, message: '请输入分类名称' }],
  categoryCode: [{ required: true, message: '请输入分类编码' }]
})
const dialogVisible = ref(false)
const isEdit = ref(false)
const actions = <Array<TableAction>>[
  {
    key: '1',
    text: '新建',
    onclick: onCreate,
    limit: 'none',
    position: 'left',
    type: 'primary'
  },
  {
    key: '2',
    text: '编辑',
    onclick: onEdit,
    limit: 'more',
    type: 'primary'
  },
  {
    key: '3',
    text: '删除',
    onclick: onDelete,
    limit: 'none',
    type: 'primary',
    confirm: '您确定要删除吗?'
  }
]

const stores = useCategoryStore()
const { initCategory, insertCategory, updateCategory, deleteCategory } = stores
const { categoryInfoList } = storeToRefs(stores)
function onEdit(row: OrderCategoryInfo) {
  isEdit.value = true
  dialogVisible.value = true
  nextTick(() => {
    formData.categoryCode = row.categoryCode
    formData.categoryName = row.categoryName
  })
}
function onDelete(row: OrderCategoryInfo) {
  deleteCategory(row.categoryCode)
}
function onCreate() {
  isEdit.value = false
  dialogVisible.value = true
  table.value.innerTableRef.doLayout()
}
function onSubmit() {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if (isEdit.value) {
        await updateCategory(formData)
      } else {
        await insertCategory(formData)
      }
      dialogVisible.value = false
    }
  })
}
function onCancel() {
  dialogVisible.value = false
}
function onDialogClosed() {
  formRef.value.resetFields()
}
const table = ref()
onBeforeMount(() => {
  initCategory()
})
</script>
<style></style>
