<template>
  <div class="app-container" style="height:1000px;">
    <el-card style="width: 80%; margin: auto">
      <!--      <div class="container">-->
      <el-row type="flex" justify="end">
        <el-button type="primary" style="width: 100px" @click="submitForm">提交</el-button>
      </el-row>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item
          prop="gardenEmblem"
          style="display: flex;text-align: center;justify-content: center"
          label-width="0"
        >
          <picAvatar :pic-info.sync="formData.gardenEmblem"></picAvatar>
          <div>上传园徽</div>
        </el-form-item>
        <el-form-item label="成立时间" prop="timeOfEstablishment">
          <el-date-picker v-model="formData.timeOfEstablishment" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '100%'}" placeholder="请选择成立时间" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="学校名称" prop="kindergartenName">
          <el-input v-model="formData.kindergartenName" placeholder="请输入学校名称" clearable
                    :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="法人代表" prop="legalRepresentative">
          <el-input v-model="formData.legalRepresentative" placeholder="请输入法人代表" clearable
                    :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="园所介绍" prop="introduce">
          <Editor v-model="formData.introduce" :min-height="300"></Editor>
        </el-form-item>
        <el-form-item label="校训" prop="schoolMotto">
          <el-input
            v-model="formData.schoolMotto"
            type="textarea"
            placeholder="请输入校训"
            :autosize="{minRows: 3}"
            :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="学校成就" prop="synopsis">
          <el-input
            v-model="formData.synopsis"
            type="textarea"
            placeholder="请输入学校成就"
            :autosize="{minRows: 3}"
            :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入地址" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="师资力量" prop="teacherResources">
          <Editor v-model="formData.teacherResources" :min-height="300"></Editor>
        </el-form-item>
        <el-form-item size="large" style="display: flex;text-align: center;justify-content: center">
        </el-form-item>
      </el-form>
      <!--      </div>-->

      <!--      <el-backtop target=".app-container">-->
      <!--      </el-backtop>-->

    </el-card>
  </div>
</template>

<script>
import picAvatar from "@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar";
import {getInfo, editInfo} from "@/api/smartSchool/schoolManage/introduce/introduce";
import { closeCurrentTab } from "../../../../../utils/utilLibrary/routerBatch/routerBatch";

export default {
  name: "index",
  components: {picAvatar},
  watch: {
    pic: {
      handler(newValue, oldValue) {
        this.formData.gardenEmblem = newValue
      }
    }
  },
  created() {
    this.getSchoolIntroduce();
  },
  data() {
    return {
      picUrl: "",
      clientHeight: document.body.clientHeight,
      isShowPic: false,
      pic: {picUrl: ''},
      p: '1',
      formData: {
        gardenEmblem: '',
        timeOfEstablishment: null,
        kindergartenName: null,
        legalRepresentative: null,
        introduce: null,
        schoolMotto: null,
        synopsis: null,
        address: null,
        teacherResources: null,
      },
      rules: {
        legalRepresentative: [{//第一种验证方式
          trigger: "blur",
          validator: (rule, value, callback) => {
            // 中文验证
            let reg = /[^\u4e00-\u9fa5]/;
            if (value === "") {
              callback(new Error("法人代表"));
            } else if (reg.test(value)) {
              callback(new Error("法人代表只能为中文"));
            } else {
              callback();
            }
            if (!this.checkSpecialKey(value)) {
              callback(new Error("不能含有特殊字符！！"));
            } else {
              callback();
            }
          }
        }, {
          required: true,
          message: "法人代表不能为空",
          trigger: "blur",
        }
        ],
      },
    }
  },
  methods: {
    // 校验输入框不能有特殊字符
    checkSpecialKey(str) {
      let specialKey =
        "[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
      for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false;
        }
      }
      return true;
    },
    /** 查询学校信息 */
    getSchoolIntroduce() {
      this.loading = true;
      getInfo().then(response => {
        if (response.data) {
          this.formData = response.data;
          this.picUrl = this.formData.gardenEmblem;
        }
        this.isShowPic = true;
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        editInfo(this.formData).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("修改成功");
            this.getSchoolIntroduce()

            //关闭当前页面 2023-08-16 DXS
            this.closeCurrentTab(true)

            // 关闭当前tab页签，打开新页签
            // const obj = {path: "/schoolManage/campusInfo"};
            // this.$tab.closeOpenPage(obj);
            // localStorage.setItem('gardenEmblem',this.formData.gardenEmblem)
          }
        })
      })
    },

    closeCurrentTab,

    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    getSchoolInfoPic(val) {
      this.picUrl = val
    }
  }
}

</script>
<style scoped>
.container {
  width: 70%;
  margin: 20px auto;
}
</style>
