<template>
    <!-- 系统参数配置 -->
    <el-dialog v-dialogDrag width="40%" :close-on-click-modal="false" title="系统参数设置" :visible.sync="visible"
      :before-close="cancel" top="10%">
      <el-form :model="form" size="mini" :rules="rules" ref="ruleForm" label-width="120px" class="diaForm">
        <el-form-item label="登录页名称" prop="loginName">
          <el-input clearable placeholder="请输入内容" v-model="form.loginName" class="input-with-select" maxlength="20" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="登录页背景" prop="loginBg" class="bg-item">
            <div class="left">
                <img :src="form.loginBg" />
            </div>
            <div class="right">
                <el-upload
                    class="upload-demo"
                    :auto-upload="false"
                    action="#"
                    :before-remove="handleFileRemove"
                    :before-upload="handleBeforeUpload"
                    :on-change="handleFileChange" 
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1MB,1920*1200</div>
                </el-upload>
            </div>
        </el-form-item>
         <el-form-item label="系统名称" prop="sysName">
          <el-input clearable placeholder="请输入内容" v-model="form.sysName" class="input-with-select" maxlength="10" show-word-limit>
          </el-input>
        </el-form-item>
         <el-form-item class="btnClass">
          <el-button @click="submit('ruleForm')" icon="el-icon-tickets" type="primary" size="mini">确定</el-button>
          <el-button @click="cancel" icon="el-icon-close" type="info" size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </template>
  <script>
    import {
      message,
      loading,
      loadingClose
    } from "@/utils/common";
    import {
      tif2jpge
    } from "@/api/tool";
   export default {
      props: {
        visible: {
          type: Boolean,
          default: () => false,
        },
        form:{
            type:Object,
            default:()=>{}
        }
      },
      data() {
        return {
            fileList:[],
            ruleForm: {
                loginName: "",
                loginBg:"",
                sysName:"",
            },
            imageDataUrl:'',
            rules: {
                loginName: [{
                    required: true,
                    message: "请输入登录页名称",
                    trigger: "change"
                }],
                loginBg: [{
                    required: true,
                    message: "请上传背景图片",
                    trigger: "change"
                }],
                sysName: [{
                    required: true,
                    message: "请输入系统名称",
                    trigger: "change"
                }],
            },
        };
      },
      methods: {
        async handleFileChange(file,fileList){
            if(file.raw.type != 'image/png' && file.raw.type !='image/jpeg'){
                this.$message.error("上传图片只能是 jpg、png 格式!");
                this.fileList = [];
                return false;
            }
            // 自定义逻辑判断
            if (file.size > 1 * 1024 * 1024) {
                this.$message({ type: 'error', message: '文件大小不能超过1MB' });
                this.fileList = [];
                return false; // 返回false表示取消上传
            } 
            this.fileList = fileList;
            let base64Data = await this.convertToBase64(this.fileList[0]);
            this.imageDataUrl = `data:image/png;base64,${base64Data}`;
            this.form.loginBg = this.imageDataUrl;
        },
        // 删除之前钩子
        handleFileRemove(file, fileList) {
            this.fileList = fileList;
        },
        handleBeforeUpload(file){
            
            // 自定义逻辑判断
            if (file.size > 1 * 1024 * 1024) {
                this.$message({ type: 'error', message: '文件大小不能超过1MB' });
                return false; // 返回false表示取消上传
            } 
            if(file.type=='image/jpeg' || file.type=='image/png'){
                // 将图片转成base64;
                this.convertToBase64(file);
            }else{
                this.$message.error("上传图片只能是 jpg、png 格式!");
                return;
            }
        },
        handleExceed(file) {
            if (file.type == 'image/jpeg' || file.type=='image/png') {
                this.$message.error("上传图片只能是 jpg、png 格式!");
                return;
            }
            

        },
        //上传成功
        upSuccess(response, file, fileListF) {
            console.log()
        },
        // 二进制转base64
        convertToBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => {
                    const base64Data = reader.result.split(",")[1];
                    resolve(base64Data);
                };
                reader.onerror = error => reject(error);
                reader.readAsDataURL(file.raw);
            });
        },
        submit(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              console.log(this.form)
              let data = {...this.form,loginBg:this.imageDataUrl?this.imageDataUrl:this.form.loginBg}
              this.$emit('clickSubmit',data);
              
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        cancel() {
          this.$refs.ruleForm.resetFields()
          this.$emit("cancel");
        },
      },
    };
  
  </script>
  <style lang='scss' scoped>
    .btnClass {
      text-align: center;
    }
    .bg-item{
        ::v-deep .el-form-item__content{
            display:flex;
            flex-direction: row;
        }
        .left{
            margin-right:10px;
            width:120px;
            height:60px;
            img{
              width:120px;
              height:100%;
            }
        }
    }
  
  </style>
  