<template>
  <div class="schoolInfoDetail">
    <div class="header1">
      <div class="logo">
        <el-image v-if="ruleForm.sm_logo!=null&&ruleForm.sm_logo!=''" style="width: 122px; height: 122px;border-radius: 50%;display: block;" :src="getFullUrl(ruleForm.sm_logo)" />
        <el-image v-else style="width: 122px; height: 122px;border-radius: 50%;display: block;" src="/images/default.png" />
      </div>
      <div class="content">
        <div class="name">{{ruleForm.sm_name}}</div>
        <div>学校地址：{{ruleForm.sm_address}}</div>
        <div>学校电话：{{ruleForm.sm_lxr_contact}}</div>
        <div v-if="ruleForm.sm_video">学校视频：<el-link type="primary" @click="dialogVisible=true">查看</el-link>
        </div>
      </div>
    </div>
    <!-- <video ref="videoPlay" controls v-if="ruleForm.sm_video" style="margin: auto;margin-top: 20px;">
      <source :src="getFullUrl(ruleForm.sm_video)" type="video/mp4" />
      <source :src="getFullUrl(ruleForm.sm_video)" type="video/ogg" />
    </video> -->
    <div class="container" v-html="ruleForm.sm_brief"></div>
    <div class="btn">
      <el-button size="default" type="primary" @click="emit('update', 2)">关闭</el-button>
    </div>

    <el-dialog width="900px" v-model="dialogVisible" title="学校视频" destroy-on-close>
      <video ref="videoPlay" controls v-if="ruleForm.sm_video" style="margin: auto;">
        <source :src="getFullUrl(ruleForm.sm_video)" type="video/mp4" />
        <source :src="getFullUrl(ruleForm.sm_video)" type="video/ogg" />
      </video>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { schoolDetail } from "./api";
import { getFullUrl } from "~/utils/helper";
const emit = defineEmits(["update"]);
const props = defineProps({
  current: {
    type: String,
    default: "",
  },
});

watch(
  () => props.current,
  (newVal, oldVal) => {
    if (newVal != "") {
      initDetailInfo(newVal);
    }
  },
  { immediate: true }
);

const ruleForm = ref({});
async function initDetailInfo(id: string) {
  let data = await schoolDetail({ id });
  ruleForm.value = data.one_info;
}

const dialogVisible = ref(false);
</script>

<style lang="scss" scoped>
.schoolInfoDetail {
  .header1 {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 25px;
  }
  .content {
    color: #333;
    font-size: 16px;
    margin-left: 20px;
    line-height: 22px;
    .name {
      font-size: 20px;
      margin-bottom: 20px;
    }
  }
  .container {
    padding: 25px 0;
  }
  .btn {
    text-align: center;
  }
}
</style>