<template>
  <my-dialog
    :visible="visible"
    :header="'绑定供应商'"
    :width="600"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" :data="formData" :rules="rules">
      <t-form-item label="供应商：" name="id">
        <!-- <t-input v-model="formData.id"></t-input> -->
        <select-supplier
          v-model="formData.id"
          :options="options"
        ></select-supplier>
      </t-form-item>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">保存</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="AddUserDialog">
import useClearDialog from '@/hooks/useClearDialog';
import { ref, computed } from 'vue';
import { userBindSupplier, getUserBindSupplier } from '@/api/user';

const props = defineProps({
  visible: Boolean,
  curRow: Object,
  options: Array,
});
const emit = defineEmits(['close', 'success']);
const formRef = ref(null);
const getDetail = async () => {
  getUserBindSupplier({ id: props.curRow.id }).then((res) => {
    res && (formData.id = res.id);
  });
};
const { formData, isEdit } = useClearDialog(
  {
    id: '',
  },
  props,
  formRef,
  getDetail
);

const rules = {
  id: [
    {
      required: true,
      message: '请选择供应商',
      type: 'error',
      trigger: 'change',
    },
  ],
};
const bindHandler = () => {
  userBindSupplier({
    supplierId: formData.id,
    id: props.curRow.id,
  }).then(() => {
    emit('success');
  });
};
const save = () => {
  formRef.value.validate().then(async (result) => {
    if (result === true) {
      bindHandler();
    }
  });
};
</script>
