<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="求助电话" prop="helpPhone">
        <el-input v-model="form.helpPhone" placeholder="请输入求助电话" />
      </el-form-item>
      <el-form-item label="展示图片">
        <imageUpload v-model="form.showPictures" />
      </el-form-item>
      <el-form-item label="简介1" prop="briefText1">
        <el-input v-model="form.briefText1" placeholder="请输入简介1" />
      </el-form-item>
      <el-form-item label="简介2" prop="briefText2">
        <el-input v-model="form.briefText2" placeholder="请输入简介2" />
      </el-form-item>
      <el-form-item label="简介3" prop="briefText3">
        <el-input v-model="form.briefText3" placeholder="请输入简介3" />
      </el-form-item>
      <el-form-item label="简介4" prop="briefText4">
        <el-input v-model="form.briefText4" placeholder="请输入简介4" />
      </el-form-item>
      <el-form-item label="详情">
        <editor v-model="form.content" :min-height="192" />
      </el-form-item>
      <el-form-item label="背景图片1">
        <imageUpload v-model="form.bgImg1" />
      </el-form-item>
      <el-form-item label="背景图片2">
        <imageUpload v-model="form.bgImg2" />
      </el-form-item>
      <el-form-item label="背景图片3">
        <imageUpload v-model="form.bgImg3" />
      </el-form-item>
      <el-form-item label="背景图片4">
        <imageUpload v-model="form.bgImg4" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <!-- <el-button @click="cancel">取 消</el-button> -->
    </div>
  </div>
</template>

<script>
import { getAboutUs, addAboutUs, updateAboutUs } from "@/api/management/aboutUs";
export default {
  name: "AboutUs",
  data () {
    return {
      // 表单参数
      form: {}
    }
  },
  methods: {
    init (aboutUsId) {
      getAboutUs(aboutUsId).then(response => {
        if (response.code == 200) {
          if (response.data != null) {
            this.form = response.data;
          } else {
            this.reset();
          }
        }else{
            this.msgError("获取信息出错！");
        }
      });
    },
    // 表单重置
    reset () {
      this.form = {
        aboutUsId: null,
        title: null,
        helpPhone: null,
        showPictures: null,
        briefText1: null,
        briefText2: null,
        briefText3: null,
        briefText4: null,
        content: null,
        bgImg1: null,
        bgImg2: null,
        bgImg3: null,
        bgImg4: null,
        createTime: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.aboutUsId != null) {
            updateAboutUs(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAboutUs(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
  created () {
    this.init(1);
  },
}
</script>

<style>
</style>