<template>
  <div class="app-container">
    <el-row type="flex">
      <el-col :span="16">
        <div class="shcoolIntroduction">
          <div class="header-title">
            <h2 style="display: inline-block; font-weight: 800">学校介绍</h2>
            <el-button icon="el-icon-edit" size="mini" @click="editSchool"
                       style="margin-left:20px">编辑
            </el-button>
          </div>
          <p
            class="introduce-content"
            style="padding: 0 20px 0 20px"
            v-html="form.introduce"
          ></p>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="height: 100%; display: flex; margin-top: 12px">
          <div style="margin: auto; width: 100%; height: 300px">
            <el-carousel height="300px">
              <el-carousel-item v-for="item in images" :key="item.id">
                <el-image
                  :src="item.url"
                  :preview-src-list="[item.url]"
                  style="width: 100%; height: 300px;border:4px solid #ccc"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="height: 40px"></div>
    <div class="infomationTable">
      <el-row :gutter="20">
        <el-col :span="4">
          <span class="info-label">学校名称</span>
        </el-col>
        <el-col :span="10">
          <a href="http://www.dysez.net/index.php/" target="_blank">{{
              form.kindergartenName
            }}</a>
        </el-col>
        <el-col :span="4">
          <span class="info-label">成立时间</span>
        </el-col>
        <el-col :span="6">
          <span>{{ form.timeOfEstablishment }}</span>
        </el-col>
      </el-row>
      <div
        style="
          width: 100%;
          border-bottom: 2px dashed #ccc;
          margin: 5px 0 10px 0;
        "
      ></div>

      <el-row :gutter="20">
        <el-col :span="4">
          <span class="info-label">校&nbsp;&nbsp;&nbsp;&nbsp;训</span>
        </el-col>
        <el-col :span="10">
          <span>{{ form.schoolMotto }}</span>
        </el-col>
        <!--<el-col :span="4">-->
        <!--  <span>法人代表 </span>-->
        <!--</el-col>-->
        <!--<el-col :span="6">-->
        <!--  <span>{{ form.legalRepresentative }}</span>-->
        <!--</el-col>-->
        <!-- <el-divider></el-divider> -->
        <!-- <div></div> -->
      </el-row>
      <div
        style="
          width: 100%;
          border-bottom: 2px dashed #ccc;
          margin: 5px 0 10px 0;
        "
      ></div>

      <el-row :gutter="20">
        <el-col :span="4">
          <span class="info-label">地&nbsp;&nbsp;&nbsp;&nbsp;址</span>
        </el-col>
        <el-col :span="20">
          <span>{{ form.address }} </span>
        </el-col>
        <!-- <el-divider></el-divider> -->
      </el-row>
      <div
        style="
          width: 100%;
          border-bottom: 2px dashed #ccc;
          margin: 5px 0 10px 0;
        "
      ></div>
    </div>
    <div>
      <div class="header-title">
        <h2 style="display: inline-block; font-weight: 800">学校成就</h2>
      </div>
      <p class="introduce-content" style="padding: 0 20px 0 20px">
        {{ form.synopsis }}
      </p>
    </div>
    <div>
      <div class="header-title">
        <h2 style="display: inline-block; font-weight: 800">师资力量</h2>
      </div>
      <p
        style="padding-left: 20px; line-height: 33px; text-indent: 2em"
        v-html="form.teacherResources"
      ></p>
    </div>
  </div>
</template>

<script>
import {getInfo} from "@/api/smartSchool/schoolManage/introduce/introduce";
import {TempSchoolInfo} from "@/enums/common";
import {listPic} from '@/api/smartSchool/schoolManage/introduce/pic'

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      pev: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 用于接收学校信息
      form: {},
      // 轮播图数据
      // images: [
      //   {url: require("@/assets/images/school-image.jpg"), id: 1},
      //   {url: require("@/assets/images/school-image002.jpg"), id: 2},
      //   {url: require("@/assets/images/school-image003.jpg"), id: 3},
      //   {url: require("@/assets/images/school-image004.jpg"), id: 4},
      // ],
      images: [],
    };
  },
  methods: {
    getPic() {
      listPic(this.queryParams).then(response => {
        let images = response.rows
        console.log(images, 907)
        let imagess = images.filter(item => item.isShow == 1)
        this.images = imagess.map(item => {
          return {url: this.pev + item.picUrl}
        })
        console.log(this.images, 911)
      })
    },
    /** 查询学校信息 */
    getSchoolIntroduce() {
      this.form = TempSchoolInfo;
      getInfo().then((response) => {
        if (response.data) {
          this.form = response.data;
        }
      });
    },
    // 编辑学校信息
    editSchool() {
      this.$router.push({
        path: "/schoolManage/schoolInfo/edit",
      });
    },
  },
  created() {
    this.getSchoolIntroduce();
    this.getPic()
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* background-color: rgb(204, 40, 40); */
}

.schoolLogo {
  height: 50px;
  width: 50px;
  /* background-color: yellow; */
}

.picList {
  height: 200px;
  width: 200px;
  /* background-color: red; */
  /* display: inline-block; */
  margin-right: 40px;
  float: right;
}

.shcoolIntroduction {
  //width: 700px;
  /* height: 150px; */
  /* background-color: skyblue; */
  display: inline-block;
  padding-right: 20px;
}

.infomationTable {
  padding-left: 20px;
  width: 800px;
}

.header-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
  background-color: #00afff;
}

.header-title {
  h2:hover {
    cursor: pointer;
    text-decoration: underline #00afff;
  }
}

.introduce-content {
  text-indent: 2em;
  line-height: 33px;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: #00afff;
  text-decoration: none;
}

.info-label {
  padding-left: 15px;
  color: #8d8d8d;
  font-weight: 800;
}
</style>
