<template>
  <div>
    <div class="main">
      <Common/>
      <div class="bg">
        <img src="http://yyfiles.mrny365.com/static/banner.png" alt="">
      </div>
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>园区之窗</el-breadcrumb-item>
          <el-breadcrumb-item>园区介绍</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <div class="left">
          <div class="item" @click="changePark('0')">园区简介</div>
          <div class="item" @click="changePark('1')">园区优势</div>
          <div class="item" @click="changePark('2')">产业布局</div>
        </div>
        <div class="right" v-if="parkType === '0'">
          <div class="title">
            <i></i>
            <span>园区简介</span>
          </div>
          <div class="rightContent">
            <div v-html="content"></div>
          </div>
        </div>
        <div class="right" v-if="parkType === '1'">
          <div class="title">
            <i></i>
            <span>园区优势</span>
          </div>
          <div class="rightContent">
            <div v-html="content"></div>
          </div>
        </div>
        <div class="right" v-if="parkType === '2'">
          <div class="title">
            <i></i>
            <span>产业布局</span>
          </div>
          <div class="rightContent">
            <div v-html="content"></div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Common from '../../components/common/common.vue';
import Footer from '../../components/common/footer.vue';
import {ArrowRight} from '@element-plus/icons-vue';
import {inject, ref, watch} from 'vue';
import {useGo, usePRoute} from "@/hooks/usePage"
import {useRouter} from "vue-router";

const {route} = usePRoute()
const go = useGo()
const $http: any = inject("$http");
const parkType = ref('0');
const content = ref('');

function changePark(type: string) {
  parkType.value = type;
  go({
    path: route.path,
    query: {
      type
    }
  }, 'replace')
  $http({
    url: '/mall/parkIntroduction/list',
    params: {
      type,
    }
  }).then((res: any) => {
    if (res.data.length) {
      content.value = res.data[0].content;
    }
  })
}

const router = useRouter()
watch(() => route.query.type, (to) => {
  const type: string = to as any
  if (!type) return
  changePark(to as any)
})

changePark(parkType.value); // 先执行一次
</script>

<style scoped lang="less">
.main {
  width: 100%;
  background-color: #f5f5f5;
}

.bg {
  width: 1200px;
  height: 100px;
  margin: 20px auto 0;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.breadcrumb {
  margin: 0 auto;
  padding-top: 25px;
  width: 1200px;
  display: flex;
}

.content {
  margin: 0 auto 30px;
  padding-top: 15px;
  width: 1200px;
  display: flex;

  // justify-content: space-between;
  .left {
    width: 220px;
    height: 210px;
    box-sizing: border-box;
    background-color: #fff;

    .item {
      width: 100%;
      height: 70px;
      line-height: 70px;
      border-bottom: 3px solid #f5f5f5;
      padding-left: 30px;
      cursor: pointer;
      font-size: 18px;
      color: #000;
    }
  }

  .right {
    margin-left: 15px;
    padding: 20px 30px;
    width: 965px;
    min-height: 1000px;
    background-color: #fff;
    box-sizing: border-box;

    .title {
      width: 100%;
      display: flex;
      align-items: center;

      i {
        width: 3px;
        height: 26px;
        background-color: #3492EC;
      }

      span {
        margin-left: 10px;
        font-size: 18px;
        color: #000;
      }
    }

    .rightContent {
      margin-top: 35px;
      line-height: 35px;
      color: #101010;
      font-size: 14px;
    }
  }
}</style>
