<template>
  <div class="app-container">
    <el-form ref="form" :model="form"  label-width="80px">
      <el-form-item label="标题logo" prop="description">
        <div style="width: 50%; margin: 0 auto">
          <img
            :src="previewUrl + form.url"
            style="width: 100px; object-fit: fill"
            
          />
        </div>
      </el-form-item>
      <el-form-item label="logo" prop="url">
        <el-upload
          ref="upload"
          :action="uploadUrl"
          :on-success="
            (res, file) => {
              handleUploadSuccess(res, file, 'pic');
            }
          "
          :on-error="handleUploadError"
          name="file"
          :show-file-list="false"
          :headers="headers"
          accept=".jpg, .jpeg, .png"
        >
          <el-button size="small">
            选择标题logo
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png/jpeg文件
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { listSet, getSet, delSet, addSet, updateSet } from "@/api/system/perSet";
import { getToken } from "@/utils/auth";
export default {
  name: "Set",
  data() {
    return {
      previewUrl: process.env.VUE_APP_BASE_API,
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【个性化设置】表格数据
      setList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        url: null
      },
      // 表单参数
      form: {
        id:null,
        url:null,
        title:null,
      },
      // 表单校验
      rules: {
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        title: "",
        // 是否禁用上传
        isUploading: false,
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      
      listSet().then(response => {
        if(response.code===200&&response&&response.rows&&response.rows[0]){
          this.form = response.rows[0];
        }else{
          this.form ={
            id:null,
            url:null,
            title:null,
          }
        }
        
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSet(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            addSet(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    /**文档预览**/
    preView(file) {
      console.log(file);
      let originUrl = process.env.VUE_APP_BASE_API + file; //要预览文件的访问地址'
      window.open(originUrl);
    },

    //上传图片
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(response, file, type) {
      console.log(response, file, type,'response, file, type');
      // 获取富文本组件实例

      // 如果上传成功
      if (response.code == 200) {
        if (type === "pic") {
          this.form.url = response.fileName;
        }
        if (type === "pdf") {
          this.form.file.push(response.fileName);
          this.form.fileName.push(response.originalFilename);
        }

        // 获取光标所在位置
      } else {
        this.$message.error("上传失败");
      }
    },
    delName(index) {
      // 在点击时删除数组中的相应项
      this.form.file.splice(index, 1);
      this.form.fileName.splice(index, 1);
    },
    handleUploadError() {
      this.$message.error("上传失败");
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container{
  background-color: #fff;
}
</style>