<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import uploadImage from '@/components/UploadImage/index.vue';
import { queryAdornmentList } from '@/api/modules/activities';
const ruleFormRef = ref();
const formRules = ref({
  // level: [{ required: true, message: "请输入等级", trigger: "blur" }],
  // change_value: [{ required: true, message: "请输入升级所需经验值", trigger: "blur" }],
  // image: [{ required: true, message: "请上传等级图标", trigger: "change" }],
  // rights_icon: [{ required: true, message: "请上传特权图标", trigger: "change" }],
  // name: [{ required: true, message: "请输入等级名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
});
// 挂件上的头像位置：0-上，1-右上，2-右，3-右下，4-下，5-左下，6-左，7-左上
const directionList = ref([
  { name: '上', id: 0 },
  { name: '右上', id: 1 },
  { name: '右', id: 2 },
  { name: '右下', id: 3 },
  { name: '下', id: 4 },
  { name: '左下', id: 5 },
  { name: '左', id: 6 },
  { name: '左上', id: 7 }
])
const props = defineProps(["formInline"]);
const newFormInline = ref(
  props.formInline
    ? props.formInline
    : {
      level: "",
      name: "",
      image: "",
      change_value: "",
      rights_icon: "",
      bg_image: "",
      color: ""
    }
);
function getRef() {
  return ruleFormRef.value;
}
function handleFileSuccess(list) {
  newFormInline.value.image = list.join(',')
}
function handleIconSuccess(list) {
  newFormInline.value.rights_icon = list.join(',')
}
function handleBgSuccess(list) {
  newFormInline.value.pendant = list.join(',')
}
const AdornmentList = ref([])
const getAdornmentList = async () => {
  // 坐骑是2 头像框是3
  const { data, code } = await queryAdornmentList({ type: 2 })
  AdornmentList.value = code ? data : []
}
const AvatarList = ref([])
const getAvatarList = async () => {
  // 坐骑是2 头像框是3
  const { data, code } = await queryAdornmentList({ type: 1 })
  AvatarList.value = code ? data : []
}
onBeforeMount(() => {
  getAdornmentList()
  getAvatarList()
})
defineExpose({ getRef });
</script>

<template>
  <!-- pendant  cp装扮  rights_icon CP特效地址-->
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
    <el-form-item label="等级/段位" prop="level">
      <el-input-number v-model="newFormInline.level" :min="0" placeholder="请输入等级" />
    </el-form-item>
    <el-form-item label="等级名称" prop="name">
      <el-input v-model="newFormInline.name" clearable placeholder="请输入等级名称" />
    </el-form-item>
    <el-form-item label="等级图标" prop="image">
      <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.image" />
    </el-form-item>
    <el-form-item label="升级所需经验值" prop="change_value">
      <el-input-number v-model="newFormInline.change_value"></el-input-number>
    </el-form-item>
    <el-form-item label="CP特效" prop="rights_icon">
      <uploadImage @handleSuccess="handleIconSuccess" :acceptType="'.mp4'" :limit="1"
        :echoUrl="newFormInline.rights_icon" />
    </el-form-item>
    <el-form-item label="CP装扮" prop="pendant">
      <uploadImage @handleSuccess="handleBgSuccess" :acceptType="'.mp4'" :limit="1" :echoUrl="newFormInline.pendant" />
    </el-form-item>
    <el-form-item label="头像框" prop="dress_id">
      <el-select v-model="newFormInline.dress_id" placeholder="请选择头像框">
        <el-option v-for="item in AvatarList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="坐骑" prop="jiajia_id">
      <el-select v-model="newFormInline.jiajia_id" placeholder="请选择坐骑">
        <el-option v-for="item in AdornmentList" :key="item.id
          " :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label=" 挂件位置" prop="direction">
      <el-select v-model="newFormInline.direction" placeholder="请选择位置">
        <el-option v-for="item in directionList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
