<template>
  <div class="wrap">
    <div class="btn">
      <div class="chunk">
        <el-button icon="el-icon-close" @click="$router.back()">取消</el-button>
      </div>
      <div class="chunk">
        <el-button
          icon="el-icon-first-aid-kit
"
          type="primary"
          >保存</el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="upload">
        <div class="title">插件信息</div>
        <div class="uploadMain">
          <div class="left">
            <div class="title">插件上传</div>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :file-list="fileList"
              list-type="picture"
              :limit="1"
              :disabled="lookFlag"
            >
              <div class="line">
                <div class="left">
                  <el-image
                    style="width: 64px; height: 64px"
                    :src="iconBase64"
                    fit="cover"
                    alt="点击上传"
                  >
                    <template v-slot:error>
                      <div style="line-height: 64px; font-size: 12px">
                        logo上传
                      </div>
                    </template>
                  </el-image>
                </div>
                <div class="right" v-if="!lookFlag">
                  <el-button size="small" type="primary">点击上传</el-button>
                </div>
              </div>
              <div slot="tip" class="el-upload__tip" v-if="!lookFlag">
                只能上传jpg/png文件，且不超过2MB
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="form">
        <baseNewForm
          ref="mainForm"
          :spanNumber="24"
          :isFunBtn="false"
          :lookFlag="lookFlag"
          :formRule="!lookFlag"
          :formRow="formRow"
        ></baseNewForm>
      </div>
    </div>
  </div>
</template>

<script>
import configData from "./configData";
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
export default {
  data() {
    return {
      fileList: [],
      iconBase64: "",
      value1: true,
      ruleForm: {},
      lookFlag: false,
      formRow: configData.addForm,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList, "123");
    },
    handlePreview(file) {
      console.log(file, this.fileList, "12333");
    },
    beforeUpload(file) {
      console.log(file);
      if (
        file.type.split("/")[1] != "jpeg" &&
        file.type.split("/")[1] != "png"
      ) {
        this.$message({
          type: "warning",
          message: "只能上传jpg/png文件",
        });
        return false;
      } else {
        if (file.size >= 2000000) {
          this.$message({
            type: "warning",
            message: "文件大小不超过2MB",
          });
          return false;
        }
        let reader = new FileReader();
        let that = this;
        console.log(this, 111);
        reader.onloadend = function () {
          // 将文件转换成base64字符串
          var base64String = reader.result;
          that.iconBase64 = base64String;
          console.log(that.iconBase64);
        };
        reader.readAsDataURL(file);
        return false;
      }
    },
  },
  components: {
    baseNewForm,
  },
  created() {
    if (this.$route.query.id) {
      this.lookFlag = true;
    } else {
      this.lookFlag = false;
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-button {
  border-radius: 16px;
}
::v-deep .el-form-item {
  display: block !important;
}
.wrap {
  background-color: #fbfbfb;
  width: 100%;
  padding: 10px;
  overflow: auto;
  > .btn {
    display: flex;
    justify-content: flex-end;
    > .chunk {
      margin-left: 10px;
    }
  }
  > .main {
    margin-top: 10px;
    > .upload {
      background-color: #fff;
      border-radius: 16px;
      padding: 15px;
      > .title {
        font-size: 18px;
        font-weight: 600;
      }
      > .uploadMain {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .left {
          > .title {
            font-size: 18px;
            color: #999999;
            margin-bottom: 10px;
          }
          .line {
            display: flex;
            align-items: center;
            .left {
              border: 1px dashed #999999;
              width: 64px;
              height: 64px;
              > img {
                width: 100%;
                height: 100%;
              }
            }
            .right {
              margin-left: 15px;
            }
          }
        }
      }
    }
    > .form {
      margin-top: 10px;
      background-color: #fff;
      border-radius: 16px;
    }
  }
}
</style>