<template>
  <div class="place-culture" v-if="showPlaceCulture">
    <view class="area-desc">
      <view class="title">奉化区简介</view>
      <image src="/static/images/place/fenghua.png"></image>
      <view class="content">
        <span class="content-p">
          奉化位于浙江省东部沿海，宁波市区南面，介于北纬29°25′～29°47′、东经121°03′～121°46′之间。东濒象山港、隔港与象山县相望，南连宁海县，西接新昌县、嵊州市和余姚市，北交鄞县。省道甬临线、江拔线、浒溪线，甬台温高速公路、甬金高速公路和沿海国防公路穿越其间，公路奉溪线；剡江、县江、东江等河流贯东西南北，内河航线109公里，外海航线连我国沿海各港口；市区距宁波30公里，距宁波栎社国际机场15公里，水陆空交通便捷。
        </span>
        <navigator
          class="navigator-text"
          url="/subPages/pages/placeCulture/placeDesc?community=fenghua"
          >点击详情>></navigator
        >
      </view>
    </view>
    <!--   <view class="area">
      <view class="side-bar">
        <view
          class="side-bar__item"
          v-for="(street, index) in Object.keys(fenghua_area.area)"
          :key="index"
          :class="index === curIndex ? 'side-bar__item--active' : ''"
          @click="handleStreetClick(fenghua_area.area[street], index)"
        >
          {{ fenghua_area.area[street].label }}
        </view>
      </view>
      <view class="area-cont">
        <view class="street-desc">
          <text class="street-desc__title"> {{ curStreet.label }}简介 </text>
          <navigator class="navigator-text" :url="curStreetUrl"
            >点击详情</navigator
          >
        </view>
        <view class="area-list">
          <view
            class="community"
            v-for="(community, index) in Object.keys(curStreet.area)"
            :key="index"
            @click="handleCommunityClick(curStreet.area[community])"
          >
            <image src="/static/images/place/icon_community.png"></image>
            <text> {{ curStreet.area[community].label }}</text>
          </view>
        </view>
      </view>
    </view> -->
    <view class="area">
      <view class="side-bar">
        <view
          class="side-bar__item"
          v-for="(street, index) in streets"
          :key="index"
          :class="
            street.name === curStreet.name ? 'side-bar__item--active' : ''
          "
          @click="handleStreetSelect(street, index)"
        >
          {{ street.name }}
        </view>
      </view>
      <view class="area-cont">
        <view class="street-desc">
          <text class="street-desc__title"> {{ curStreet.name }}简介 </text>
          <navigator class="navigator-text" :url="curStreetUrl"
            >点击详情</navigator
          >
        </view>
        <view class="area-list">
          <view
            class="community"
            v-for="(community, index) in communitys"
            :key="index"
            @click="handleCommunitySelect(community)"
          >
            <image src="/static/images/place/icon_community.png"></image>
            <text> {{ community.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import areas, { fenghua_area } from "@/common/js/area";
import { listArea } from "@/api/system";
const app = getApp();
export default {
  name: "placeCulture",
  data() {
    return {
      areas: areas,
      fenghua_area: fenghua_area,
      curStreet: { name: "" },
      curStreetUrl: `/subPages/pages/placeCulture/placeDesc?community=${fenghua_area.area.jinpingjiedao.value}`,
      html: '<div><p style="text-indent: 18.75pt; text-align: left;"><br></p><p style="text-indent: 18.75pt; text-align: left;"><span style="color: rgb(34, 34, 34);">奉化位于浙江省东部沿海，宁波市区南面，介于北纬29°25′～29°47′、东经121°03′～121°46′之间。东濒象山港、隔港与象山县相望，南连宁海县，西接新昌县、嵊州市和余姚市，北交鄞县。省道甬临线、江拔线、浒溪线，甬台温高速公路、甬金高速公路和沿海国防公路穿越其间，公路奉溪线；剡江、县江、东江等河流贯东西南北，内河航线109公里，外海航线连我国沿海各港口；市区距宁波30公里，距宁波栎社国际机场15公里，水陆空交通便捷。</span></p><p><br></p></div>',
      streets: [],
      communitys: [],
      showPlaceCulture: app.globalData.showPlaceCulture,
    };
  },
  onShow() {
    this.showPlaceCulture = app.globalData.showPlaceCulture;
  },
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    this.curStreet = {
      name: options.street,
    };
    eventChannel.on("directToPlaceDesc", function (res) {
      if (res.data.street) {
        uni.navigateTo({
          url: `/subPages/pages/placeCulture/placeDesc?street=${res.data.street}&community=${res.data.community}&from=home`,
        });
      } else {
        this.showPlaceCulture = true;
      }
    });
  },
  mounted() {
    this.getAreaList();
  },
  methods: {
    async getAreaList() {
      const res = await listArea({ parentId: "330213" });
      this.streets = res.data;
      this.curStreet = this.streets.filter(
        (i) => i.name === this.curStreet.name
      )[0];
      if (this.curStreet) {
        this.handleStreetSelect(this.curStreet);
      }
    },
    handleStreetClick(street) {
      this.curStreet = street;
      this.curStreetUrl = `/subPages/pages/placeCulture/placeDesc?community=${street["value"]}`;
    },
    handleCommunityClick(community) {
      uni.navigateTo({
        url:
          "/subPages/pages/placeCulture/placeDesc?community=" + community.value,
      });
    },
    async handleStreetSelect(item) {
      this.curStreet = item;
      const res = await listArea({ parentId: item.id });
      this.communitys = res.data;
      this.curStreetUrl = `/subPages/pages/placeCulture/placeDesc?street=${item.name}&from=placeCulture`;
    },
    handleCommunitySelect(item) {
      uni.navigateTo({
        url: `/subPages/pages/placeCulture/placeDesc?community=${item.name}&from=placeCulture`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.place-culture {
  // height: 100%;
  background: #e9eaed;
  color: #333433;
  display: flex;
  flex-direction: column;
  .area-desc {
    padding: 0 12px 0 12px;
    background: #ffffff;
    image {
      height: 140px;
      width: 100%;
    }
    .content-p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      color: #333333;
    }
    .title {
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    .navigator-text {
      color: #3a78f5;
      font-size: 14px;
      line-height: 30px;
    }
  }
  .area {
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    background: #f4f5f8;
    .side-bar {
      display: flex;
      flex-direction: column;
      &__item {
        color: #333333;
        width: 120px;
        color: #333333;
        line-height: 40px;
        text-align: center;
      }
      &__item--active {
        background: #fff;
        color: #3a78f5;
        font-weight: bold;
      }
    }
    .area-cont {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      .street-desc {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        text-align: center;
        border-bottom: 1px dashed #dedede;
        padding-bottom: 16px;
        text {
          line-height: 26px;
          font-size: 16px;
        }
        .navigator-text {
          color: #3a78f5;
          font-size: 12px;
        }
      }
      .area-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 20px 10px;
        flex: 0 0 30%;
        .community {
          /*  padding: 4px 8px; */
          margin: 0 6px 6px 0;
          /*   background: #f4f4f4; */
          color: #000099;
          // height: 30px;
          line-height: 30px;
          flex: 0 0 30%;
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 38px;
            height: 38px;
          }
          text {
            color: #666666;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
