<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging"
    :searchFormProps="{labelWidth:'100px',labelPosition:'left'}">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="编码">
        <ElInput
          v-model="searchForm.sn"
          placeholder="编码"/>
      </ElFormItem>
      <ElFormItem label="终产品">
        <ElInput
          v-model="searchForm.goodsId"
          placeholder="终产品"/>
      </ElFormItem>
      <ElFormItem label="工艺名称">
        <ElInput
          v-model="searchForm.craftName"
          placeholder="工艺名称"/>
      </ElFormItem>
      <ElFormItem label="工艺版本号">
        <ElInput
          v-model="searchForm.craftVer"
          placeholder="工艺版本号"/>
      </ElFormItem>
      <ElFormItem label="是否可用">
        <ElCheckbox v-model="searchForm.canuse"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="编码" prop="sn"/>
      <ElTableColumn label="产品名称" prop="goodsName"/>
      <ElTableColumn label="产品编码" prop="goodsSn"/>
      <ElTableColumn label="工艺名称" prop="craftName"/>
      <ElTableColumn label="工艺版本号" prop="craftVer"/>
      <ElTableColumn label="工艺类型" prop="craftCategoryTxt"/>
      <ElTableColumn label="是否可用" prop="canuse">
        <template #default="{row}">
          <ElSwitch v-model="row.canuse" :disabled="row.id == '1'" @change="disabledCraftHandler($event,row.id)"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <CraftForm ref="craftForm" @edit-succ="research"/>
    <CraftFlow ref="craftFlow" @edit-succ="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import CraftApi from '@/pages/mfg/craft/craft-api.ts'
import CraftForm from '@/pages/mfg/craft/CraftForm.vue'
import { ElMessage } from 'element-plus'
import CraftFlow from '@/pages/mfg/craft-flow/CraftFlow.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const craftFormIns = useTemplateRef<InstanceType<typeof CraftForm>>('craftForm')
const craftFlowIns = useTemplateRef<InstanceType<typeof CraftFlow>>('craftFlow')

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

function paging(param: CraftTypes.SearchCraftParam) {
  return CraftApi.paging(param)
}
function disabledCraftHandler(val: string | number | boolean, id: string) {
  CraftApi.disable(id, val as boolean)
    .then(() => {
      ElMessage.success(val ? '启用成功' : '禁用成功')
      research()
    })
}

const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      craftFormIns.value?.open()
    },
  },
]
const actionColumn = reactive<ActionColumnType<CraftTypes.SearchCraftResult>>({
  tableActions: [
    {
      tooltip: '配置工艺流程',
      icon: 'Edit',
      action({row}) {
        craftFlowIns.value?.open(row)
      },
    },
  ],
})

</script>
