<template>
  <view>
    <custom-nav-bar :left-text="options.name" left-arrow />
    <image class="custom-swiper-img"
      :src="agencyContentGetObj !== null ? agencyContentGetObj.image : '/static/packages/people/images/icon10.png'">
    </image>
    <view class="tabs-list flex flex-center">
      <view :class="'tabs-item ' + (item.value === ruralActive ? 'tabs-active' : '')" :data-item="item"
        @tap="tabsSwitch" v-for="(item, index) in ruralTabs" :key="index">
        {{ item.label }}
      </view>
    </view>
    <view class="rich">
      <rich-text :nodes="agencyContentGetObj.content"></rich-text>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { publicApi, peopleApi } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    data() {
      return {
        options: {
          name: ''
        },
        ruralActive: '',
        // 对应字典值
        ruralTabs: [],
        agencyContentGetObj: {
          image: '',
          content: ''
        }
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad(options) {
      this.options = options
      this.getConsultType();
    },
    methods: {
      // 切换tabs
      tabsSwitch(event) {
        if (event) {
          const {
            item
          } = event.currentTarget.dataset;
          this.ruralActive =item.value
        }
        this.agencyContentGetApi();
      },

      // 获取字典类型
      async getConsultType() {
        const res = await publicApi.getDictDataApi({
          dictType: 'people_agency_content_type'
        });
        if (res.data) {
          const {
            value
          } = res.data.list[0];
          this.ruralTabs = res.data.list
          this.ruralActive = value
        }
        this.agencyContentGetApi();
      },

      // 最美乡村+社区通用 获取内容
      async agencyContentGetApi() {
        const {
          ruralActive,
          options
        } = this;
        const res = await peopleApi.agencyContentGetOrgIdApi({
          contentType: ruralActive,
          orgId: options.orgId
        });
        if (res.data) {
          res.data.content = res.data.content.replace(/(\<img|\<p|src=null)/gi, function($0, $1) {
            console.log($0, $1);
            return {
              '<img': '<img style="width:100%;height:auto;display:block;" ',
              '<p': '<p style="text-indent: 24px;" ',
              '<article': '<div',
              '</article': '</div',
              '<header': '<div',
              '</header': '</div'
            } [$1];
          });
          this.agencyContentGetObj = res.data || null;
        }
      }
    }
  };
</script>
<style lang="less">
  .custom-swiper-img {
    width: 100%;
    height: 400rpx;
    display: block;
  }

  .tabs-list {
    margin-top: 60rpx;

    .tabs-item {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 32rpx;
      position: relative;

      &:not(:last-child) {
        margin-right: 32rpx;
      }
    }

    .tabs-active {
      color: #f5001c;

      &::after {
        content: '';
        position: absolute;
        left: 4rpx;
        bottom: 0;
        z-index: -1;
        // width: 175rpx;
        width: 95%;
        height: 10rpx;
        background: var(--title-guides-color);
        border-radius: 2rpx;
      }
    }
  }

  .rich {
    padding: 46rpx 45rpx;
  }
</style>