<template>
  <Dialog title="添加产品" v-model="show" width="800px">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="成交产品" prop="productId">
            <el-select
              v-model="form.productId"
              placeholder="选择成交产品"
              filterable
              @change="form.specsId = undefined"
            >
              <el-option
                v-for="item in prodOptions"
                :key="item.productId"
                :label="item.productName"
                :value="item.productId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="产品规格" prop="specsId">
            <el-select
              v-model="form.specsId"
              placeholder="选择规格"
              filterable
              :disabled="!form.productId"
            >
              <el-option
                v-for="item in specsOptions(form.productId)"
                :key="item.specsId"
                :label="item.specsName"
                :value="item.specsId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="成交数量" prop="signNum">
            <el-input-number v-model="form.signNum" :min="1" :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="生产状态" prop="isProduced">
            <el-radio-group v-model="form.isProduced">
              <el-radio :label="0">待生产</el-radio>
              <el-radio :label="1">已生产</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :autoSize="{ minRows: 3 }"
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="handleSave">保 存</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup name="DialogProduct">
import { addOrderProduct } from '@/api/clue/sign'

const message = useMessage() // 消息弹窗

const specsOptions = computed({
  get() {
    return (prodId) => {
      if (prodId) {
        return prodOptions.value.find((it) => it.productId == prodId).productSpecList
      }
      return []
    }
  }
})

const show = ref(false)
const form = ref({})
const rules = {
  productId: { required: true, message: '成交产品不可为空', trigger: 'change' },
  specsId: { required: true, message: '产品规格不可为空', trigger: 'change' },
  signNum: { required: true, message: '成交数量不可为空', trigger: 'blur' }
}

const prodOptions = ref([])

function open(signId, arr) {
  prodOptions.value = arr
  form.value.signId = signId
  form.value.isProduced = 0
  show.value = true
}
defineExpose({ open })

const emit = defineEmits(['success'])
const formRef = ref()
const formLoading = ref(false)
async function handleSave() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  // 提交请求
  formLoading.value = true
  try {
    await addOrderProduct(form.value)
    message.success('新增成功！')
    show.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped></style>
