<template>
  <div class="login-container">
    <div class="affiche-box">
      <h4>{{ form.titile }}</h4>
      <p>
        {{ form.content }}
      </p>
      <div class="qrcode">
        <!-- <p>
          云上贵州防疫终端<br />
          管理平台账号运维群
        </p> -->
        <img :src="form.picture" alt="" />
      </div>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑公告</span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="是否展示公告">
          <el-radio v-model="form.isShow" :label="false">否</el-radio>
          <el-radio v-model="form.isShow" :label="true">是</el-radio>
        </el-form-item>
        <el-form-item label="公告标题">
          <el-input v-model="form.titile"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input v-model="form.content" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="公告照片">
          <el-upload
            ref="upload"
            name="file"
            class="avatar-uploader"
            :action="doUpload"
            :show-file-list="false"
            :http-request="doUploadAvatar"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            accept="image/png,image/gif,image/jpg,image/jpeg"
          >
            <img v-if="form.picture" :src="form.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="update" @click="systemNoticeEdit">修改</el-button>
      <el-button type="primary" class="update" plain @click="systemNoticeGetNotice">重置</el-button>
    </el-card>
  </div>
</template>

<script>
import { systemNoticeEdit, systemNoticeGetNotice } from "@/api/user_manage";
import { pictureLocal } from "@/api/ordinary_user.js";

export default {
  name: "bulletin_board",
  data() {
    return {
      doUpload: "", //上传图片地址
      dialogVisible: true,
      form: {
        isShow: false,
        titile: "",
        content: "",
        picture: null,
      },
    };
  },
  created() {
    this.systemNoticeGetNotice();
  },
  methods: {
    // 获取公告栏
    systemNoticeGetNotice() {
      systemNoticeGetNotice().then((res) => {
        this.form = res.data;
        // console.log(this.form.isShow);
      });
    },
    // 修改公告栏
    systemNoticeEdit(){
      systemNoticeEdit(this.form).then(res=>{
        // console.log(res);
        this.$message.success('修改成功!')
      })
    },
    // 图片上传前
    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;
      }
    },
    doUploadAvatar(obj) {
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.form.picture = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.affiche-box {
  float: left;
  position: relative;
  width: 353px;
  // height: 609px;
  // right: 15px;
  // top: 143px;
  // background: #7b6cdd;
  background: url('../../../assets/notice-bg.png') no-repeat;
  background-size: 100% 100%;
  box-shadow: 0px 2px 18px rgba(81, 223, 255, 0.1);
  border-radius: 20px;
  padding: 22px;
  color: #ffffff;
  margin-right: 80px;
  h4 {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 20px;
  }
  p {
    font-size: 17px;
    font-weight: 400;
    line-height: 181%;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 30px;
  }
  .qrcode {
    p {
      font-weight: 500;
      margin: 0;
      color: #ffffff;
      line-height: 142%;
      text-align: center;
    }
    img {
      width: 180px;
      // height: 180px;
      display: block;
      margin: 0 auto;
    }
  }
}
.el-card {
  float: left;
  width: 600px;
}
.avatar {
  width: 200px;
}
.update {
  margin: 20px 10px;
  float: right;
}

</style>
