<!--
 * @Description: 合作院校详情
 * @Author: 空白格
 * @Date: 2022-08-16 10:40:45
 * @LastEditors: 空白格
 * @LastEditTime: 2023-01-09 17:48:48
 * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CollegesDetails\CollegesDetailsIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main enterprise-details" v-loading="loading">
    <div class="enterprise-details-header">
      <div class="enterprise-details-header-box app-main-box">
        <div class="edhb-left">
          <div class="edhb-left-logo">
            <el-avatar
              shape="square"
              :size="73"
              :src="details.schoolLogoUrl"
              @error="errorHandler"
            >
              <el-avatar
                shape="square"
                :size="73"
                :src="require('@/assets/images/default-school.png')"
              ></el-avatar>
            </el-avatar>
          </div>
          <div class="edhb-left-info">
            <div class="edhb-left-info-name">
              {{ details.schoolName || "-" }}
            </div>
            <div
              class="edhb-left-info-link"
              @click="jumpExternalLink(details.schoolUrl)"
            >
              访问官网：{{ details.schoolUrl || "-" }}
            </div>
          </div>
        </div>
        <div class="edhb-right">
          <div class="edhb-right-item">
            {{ details.schoolNature | filtersDict(schoolNatureList) }}、{{
              details.trainMethod || "-"
            }}
          </div>
          <div class="edhb-right-item">{{ details.linkPhone || "-" }}</div>
          <div class="edhb-right-item position">
            {{ details.schoolAddress || "-" }}
          </div>
        </div>
      </div>
    </div>
    <div class="app-main-box enterprise-details-main">
      <!-- 学校信息 -->
      <div class="app-main-box-content enterprise-details-main-info">
        <!-- 学校信息 -->
        <div class="edmi-introduce">
          <h4>学校信息</h4>
          <template v-if="details.detatil">
            <div class="ql-editor" v-html="details.detatil"></div>
          </template>
          <template v-else>
            <div class="edmi-introduce-content">暂无学校信息</div>
          </template>
        </div>
        <!-- 学校相册 -->
        <!-- <div class="edmi-album">
          <h4>学校相册</h4>
          <div
            class="edmi-album-list"
            v-if="
              details.environmentUrlList && details.environmentUrlList.length
            "
          >
            <el-carousel
              height="178px"
              :autoplay="false"
              arrow="never"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, Cindex) in details.environmentUrlList"
                :key="Cindex"
              >
                <el-row :gutter="18">
                  <el-col
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="6"
                    :xl="6"
                    v-for="(img, index) in item"
                    :key="index"
                  >
                    <el-image
                      :src="img"
                      class="image"
                      fit="contain"
                      :preview-src-list="item"
                    >
                      <div slot="placeholder" class="image-slot">
                        加载图片中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-empty v-else :image-size="80" description="无公司相册数据"></el-empty>
        </div> -->
        <!-- 双高专业 -->
        <div class="edmi-position">
          <h4>双高专业</h4>
          <div
            class="edmi-position-list"
            v-if="details.twinList && details.twinList.length"
          >
            <el-row :gutter="12">
              <el-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="12"
                :xl="12"
                v-for="(item, index) in details.twinList"
                :key="index"
              >
                <div
                  class="edmi-position-list-item"
                  @click="
                    jumpPage('/cooperativecolleges/professionalintroduction', {
                      id: item.id,
                    })
                  "
                >
                  <div class="epli-left">
                    {{ item.professionName }}（专业代码：{{
                      item.professionCode
                    }}）
                  </div>
                  <div class="epli-right">
                    <span class="el-icon-arrow-right"></span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-empty
            :image-size="80"
            v-else
            description="无双高专业数据"
          ></el-empty>
        </div>
        <!-- 招生专业 -->
        <div class="edmi-position">
          <h4>招生专业</h4>
          <div
            class="edmi-position-list"
            v-if="details.enrollList && details.enrollList.length"
          >
            <el-row :gutter="12">
              <el-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="12"
                :xl="12"
                v-for="(item, index) in details.enrollList"
                :key="index"
              >
                <div
                  class="edmi-position-list-item"
                  @click="
                    jumpPage('/cooperativecolleges/professionalintroduction', {
                      id: item.id,
                    })
                  "
                >
                  <div class="epli-left">
                    {{ item.professionName }}（专业代码：{{
                      item.professionCode
                    }}）
                  </div>
                  <div class="epli-right">
                    <span class="el-icon-arrow-right"></span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-empty
            v-else
            :image-size="80"
            description="无招生专业数据"
          ></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSchoolDetails } from "@/api/CooperativeColleges";
import { getDictData } from "@/api/Dict";
export default {
  name: "EnterpriseDetailsIndex",
  data() {
    return {
      details: {},
      schoolNatureList: [],
      loading: false,
    };
  },
  created() {
    this.getDict();
    const { schoolId } = this.$route.query;
    if (schoolId) {
      this.getSchoolDetails(schoolId);
      document.documentElement.scrollTop = 0;
    }
  },
  methods: {
    /**
     * 获取字典
     * @date 2022-08-11
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "school_nature" }).then((res) => {
        this.schoolNatureList = res.data;
      });
    },
    /**
     * 获取院校详情
     * @date 2022-08-15
     * @param {any} schoolId
     * @returns {any}
     */
    getSchoolDetails(schoolId) {
      this.loading = true;
      getSchoolDetails({ schoolId }).then((res) => {
        this.details = res?.data;
        this.loading = false;
      });
    },
    /**
     * 加载logo错误触发
     * @date 2022-08-15
     * @returns {any}
     */
    errorHandler() {
      return true;
    },
    /**
     * 跳转外部链接
     * @date 2022-08-16
     * @param {any} link
     * @returns {any}
     */
    jumpExternalLink(link) {
      if (link) {
        window.open(link);
      }
    },
    /**
     * 跳转
     * @date 2022-08-29
     * @param {any} path
     * @param {any} query
     * @returns {any}
     */
    jumpPage(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
  },
  filters: {
    filtersDict(val, list) {
      let label = "-";
      list.forEach((item) => {
        if (Number(val) === Number(item.text)) {
          label = item.label;
        }
      });
      return label;
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise-details {
  &-header {
    background-color: #43565f;
    &-box {
      margin: 0 auto;
      padding: 36px 0;
      display: flex;
      justify-content: space-between;
      .edhb-left {
        display: flex;
        &-logo {
          margin-right: 13px;
          :deep(.el-avatar) {
            background-color: #65cafd;
          }
        }
        &-info {
          &-name {
            font-size: 28px;
            color: #fff;
            font-family: SourceHanSansCN;
            margin-bottom: 5px;
          }
          &-link {
            font-size: 16px;
            color: #fff;
            font-family: SourceHanSansCN;
            cursor: pointer;
            margin-top: 10px;
          }
        }
      }
      .edhb-right {
        &-item {
          color: rgba($color: #fff, $alpha: 0.7);
          font-size: 14px;
          text-align: right;
          margin-bottom: 8px;
        }
        .position {
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 17px;
            background: url("./../../../assets/images/dingwei.svg") no-repeat
              center center;
            background-size: cover;
            vertical-align: bottom;
            margin-right: 5px;
          }
        }
      }
    }
  }
  &-main {
    &-hot {
      margin-bottom: 20px;
      .edmh-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 18px;

        &-view {
          color: #858585;
          font-size: 14px;
          cursor: pointer;
        }
      }
      h4 {
        color: #1a1a1a;
        font-size: 20px;
      }
      .edmh-list {
        &-item {
          background-color: #fff;
          padding: 18px 20px;
          border-radius: 6px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
          &-left {
            .elil-item {
              color: #919191;
              font-size: 14px;
              margin-bottom: 10px;
              &:first-child {
                color: #1a1a1a;
                font-size: 20px;
              }
              &:last-child {
                font-size: 13px;
              }
            }
          }
          &-right {
            text-align: right;
            display: flex;
            flex-direction: column;
            .elir-item {
              font-size: 13px;
              color: #919191;
              &:first-child {
                flex: 1;
                color: #ee5a0f;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    &-info {
      padding-bottom: 100px;
      .edmi-introduce {
        margin-top: 10px;
        margin-bottom: 24px;
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 10px;
        }
        &-content {
          line-height: 30px;
          font-size: 14px;
          color: #6c6c6c;
        }
      }
      .edmi-album {
        margin-bottom: 24px;
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 24px;
        }
        &-list {
          .image {
            width: 100%;
            height: 178px;
          }
        }
      }
      .edmi-position {
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 20px;
        }
        &-list {
          &-item {
            display: flex;
            justify-content: space-between;
            padding: 14px 16px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            cursor: pointer;
          }
        }
        .pagination {
          text-align: center;
          margin-top: 20px;
          :deep(.el-pager .active) {
            background-color: #ff3939;
          }
          :deep(.el-pagination.is-background
              .el-pager
              li:not(.disabled).active) {
            background-color: #ff3939;
          }
        }
      }
    }
  }
}
</style>
