<template>
  <div class="base">
    <div class="base-content">
      <p class="title">系统名称与LOGO配置</p>
      <el-form ref="ruleFormRef" :model="form">
        <el-form-item label="系统名称" prop="name">
          <el-input  v-model="form.name"/>
        </el-form-item>
        <el-form-item label="系统图标" prop="logo">
          <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
          >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <br>
        <p>只支持.jpg、.png格式,最多上传1张，单张大小不超过500kb</p>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存配置</el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { UploadProps, UploadUserFile } from 'element-plus'
const form = reactive({
  name: '',
  remark: '',
  logo: ''
});
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  }
])

const cancel = () => {
  console.log('cancel');
};
const save = () => {
  console.log('save');
};
</script>

<style lang="scss" scoped>
.base {
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  .base-content {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
}
</style>
