<template>
  <!-- 学院介绍 -->
  <div class="university_introduc">
    <div class="university_intro_box">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item @click.native="toUniversityIndex()">首页</el-breadcrumb-item>
          <el-breadcrumb-item>学院介绍</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 学校信息 经典人物 -->
      <div class="intro_first">
        <!-- 学校信息 -->
        <div class="intro_det_msg layout justify">
          <!-- 左侧 -->
          <div class="intro_det_l layout flex_row">
            <!-- 学校图片 -->
            <div class="intro_img">
              <img :src="schooList.logo" alt />
            </div>
            <!-- 学校信息 -->
            <div class="intro_school layout flex_diection justify align_left">
              <div class="school_name">{{schooList.name}}</div>
              <div class="school_address">
                <img src="@/assets/img/43.png" alt />
                {{schooList.address}}
              </div>
              <div class="school_type layout flex_row align_center">
                <div v-for="(item,index) in schooList.school_sort" :key="index">
                  <img :src="item.icon" alt />
                  {{item.name}}
                </div>
              </div>
              <div class="school_type layout flex_row align_center">
                <div class="job_report">
                  <img src="@/assets/img/44.png" alt />
                  就业质量报告
                </div>

                <div @click="showReport(schooList.report)" class="view_report">
                  <img src="@/assets/img/24.png" alt />预览
                </div>

                <div @click="downReport(schooList.report)" class="view_report">
                  <img src="@/assets/img/25.png" alt />下载
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div
            class="intro_det_r"
            :class="{university_collectioned:schooList.is_favorite  }"
            @click="joinCollect()"
          >{{schooList.is_favorite ?"已收藏":"收藏院校"}}</div>
        </div>
        <!-- 经典人物 -->
        <div class="intro_classic_charact" v-show="classical.id" @click="preview(classical.id)">
          <h2>经典人物</h2>
          <div class="charact_intro layout flex_row justify">
            <div class="layout flex_row justify">
              <!-- 人物图片 -->
              <div class="charact_img">
                <img :src="classical.avatar" alt />
              </div>
              <!-- 人物信息 -->
              <div class="layout flex_diection justify align_left">
                <div class="charact_bold">{{classical.name}}</div>
                <div class="layout flex_row">
                  <div class="charact_intro_title">职业：</div>
                  {{classical.profession_name}}
                </div>
                <div class="layout flex_row">
                  <div class="charact_intro_title">就读专业：</div>
                  {{classical.majors_name}}
                </div>
                <div class="layout flex_row">
                  <div class="charact_intro_title">就读专业：</div>
                  {{classical.school}}
                </div>
              </div>
            </div>

            <!-- 人物介绍 -->
            <div class="charact_intro_r layout flex_diection justify align_left">
              <div class="charact_bold">人物介绍</div>
              <div style="width:738px">{{classical.introduce}}</div>
              <div class="charact_r_det">详情 ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 学校概况 开设专业 -->
      <div class="intro_second">
        <!-- 导航栏 -->
        <div class="nav layout flex_row justify_around">
          <div
            class="nav_single"
            @click="anchor(index)"
            :class="{nav_border:isNav == index}"
            v-for="(item,index) in navList"
            :key="index"
          >{{item}}</div>
        </div>
        <!-- 学校概况 -->
        <div class="school_profile" id="first">
          <h2>学校简介</h2>
          <div class="school_profile_top layout flex_row justify">
            <!-- 学校简介 -->
            <div class="school_det_profile layout flex_diection justify">
              <!-- 学校图片 -->
              <div class="school_profile_img layout flex_row justify" @click="viewPic()">
                <div v-for="(item,index) in schoolImg" :key="index" class="school_img_box">
                  <img :src="item" alt />
                  <div class="all_pic_tips" v-show="index == 5">全部图片</div>
                </div>
              </div>
              <!-- 学校历史 -->
              <div
                class="school_profile_history"
                :class="{history_more:isHistory}"
                v-html="schooList.description"
              ></div>
              <!-- 展开更多 -->
              <div class="school_show_more" @click="showMore(1)">{{isHistory?"收起":"展开更多"}}</div>
            </div>
            <!-- 地图 -->
            <div class="school_map">
              <div id="map_box1" style="width:100%;height:100%"></div>
              <div class="school_map_cover">
                <div class="view_map" @click="anchor(3)">查看大地图</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 开设专业 -->
        <div class="open_specialty" id="second">
          <h2>开设专业</h2>
          <!-- 具体专业 -->
          <div class="det_specialty" :class="{all_specialty:isSpecialty}">
            <div
              class="layout flex_row align_left specialty_single"
              v-for="(item,index) in schooList.school_majors"
              :key="index"
            >
              <div
                class="specialty_single_l flex_row align_center"
                @click="toMajorDetail(item)"
              >{{item.major.name}}</div>
              <div class="specialty_single_r layout flex_row justify">
                <div
                  class="specialty_det"
                  v-for="(items,index) in item.majors"
                  :key="index"
                  @click="toMajor(items)"
                >{{items.name}}</div>
              </div>
            </div>
          </div>
          <div class="school_show_more" @click="showMore(2)">{{isSpecialty?"收起":"展开更多"}}</div>
        </div>
      </div>
      <!-- 录取要求 -->
      <div class="intro_third" id="third">
        <div class="admission_requirement">
          <h2>录取要求</h2>
          <div class="admission_title layout flex_row align_center justify">
            <div class="admission_title_l">该校各省录取分数线</div>
            <div class="school_select layout flex_row align_center">
              <el-select
                v-model="province"
                class="admission_select"
                @change="showProvince(province)"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.city_name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="branch" class="admission_select" @change="showBranch(branch)">
                <el-option
                  v-for="item in branchList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="batch" class="admission_select" @change="showBatch(batch)">
                <el-option
                  v-for="item in batchList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 录取表格 -->
          <div class="activity_manage admission_table" :class="{admission_all:isAdmiss}">
            <el-table :data="admissData" style="width: 100%" :header-cell-style="changeHeader">
              <el-table-column label="年份">
                <template slot-scope="scope">
                  <div class="cell_color">{{scope.row.year}}</div>
                </template>
              </el-table-column>
              <el-table-column label="最高分">
                <template slot-scope="scope">
                  <div class="cell_color cell_wrap">{{scope.row.max>0?scope.row.max:"-"}}</div>
                </template>
              </el-table-column>
              <el-table-column label="最低分">
                <template slot-scope="scope">
                  <div class="cell_color">{{scope.row.min>0?scope.row.min:"-"}}</div>
                </template>
              </el-table-column>
              <el-table-column label="平均分" align="center">
                <template slot-scope="scope">
                  <div class="cell_color">{{scope.row.average>0?scope.row.average:"-"}}</div>
                </template>
              </el-table-column>
              <el-table-column label="计划分" align="center">
                <template slot-scope="scope">
                  <div class="operation">{{scope.row.plan>0?scope.row.plan:"-"}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="batch" label="批次" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="school_show_more" @click="showMore(3)">{{isAdmiss?"收起":"展开更多"}}</div>
        </div>
      </div>
      <!-- 考试选考科目 -->
      <div class="intro_third">
        <div class="admission_requirement">
          <h2>考试选考科目</h2>
          <div class="admission_title layout flex_row align_center justify">
            <div class="admission_title_l">高考改革后录取要求，仅供参考，如有冲突以官方权威公布途径信息为准</div>
            <div class="school_select layout flex_row align_center">
              <el-select
                v-model="choice_province"
                class="admission_select"
                @change="showChoice(choice_province)"
              >
                <el-option
                  v-for="item in choiceProvinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="year" class="admission_select" @change="showYear(year)">
                <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </div>
          <!-- 选考科目表格 -->
          <div class="activity_manage admission_table" :class="{admission_all:isChoiceMajor}">
            <el-table :data="choiceData" style="width: 100%" :header-cell-style="changeHeader">
              <el-table-column prop="sort_name" label="专业（类）名称" align="center"></el-table-column>
              <el-table-column prop="yaoqiu" label="选考要求" align="center"></el-table-column>
              <el-table-column prop="majors" label="包含专业" align="center"></el-table-column>
              <el-table-column prop="zhaokao" label="招考方向" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="school_show_more" @click="showMore(4)">{{isChoiceMajor?"收起":"展开更多"}}</div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="map" id="fourth">
        <div class="major_category clearfix">
          <div
            class="cate_name"
            :class="{choice_color:isChoice == index}"
            @click="choiced(index)"
            v-for="(item,index) in cateList"
            :key="index"
          >{{item}}</div>
        </div>
        <!-- 地图 -->
        <div id="map_box" v-show="isChoice == 0"></div>
        <!-- 街景地图 -->
        <div id="pano_continer" v-show="isChoice == 1"></div>
        <!-- <div id="pano_holder"></div> -->
        
      </div>
    </div>
    <!-- 报告详情预览 -->
    <PreviewDialog
      :previewVisible.sync="previewVisible"
      :reportId="reportId"
      :type="type"
      v-if="previewVisible"
    ></PreviewDialog>
    <!-- 查看图片 -->
    <ViewPicDialog :picVisible.sync="picVisible" :id="id" v-if="picVisible"></ViewPicDialog>
  </div>
</template>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=LQNBZ-F3L34-EQMUR-DILMD-LBR4Q-GDFOH"></script>
<script>
// 详情预览
import PreviewDialog from "./PreviewDialog";
// 查看图片
import ViewPicDialog from "./ViewPicDialog";
import { post } from "@/api/http";
import { TMap } from "@/api/TMap";
// 经纬度

let lat = "";
let lng = "";
export default {
  data() {
    return {
      // 学校简介
      isHistory: false,
      // 开设专业
      isSpecialty: false,
      // 录取分数线
      isAdmiss: false,
      // 报考科目
      isChoiceMajor: false,
      // 弹窗
      previewVisible: false,
      picVisible: false,
      id: "",
      isChoice: 0,
      cateList: ["地图", "全景地图"],
      //   导航栏
      navList: ["学校概况", "开设专业", "录取需求", "地图全景"],
      isNav: 0,
      year: "",
      yearList: [],
      // 录取
      provinceList: [],
      province: "",
      branchList: [],
      branch: "",
      batchList: [],
      batch: "",
      // 录取分数线
      admissData: [],
      // 选考科目
      choiceProvinceList: [],
      choice_province: "",
      choiceData: [],
      schooList: [],
      schoolImg: [],
      // 经典人物
      classical: [],
      reportUrl: ""
    };
  },
  methods: {
    // 面包屑
    toUniversityIndex() {
      this.$router.push({ path: "/University" });
    },
    toMajorDetail(item) {
      console.log(item);
      this.$router.push({
        path: "/SecondMajorDetail",
        query: { secondId: item.major.id }
      });
    },
    // 专业详情
    toMajor(item) {
      this.$router.push({ path: "/HotMajor", query: { id: item.id } });
    },
    // 收藏/取消收藏
    joinCollect() {
      let url = "/api/common/favorite";
      let params = {
        object_id: this.schooList.id,
        type: 1
      };
      post(url, params).then(res => {
        this.schooList.is_favorite = !this.schooList.is_favorite;
      });
    },
    // 预览报告
    showReport() {
      this.reportId = this.id;
      this.previewVisible = true;
      this.type = 1;
    },
    // 下载报告
    downReport(report) {
      this.reportUrl = report;
      window.open(this.reportUrl, "_blank");
    },
    // 录取要求改变
    showProvince(val) {
      this.province = val;
      this.getSchoolLuqu();
    },
    showBranch(val) {
      this.branch = val;
      this.getSchoolLuqu();
    },
    showBatch(val) {
      this.batch = val;
      this.getSchoolLuqu();
    },

    // 录取分数线筛选
    getSchoolLuqu() {
      let url = "/api/school/getSchoolLuqu/";
      let params = {
        school_id: this.id,
        province_id: this.province,
        branch: this.branch,
        batch: this.batch
      };
      post(url, params).then(res => {
        this.admissData = res;
      });
    },
    // 选考科目
    showChoice(val) {
      this.choice_province = val;
      this.getSchoolXuankao();
    },
    // 年份
    showYear(val) {
      this.year = val;
      this.getSchoolXuankao();
    },
    // 专业选考科目筛选
    getSchoolXuankao() {
      let url = "/api/school/getSchoolXuankao/";
      let params = {
        school_id: this.id,
        province_id: this.choice_province,
        year: this.year
      };
      post(url, params).then(res => {
        this.choiceData = res;
      });
    },
    // 展开更多
    showMore(index) {
      switch (index) {
        case 1:
          this.isHistory = !this.isHistory;
          break;
        case 2:
          this.isSpecialty = !this.isSpecialty;
          break;
        case 3:
          this.isAdmiss = !this.isAdmiss;
          break;
        case 4:
          this.isChoiceMajor = !this.isChoiceMajor;
          break;
      }
    },
    //   详情弹窗
    preview(id) {
      this.$router.push({ path: "/Character", query: { id: id } });
    },
    // 图片弹窗
    viewPic() {
      this.picVisible = true;
    },
    // 锚点
    anchor(index) {
      this.isNav = index;
      switch (index) {
        case 1:
          document.getElementById("second").scrollIntoView();
          break;
        case 2:
          document.getElementById("third").scrollIntoView();
          break;
        case 3:
          document.getElementById("fourth").scrollIntoView();
          break;
      }
    },
    choiced(index) {
      this.isChoice = index;
      // 全景地图
        this.panoInit();
    },
    // 表头样式
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#f1f1f1;color:#5B5E63!important;font-weight:400";
      }
    },
    // 大学院校详情
    getSchoolDetail() {
      let url = "/api/school/getSchoolDetail/";
      let params = {
        school_id: this.id
      };
      post(url, params).then(res => {
        this.schooList = res;
        this.reportUrl = res.files;
        // 经典人物
        this.classical = res.classical;
        this.provinceList = res.luqu.luqu_province;
        this.province = res.luqu.province_id;
        this.branchList = res.luqu.luqu_branch;
        this.branch = res.luqu.branch;
        this.batchList = res.luqu.luqu_batch;
        // 录取分数线
        this.admissData = res.luqu.data;
        this.choiceData = res.xuankao.data;
        this.choiceProvinceList = res.xuankao.xuankao_province;
        this.choice_province = res.xuankao.province_id;
        this.yearList.push(res.xuankao.year);
        this.year = res.xuankao.year;
        this.schoolImg = res.images.slice(0, 6);
        // 经纬度
        lat = res.lat;
        lng = res.lng;
        // 地图
        this.init();
        // 全景地图
        // this.panoInit();
      });
    },
    // 地图
    init() {
      TMap("LQNBZ-F3L34-EQMUR-DILMD-LBR4Q-GDFOH").then(qq => {
        var center = new qq.maps.LatLng(lat, lng);
        var map = new qq.maps.Map(document.getElementById("map_box"), {
          // 地图的中心地理坐标。
          center: new qq.maps.LatLng(lat, lng),
          zoom: 14
        });
        // 添加标记
        var marker = new qq.maps.Marker({
          position: center,
          map: map
        });
        var anchor = new qq.maps.Point(0, 39),
          size = new qq.maps.Size(42, 68),
          origin = new qq.maps.Point(0, 0),
          markerIcon = new qq.maps.MarkerImage(
            "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
            size,
            origin,
            anchor
          );
        marker.setIcon(markerIcon);
        var map1 = new qq.maps.Map(document.getElementById("map_box1"), {
          // 地图的中心地理坐标。
          center: new qq.maps.LatLng(lat, lng),
          zoom: 16
        });
      });
    },
    // 街景地图
    panoInit() {
      // 创建街景
      // 获取街景id
      // var map = new qq.maps.Map(document.getElementById("pano_holder"), {
      //   center: new qq.maps.LatLng(lat, lng), //设置地图中心点坐标
      //   zoom: 13 //设置地图缩放级别
      // });
      var pano = new qq.maps.Panorama(document.getElementById("pano_continer"));
      let obj = new qq.maps.LatLng(lat, lng);

      // var panoLayer = new qq.maps.PanoramaLayer();
      // panoLayer.setMap(map);
      var panoService = new qq.maps.PanoramaService();
      panoService.getPano(obj, 1000, function(result) {
          // console.log(result);
          let panoId = result.svid;
          pano.setPano(panoId);
          var x1 = result.latlng.lng;
          var y1 = result.latlng.lat;
          var x2 = lng;
          var y2 = lat;
          var alpha = Math.acos(
            (y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
          );
          if (x2 - x1 < 0) {
            alpha = Math.PI * 2 - alpha;
          }
          //修改场景的俯仰角
          pano.setPov({ heading: (alpha / Math.PI) * 180, pitch: 0 });
        });
      // qq.maps.event.addListener(map, "click", function(evt) {
        
      // });
    }
  },
  components: {
    PreviewDialog,
    ViewPicDialog
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getSchoolDetail();
    this.choiced(0)
  },
  watch: {
    $route(to, from) {
      this.id = this.$route.query.id;
      this.getSchoolDetail();
    }
  }
};
</script>
<style scoped>
h2 {
  color: #34485e;
  font-size: 20px;
  position: relative;
  text-align: left;
}
h2::before {
  position: absolute;
  top: 7px;
  left: -14px;
  content: "";
  display: block;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background-color: #409eff;
}
.university_introduc {
  width: 100%;
  background-color: #f2f5fa;
  font-size: 14px;
  color: #8c9198;
}
.university_intro_box {
  width: 1200px;
  margin: 0 auto;
}
/* 学校信息 经典人物 */
.intro_det_msg {
  margin-bottom: 50px;
}
.intro_first {
  padding: 29px 29px 29px 44px;
  background-color: #fff;
}
/* 学校信息 */
/* 左侧 */
.intro_img {
  width: 150px;
  height: 150px;
  margin-right: 32px;
}
.intro_img img {
  width: 100%;
  height: 100%;
}
/* 学校信息 */
.school_name {
  font-size: 36px;
  color: #5b5e63;
}
.school_address {
  font-size: 10px;
}
.school_type div {
  margin-right: 20px;
}
.school_type img {
  margin-top: -1px;
  margin-right: 6px;
}
/* 就业报告 */
.job_report {
  padding: 6px 9px;
  background-color: #47d1a0;
  border-radius: 3px;
  color: #fff;
}
.view_report:hover {
  color: #409eff;
}
/* 右侧 */
.intro_det_r {
  padding: 0 11px;
  background-color: #409eff;
  border-radius: 3px;
  color: #fff;
  height: 30px;
  line-height: 30px;
}
/* 收藏 */
.university_collectioned {
  background-color: #8c9198;
}
/* 经典人物 */
.intro_classic_charact {
  text-align: left;
}
.charact_bold {
  font-weight: bold;
  font-size: 16px;
  color: #5b5e63;
  margin: 10px 0 19px;
}
.charact_intro {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 24px;
}
/* 人物图片 */
.charact_img {
  width: 123px;
  height: 123px;
  margin-right: 27px;
}
.charact_img img {
  width: 100%;
  height: 100%;
}
/* 人物信息 */
.charact_intro_title {
  width: 70px;
  margin-right: 24px;
}
/* 人物介绍 */
.charact_intro_r {
  width: 738px;
}
.charact_r_det {
  font-size: 15px;
  color: #409eff;
}
/* 学校概况 开设专业 */
.intro_second {
  background-color: #fff;
  margin-top: 30px;
}
/* 导航栏 */
.nav {
  line-height: 46px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}
.nav_single {
  padding: 0 20px;
}
.nav_border {
  border-bottom: 2px solid #409eff;
}
/* 学校概况 */
.school_profile,
.open_specialty {
  padding: 24px 29px 24px 44px;
}
/* 学校简介 */
.school_profile_top {
  margin-top: 20px;
}
.school_det_profile {
  width: 686px;
}

/* 学校图片 */
.school_profile_img {
  height: 96px;
  margin-bottom: 14px;
}
.school_img_box {
  width: 96px;
  height: 96px;
  position: relative;
}

.school_profile_img img {
  width: 100%;
  height: 100%;
}
.all_pic_tips {
  width: 96px;
  height: 96px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.6;
  line-height: 96px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
/* 学校历史 */
.school_profile_history {
  text-align: left;
  height: 128px;
  overflow: hidden;
}
.history_more {
  height: 100%;
}
/* 展开更多 */
.school_show_more {
  width: 100%;
  height: 44px;
  background: #f1f1f1;
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  color: #409eff;
  margin-top: 20px;
}
.school_map {
  width: 427px;
  height: 309px;
  position: relative;
}
.school_map img {
  width: 100%;
  height: 100%;
}
.school_map_cover {
  width: 100%;
  height: 100%;
  z-index: 222;
  position: absolute;
  top: 0;
  left: 0;
}
/* 查看大地图 */
.view_map {
  width: 215px;
  height: 36px;
  background-color: #fff;
  font-size: 12px;
  color: #409eff;
  text-align: center;
  line-height: 36px;
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translateX(-50%);
}
/* 开设专业 */
.det_specialty {
  border: 1px solid #eee;
  margin-top: 20px;
  border-bottom: none;
  height: 535px;
  overflow: hidden;
}
.all_specialty {
  height: 100%;
}
/* 具体专业 */
.specialty_single {
  border-bottom: 1px solid #eee;
  padding: 23px 0;
}
.specialty_single_l {
  width: 180px;
  color: #34485e;
  font-size: 16px;
  padding: 10px 0;
}
.specialty_single_r {
  padding: 12px 0;
  border-left: 1px solid #eee;
  padding-left: 17px;
}
.specialty_det {
  margin-left: 40px;
  font-size: 14px;
}
.specialty_det:hover {
  color: #409eff;
}
/* 录取要求 */
.intro_third {
  padding: 24px 29px 24px 44px;
  background-color: #fff;
  margin-top: 20px;
}
.admission_title {
  margin-top: 24px;
}
.admission_title_l {
  font-size: 16px;
  color: #34485e;
  font-weight: bold;
}
.admission_select {
  margin-left: 42px;
}
/* 录取表格 */
.admission_table {
  margin-top: 25px;
  height: 248px;
  overflow: hidden;
}
.admission_all {
  height: 100%;
}
/* 地图 */
.map {
  margin-top: 30px;
  position: relative;
}
.major_category {
  width: 228px;
  height: 44px;
  background: #fff;
  border-radius: 3px;
  margin: 0 auto;
}
.cate_name {
  width: 50%;
  height: 44px;
  font-size: 18px;
  color: #5b5e63;
  line-height: 44px;
  float: left;
  border-radius: 3px;
  position: relative;
  z-index: 99;
}
.choice_color {
  background-color: #409eff;
  color: #fff;
}
#map_box,
#pano_holder,
#pano_continer {
  width: 100%;
  height: 400px;
  margin-top: 20px;
  pointer-events: auto;
}
#pano_continer{
/* pointer-events: none; */
}
#pano_holder{
  position: absolute;
  top: -50%;
  right: 0;
  opacity: 0;
  z-index: 88;
  /* pointer-events: auto; */
}
</style>