// 添加/修改配置
<template>
  <div>
    <div class="head">
      <span>{{ isEdit ? "编辑标题须知" : "添加标题须知" }}</span>
      <el-button size="small" style="margin-left: 20px" @click="back"
        >取消</el-button
      >
      <el-button
        type="primary"
        size="small"
        style="margin-left: 20px"
        @click="submit"
        :loading="submitLoading"
        >确定</el-button
      >
    </div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="120px"
    >
      <div class="flex">
        <div class="left">
          <el-form-item label="配置名称" prop="name" required>
            <el-input v-model="form.name" placeholder="请输入配置名称"/>
          </el-form-item>
          <el-form-item label="标题" prop="title" required>
            <el-input
              v-model="form.title"
              placeholder="请输入标题内容"
            />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="公章_透明底" prop="officialSeal">
            <el-upload
              name="file"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :http-request="
                (event) => {
                  doUploadAvatar(event, 'officialSeal');
                }
              "
              :before-upload="beforeAvatarUpload"
              :auto-upload="true"
              accept="image/png,image/gif,image/jpg,image/jpeg"
            >
              <img
                v-if="!valueImg"
                class="upload-img"
                src="../../../../assets/default-img1.png"
                alt=""
              />
              <div v-else class="upload-img">
                <img :src="valueImg" />
                <span class="del-img" @click.stop="handleRemove('officialSeal')"
                  >x</span
                >
              </div>
            </el-upload>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="须知" prop="notice" required>
        <Editor @change="headelChange" :value="form.notice"></Editor>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Editor from "@/components/Editor/index.vue";
import { noticeAdd } from "@/api/titlelib";
import { pictureLocal } from "@/api/ordinary_user";

export default {
  props: {
    isShowUpdate: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Editor,
  },
  data() {
    return {
      form: {
        name: null,
        title: "",
        notice: "",
      },
      rules: {
        name: [{ required: true, message: "不能为空!", trigger: "blur" }],
        title: [
          { required: true, message: "不能为空!", trigger: "blur" },
        ],
        notice: [
          { required: true, message: "不能为空!", trigger: "blur" },
        ],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
      valueImg:'',
    };
  },
  mounted() {},

  methods: {
    open(obj) {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          this.form = obj;
          this.valueImg = obj.officialSeal;
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
        console.log(this.form.notice);
      });
    },
    headelChange(value) {
      this.form.notice = value.html;
      // this.form.text = value.text;
    },
    submit(e) {
      e.preventDefault();
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          noticeAdd(this.form).then(() => {
            this.back();
            this.$emit("success");
            this.submitLoading = false;
          });
        }
      });
    },
    back() {
      this.$emit("back");
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
        return;
      }
    },
   async doUploadAvatar(obj, type) {
      this.listLoading = true;
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.valueImg = res.data;
        this.listLoading = false;
        this.form.officialSeal=res.data
        this.$set(this.form,type, res.data);
      });
    },
    handleRemove(type) {
      if (type) {
        this.form[type] = null;
        this.valueImg =''
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
.head {
  margin-bottom: 32px;
  span {
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
.flex {
  display: flex;
}
.left,
.right {
  flex: 1;
}
.left {
  margin-right: 10px;
}
.right {
  margin-left: 10px;
}
.avatar-uploader .upload-default {
  border: 1px dashed #d9d9d9;
  border-radius: 0;
  cursor: pointer;
  width: 70px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-default .avatar-uploader-icon {
  color: #8c939d;
  width: 22px;
  height: 18px;
  font-size: 20px;
  margin-top: 24px;
}
.upload-default .el-upload__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #ced3e3;
}
.upload-img {
  width: 100px;
  height: 100px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
  .del-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #83878f;
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    border-radius: 48%;
    line-height: 18px;
  }
}
</style>
