<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close
    width="fit-content"
    @close="dialogCloseHandler">
    <ElForm ref="craftForm"
      :model="formData"
      :rules="rules"
      class="form-panel"
    >
      <ElFormItem label="产品" prop="goodsId">
        <ADropTable v-model="formData.goodsId as string" :columns="dropTableColumns" :loader="dropTableLoader" display-field="goodsName"/>
      </ElFormItem>
      <ElFormItem label="工艺名称" prop="craftName">
        <ElInput
          v-model="formData.craftName"

          placeholder="工艺名称"/>
      </ElFormItem>
      <ElFormItem label="工艺版本号" prop="craftVer">
        <ElInput
          v-model="formData.craftVer"

          placeholder="工艺版本号"/>
      </ElFormItem>
      <ElFormItem label="工艺类型" prop="craftCategory">
        <ElSelect v-model="formData.craftCategory">
          <ElOption label="自动化" value="ZiDongHua"/>
          <ElOption label="人工" value="RenGong"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="备注" prop="memo">
        <ElInput
          v-model="formData.memo"

          placeholder="备注"/>
      </ElFormItem>
      <ElFormItem label="是否可用" prop="canuse">
        <ElCheckbox
          v-model="formData.canuse"

          placeholder="是否可用"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import CraftApi from '@/pages/mfg/craft/craft-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
} from 'element-plus'
import ADropTable from '@/components/a-drop-table/ADropTable.vue'
import GoodsApi from '@/pages/gds/goods/goods-api.ts'

const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')

const craftFormIns = useTemplateRef<FormInstance>('craftForm')

const formData = Utils.resetAble(reactive<CraftTypes.SearchCraftResult>({}))
const rules = reactive<FormRules<CraftTypes.SearchCraftResult>>({
  goodsId: [ {required: true, message: '请选择产品', trigger: 'change'} ],
  craftName: [ {required: true, message: '请填写工艺名称', trigger: 'blur'} ],
  craftVer: [ {required: true, message: '请填写工艺版本号', trigger: 'blur'} ],
  craftCategory: [ {required: true, message: '请填写工艺类型', trigger: 'blur'} ],
  canuse: [ {required: true, message: '请选择是否可用', trigger: 'blur'} ],
})
const dropTableColumns = [
  {
    label: '产品编码',
    prop: 'sn',
  },
  {
    label: '产品名称',
    prop: 'goodsName',
  },
]
const dropTableLoader = (param: GoodsTypes.SearchGoodsParam) => {
  return GoodsApi.paging(param).then(res => res.data)
}

function dialogCloseHandler() {
  formData.$reset()
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (formData.id != null) {
    FormUtil.submit(craftFormIns, () => CraftApi.modify(formData))
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
    FormUtil.submit(craftFormIns, () => CraftApi.add(formData))
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: CraftTypes.SearchCraftResult = {}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      CraftApi.detail(data.id!)
        .then(res => {
          formData.$reset(res.data)
        })
    } else {
      status.value = 'add'
      formData.$reset(data)
    }
  },
})
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
