<script setup lang="ts">
import { ref } from "vue";
import { message } from "@/utils/message";
import { getToken } from "@/utils/auth";
const ruleFormRef = ref();
const formRules = ref({
  is_active: [
    { required: true, message: "请选择使用状态", trigger: "change" }
  ],
  theme_color: [
    { required: true, message: "请选择主题色", trigger: "change" }
  ],
  auxiliary_color: [
    { required: true, message: "请选择辅助色值", trigger: "change" }
  ],
  file_url: [{ required: true, message: "请输入文件地址", trigger: "blur" }],
  times: [
    { required: true, message: "请选择有效期", trigger: "change" }
  ],
  theme_name: [{ required: true, message: "请输入主题名称", trigger: "blur" }],
});
const props = defineProps(["formInline"]);
const newFormInline = ref(
  props.formInline
    ? props.formInline
    : {
      theme_name: "",
      theme_color: "",
      auxiliary_color: "",
      file_url: "",
      is_active: 0,
      times: []
    }
);
function getRef() {
  return ruleFormRef.value;
}
function chanageEditorValue(val) {
  newFormInline.value.content = val
}
function onExceed() {
  message("最多上传1个文件，请先删除在上传");
};
function handleFileSuccess({ data, code }, file, fileList) {
  // console.log(file)
  // console.log(fileList)
  // debugger
  if (code) {
    fileList.value = fileList.map(ele => { return ele.response.data.url })
    // console.log(fileList.value)
    newFormInline.value.file_url = fileList.value.join(',')
  } else {
    fileList.value = []
    newFormInline.value.file_url = fileList.value.join(',')
  }
}
defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
    <el-form-item label="主题名称" prop="theme_name">
      <el-input v-model="newFormInline.theme_name" placeholder="请输入主题名称"></el-input>
    </el-form-item>
    <el-form-item label="主题色色值" prop="theme_color">
      <el-color-picker v-model="newFormInline.theme_color"></el-color-picker>
    </el-form-item>
    <el-form-item label="辅助色值" prop="auxiliary_color">
      <el-color-picker v-model="newFormInline.auxiliary_color"></el-color-picker>
    </el-form-item>
    <el-form-item label="文件地址" prop="file_url">
      <el-input v-model="newFormInline.file_url" placeholder="请输入文件地址"></el-input>
    </el-form-item>
    <el-form-item label="有效期" prop="times">
      <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="newFormInline.times" type="daterange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="使用状态" prop="is_active">
      <el-radio-group v-model="newFormInline.is_active">
        <el-radio label="暂不使用" :value="0" />
        <el-radio label="使用" :value="1" />
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
