<template>
  <el-form
    :model="formData"
    :rules="formRules"
    ref="form"
    style="max-width: 1048px"
    class="form"
  >
    <el-form-item label="能力类型" prop="type">
      <el-select v-model="formData.type" placeholder="请选择能力类型" style="width: 100%" @change="changeType">
        <el-option
          v-for="item in TypeList"
          :key="item.dict_id"
          :label="item.name"
          :value="item.dict_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上传图标" prop="icon">
       <bg-upload-image v-model="formData.icon" :fileSize="500" :fileSizeUnit="'KB'" :showTips="true" customTips="请选择图片上传：大小36 * 36像素支持jpg、png等格式，图片需小于500KB" :limit="1" listType="picture-card" :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 state = reactive({
  formData: {
    type: "",
    icon: [],
  },
  formRules: {
    type: [
      { required: true, message: '请选择业务类型', trigger: 'change' },
    ],
    icon: [
      { required: true, message: '请上传图标', trigger: 'change' },
    ],
  },
  TypeList: [],
})

const emit = defineEmits(['action','changeType'])

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);
}

const getTypeList = () => {
  axios
    .get("/apaas/system/v5/dictionary/alllist")
    .then((res) => {
      if (res.data.code == 200) {
        let data = res.data.data || []
        data.forEach(e => {
          if (e.classify_id == "eb9c7d70-c123-42b7-8e61-dde1b022b669") {
            state.TypeList = e.list || [];
          }
        })
      }else {
        ElMessage.error(res.data.data)
      }
    })
}

onBeforeMount(() => {
  getTypeList()
})
    
const {
  formData,
  formRules,
  TypeList,
} = 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>