<script setup lang="ts">
import { httpBusinesslist } from "/@/api/interest/organize";
import { computed, onMounted, ref } from "vue";
import { useVModel } from "@vueuse/core"

import { options } from "./../config/_options"

const initialData = {
  id: '', // id
  type: '', // 原因类型
  result: '', // 原因标题
  result_desc: '', // 备注
}

const emit = defineEmits(['submit'])
const props = withDefaults(defineProps<{ data: any; visible: boolean; disabled: boolean }>(),{ data: { order_use: '', id: '' } })

const business = ref<any[]>([])
const title = computed(() => data.value.id ? (props.disabled ? '查看订单用途' : '编辑订单用途') : '添加订单用途')

const data = useVModel(props, 'data')
const visible = useVModel(props, 'visible')

const formRef = ref<any | null>(null)

const rules = {
  type: [ { required: true,trigger: 'change',message: '请选择原因类型' }],
  result: [ { required: true,trigger: 'blur', message: '入库异常原因不能为空' }],
  result_desc: [{ required: true, trigger: 'blur',  message: '入库异常备注不能为空' }]
}

async function requestBusiness() {
  const res = await httpBusinesslist({ size: 100 })
  business.value = res.code === 0 ? res.data.list : []
}

function handleClose() {
  data.value = { ...initialData }
  visible.value = false
}

async function onSubmit() {
  try {
    await formRef.value.validate();
    emit("submit");
  } catch (err) {
    console.log(err);
  }
}

onMounted(requestBusiness)
</script>


<template>
  <ElDialog v-model="visible" :title="title" center @close="handleClose">
    <ElForm :model="data" :rules="rules" size="small" ref="formRef" :disabled="disabled">
      <ElFormItem label="原因类型" prop="type">
        <ElSelect v-model="data.type" style="width:100%" placeholder="原因类型">
          <ElOption v-for="option in options" :key="option.value" :value="option.value" :label="option.label" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="原因标题" prop="result">
        <ElInput v-model="data.result" style="width:100%" placeholder="原因标题" :maxlength="50" show-word-limit />
      </ElFormItem>


      <ElFormItem  label="原因备注" prop="result_desc">
        <ElInput v-model="data.result_desc" type="textarea" style="width:100%" placeholder="原因备注" :maxlength="250" show-word-limit />
      </ElFormItem>

      <div class="flex w-full justify-end">
        <ElButton type="primary" @click="onSubmit">保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
