<template>
  <el-form :model="formData" :rules="formRules" ref="form" style="max-width: 1048px" class="form">
    <el-form-item label="能力类型" prop="business_type_id">
      <el-select
        v-model="formData.business_type_id"
        placeholder="请选择能力类型"
        style="width: 100%"
        @change="changeType"
        :disabled="!!route.query.id">
        <el-option v-for="item in props.businessList" :key="item.dict_id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="上传图标" prop="logo">
      <bg-upload-image
        v-model="formData.logo"
        :fileSize="500"
        :fileSizeUnit="'KB'"
        :showTips="true"
        customTips="请选择图片上传：大小36 * 36像素支持jpg、jpeg、png格式，图片需小于500KB"
        :limit="1"
        listType="picture-card"
        @change="changeLogo"
        :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../../request/http.js";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const form = ref(null);
const props = defineProps({
  businessList: {
    type: Array,
    default: [],
  },
});
const state = reactive({
  formData: {
    business_type_id: "",
    logo: [],
  },
  formRules: {
    business_type_id: [{ required: true, message: "请选择业务类型", trigger: "change" }],
    logo: [{ required: true, message: "请上传图标", trigger: "change" }],
  },
});

const emit = defineEmits(["action", "changeType"]);

const changeLogo = (value) => {
  if (value && value.length > 0) {
    form.value.clearValidate("logo")
  }
}

const submitForm = async () => {
  if (!form) return;
  await form.value.validate((valid, fields) => {
    if (valid) {
      emit("action", state.formData);
    } else {
      emit("action", null);
    }
  });
};

const changeType = (val) => {
  emit("changeType", val);
};

const clearForm = () => {
  if (!form) return;
  form.value.resetFields();
};

const setForm = (data) => {
  Object.assign(state.formData, data);
};

onBeforeMount(() => {});

const { formData, formRules } = toRefs(state);

defineExpose({ submitForm, clearForm, setForm });
</script>

<style lang="scss" scoped>
.form {
  .el-form-item {
    display: block;
  }
  :deep().bg-upload {
    .el-upload--picture-card {
      width: 56px;
      height: 56px;
      background-color: #fff;
      border: 1px solid #dadee7;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 56px;
      height: 56px;
    }
  }
}
</style>
