<script setup lang="tsx">
import { watch, ref } from 'vue'
import { productUnit } from '@/api/goods/types'
import { getProductUnitDetail, addProductUnit, putProductUnit } from '@/api/goods'
import { ElForm, ElFormItem, ElInput, ElMessage, ElRadioGroup, ElRadio } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: ''
  }
})
const modelValue = defineModel<boolean>()
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['submit'])
const submit = async () => {
  if (ruleFormRef.value) {
    const valid = await ruleFormRef.value.validate((valid, fields) => {
      // console.log(fields, 'fields')
      if (!valid) {
        console.log('error submit!', fields)
      }
    })
    if (valid) {
      loadingData.value = true
      try {
        let re: any = {}
        if (form.value.id > 0) {
          re = await putProductUnit(form.value)
        } else if (form.value.id == 0) {
          re = await addProductUnit(form.value)
        }
        if (re.status == 200) {
          ElMessage({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
        }
        form.value = {
          name: '',
          id: 0,
          type: 'unit',
          pid: 0,
          sort: 0,
          is_show: 1,
          path: '',
          is_weigh: 0
        }
        emit('submit')
      } catch (error) {
        console.log(error)
      } finally {
        loadingData.value = false
      }
    }
  }
}
const loadingData = ref(false)
watch(
  () => props.id,
  async (value) => {
    if (value * 1 === 0) return
    loadingData.value = true
    const res = await getProductUnitDetail(value)
    form.value = res.data
    loadingData.value = false
  },
  {
    deep: true,
    immediate: true
  }
)
const form = ref<productUnit>({
  name: '',
  id: 0,
  type: 'unit',
  pid: 0,
  sort: 0,
  is_show: 1,
  path: '',
  is_weigh: 0
})
</script>

<template>
  <Dialog v-model="modelValue" :title="title" width="600px">
    <el-form v-loading="loadingData" ref="ruleFormRef" :model="form" label-width="auto">
      <el-form-item
        prop="name"
        label="单位名称"
        :rules="[{ required: true, message: '单位名称', trigger: 'blur' }]"
      >
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item prop="sort" label="排序">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item prop="is_weigh" label="是否称重">
        <el-radio-group v-model="form.is_weigh" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="is_show" label="是否显示">
        <el-radio-group v-model="form.is_show" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <BaseButton type="primary" :loading="loadingData" @click="submit">
        {{ t('exampleDemo.save') }}
      </BaseButton>
      <BaseButton @click="modelValue = false">{{ t('dialogDemo.close') }}</BaseButton>
    </template>
  </Dialog>
</template>
