<template>
  <!-- 学校信息（学校） -->
  <div class="content">
    <div class="header-title">
      <img class="avatar" v-if="detailData.sm_logo!=null&&detailData.sm_logo!=''" :src="getFullUrl(detailData.sm_logo)" />
      <img class="avatar" v-else src="/images/default.png" />
      <!-- <img class="avatar" v-if="detailData.sm_logo" :src="getFullUrl(detailData.sm_logo)" alt=""> -->
      <div class="info">
        <p class="school-name">{{detailData.sm_name}}</p>
        <p class="school-address">学校地址：{{detailData.sm_address}}</p>
        <p class="school-phone">学校电话：{{detailData.sm_lxr_contact}}</p>
      </div>
      <div class="editBtn">
        <el-button type="primary" @click="editData(detailData.sm_id)">编辑</el-button>
      </div>
    </div>
    <div class="photo" v-html="detailData.sm_brief"></div>
    <!-- <div class="photo"><img v-if="detailData.sm_logo" :src="getFullUrl(detailData.sm_logo)" alt=""></div>
    <div class="school-brief">{{detailData.sm_brief}} -->
    <!-- </div> -->
    <!-- 编辑对话框 -->
    <el-dialog :title="title" v-model="dialogFormVisible" width="770px" :tinymceShow="dialogFormVisible">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize">
        <el-form-item label="学校logo" prop="sm_logo">
          <FileUploadProgress v-model:part="ruleForm.sm_logo" :limit="1" accept=".png,.jpg,.jpeg" :size-limit="2*1024">
            <template #default>
              <div class="flex_center w-65px h-65px border border-dashed border-hex-E4E6E8 bg-hex-F9F9F9 text-hex-9D9AB9">
                <i-akar-icons:plus class="text-xl" />
              </div>
            </template>
            <template #tip>
              <div class="mt-2">支持格式：jpg,png,jpeg（2M以内） 建议尺寸1:1</div>
            </template>
          </FileUploadProgress>
        </el-form-item>

        <div class="flex">
          <el-form-item label="学校名称" prop="sm_name">
            <el-input v-model="ruleForm.sm_name" />
          </el-form-item>
          <el-form-item label="学校电话" prop="sm_lxr_contact">
            <el-input v-model="ruleForm.sm_lxr_contact" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="级别" prop="sm_period">
            <el-select v-model="ruleForm.sm_period" placeholder="" size="default">
              <el-option v-for="item in periodData" :key="item.v" :label="item.n" :value="item.v" />
            </el-select>
          </el-form-item>
          <el-form-item label="学校地址" prop="sm_address">
            <el-input v-model="ruleForm.sm_address" />
          </el-form-item>
        </div>
        <el-form-item label="学校风采" prop="sm_brief">
          <Tinymce v-if="tinymceShow" :modelValue="ruleForm.sm_brief" @update:modelValue="handleUpdate"></Tinymce>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="text-center">
          <el-button @click="formCancel">取 消</el-button>
          <el-button type="primary" @click="formSubmit('ruleFormRef')">确 定</el-button>
        </div>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { getFullUrl } from "~/utils/helper";
import { Picture, FolderOpened } from "@element-plus/icons-vue";
import Tinymce from "@/components/TinymceVue/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import FileUploadProgress from "@/components/FileUploadProgress/index.vue";
import { school_detail, user_info, school_edit, school_list } from './api'

import { user } from "@/store/user.ts";
export default {
  name: "index",
  components: {
    Tinymce,
    FileUpload,
    FileUploadProgress
  },
  data() {
    return {
      detailData: {},
      tableData: {},
      sm_id: "",
      id: "",
      dialogFormVisible: false,
      ruleForm: {
        sm_logo: "",
        sm_name: "",
        sm_lxr_contact: "",
        sm_address: "",
        sm_brief: "",
        sm_period: ""
      },
      periodData: [],
      rules: {
        sm_logo: [{ required: true, message: "请上传学校logo", trigger: "submit" }],
        sm_name: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
        sm_lxr_contact: [
          { required: true, message: "请输入学校电话", trigger: "blur" },
        ],
        sm_period: [{ required: true, message: "请选择级别", trigger: "change" }],
        sm_address: [{ required: true, message: "请输入学校地址", trigger: "blur" }],
        sm_brief: [{ required: true, message: "请输入学校风采", trigger: "blur" }],

      },
      tinymceShow: true,
    }
  },
  methods: {
    getFullUrl(url = "") {
      if (!url) return '';
      return url.startsWith('http') ? url : window.GLOBAL_CONFIG.oss + '/' + url
    },

    handleUpdate(data) {
      this.ruleForm.sm_brief = data;
    },
    getDetailData() {
      let data = {
        id: this.tableData.sm_id
      };
      school_detail(data).then((res) => {
        this.loading = false;
        this.detailData = res.data.one_info;
        console.log(this.detailData, 11112345778);
      });
    },
    getListData() {

      this.loading = true;
      let data = {
        user_id: this.user_id
      };
      user_info(data).then((res) => {
        this.loading = false;
        this.tableData = res.data;
        console.log(this.tableData.user_id);
        console.log(this.tableData.sm_id);
        this.getDetailData();
      });
    },

    getSchoolListData() {
      this.loading = true;
      let data = {
      };
      school_list(data).then((res) => {
        this.loading = false;
        this.periodData = res.data.table_structure.field.sm_period.option;
        console.log(this.periodData);
      });

    },

    editData() {
      this.getSchoolListData();
      this.dialogFormVisible = true;
      this.loading = true;
      let data = {
        id: this.tableData.sm_id
      };
      console.log(this.tableData.sm_id, 123);
      // console.log(data, 123),
      //   school_detail(data).then((res) => {
      //     this.loading = false;
      //     this.detailData = res.data.one_info;
      for (let key in this.ruleForm) {
        this.ruleForm[key] = this.detailData[key];
      }
      console.log(this.detailData, 111123);
      // });
    },

    formSubmit(formName) {

      // let id = this.tableData.sm_id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            sm_logo: this.ruleForm.sm_logo,
            sm_name: this.ruleForm.sm_name,
            sm_lxr_contact: this.ruleForm.sm_lxr_contact,
            sm_address: this.ruleForm.sm_address,
            sm_period: this.ruleForm.sm_period,
            sm_brief: this.ruleForm.sm_brief,

          };
          data.id = this.tableData.sm_id;
          school_edit(data).then((res) => {
            if (res.code == 1) {
              ElMessage({
                message: "编辑成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getDetailData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        }

      });
    },
    formCancel() {
      this.dialogFormVisible = false;
    },

  },
  mounted() {
    this.getListData();
    // this.getDetailData();

  }
}
</script>

<style lang="scss" scoped>
.flex {
  .el-form-item {
    flex: 1;
    .el-select {
      width: 100%;
    }
  }
}
.btnDiv {
  text-align: center;
}
.content {
  width: 100%;
}
.header-title {
  display: flex;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  .avatar {
    display: block;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    margin: 12px 20px 20px 22px;
  }
  .info {
    padding: 20px;
    .school-name {
      width: 286px;
      font-size: 20px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #333333;
      padding-bottom: 19px;
    }
    .school-address,
    .school-phone {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #333333;
      line-height: 22px;
      word-wrap: break-word;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
  .editBtn {
    position: absolute;
    top: 10px;
    right: 20px;
  }
}
.photo {
  width: 433px;
  height: 433px;
  margin: 20px auto;

  img {
    width: 100%;
    height: 100%;
  }
}
.school-brief {
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
  padding: 0 100px;
}
</style>