<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="optins.name" left-arrow border />

    <view class="details-page">
      <text class="details-title text-line-1">{{ InfoObj.title }}</text>
      <view class="details-page-block">
        <text v-if="InfoObj.createTime">{{ InfoObj.createTime }}</text>
        <text v-if="InfoObj.publisher" class="details-block">{{ InfoObj.publisher }}</text>
      </view>

      <view class="details-url">
        <rich-text class="rich-text" :nodes="InfoObj.content"></rich-text>
      </view>

      <!-- 党建活动报名按钮 -->
      <van-button v-if="optins.name === '党建活动详情'" @click="praiseCreateApi" block
        :color="isSignUp ? '#D9E2EE' : '#FE3B53'">
        {{ isSignUp ? '已报名' : '报名' }}
      </van-button>
    </view>
  </view>
</template>

<script>
  // 无点赞详情页面
  // const app = getApp();
  // const {
  //   peopleApi,
  //   publicApi
  // } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi'; // 
  import * as publicApi from '@/api/publicApi'; // 
  import utils from '@/utils/util.js'

  export default {
    components: {},
    data() {
      return {
        optins: {
          name: ''
        },
        InfoObj: {
          title: '',
          createTime: '',
          publisher: '',
          content: ''
        },
        doctorPageList: [],
        isSignUp: false
      };
    },
    onLoad(optins) {
      this.optins = optins
      this.callFcuntion();
    },
    // 分享朋友
    async onShareAppMessage() {
      this.shareCreateApi();
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            title: this.InfoObj.title
          });
        }, 2000);
      });

      return {
        title: this.InfoObj.title,
        path: utils.getCurrentPageUrlWithArgs(),
        promise
      };
    },
    methods: {
      // 获得村务公开
      async villageAffairsGetApi() {
        const res = await peopleApi.villageAffairsGetApi({
          id: this.optins.referId
        });
        this.generalFunction(res);
      },

      async partyEventGetApi() {
        const res = await peopleApi.partyEventGetApi({
          id: this.optins.referId
        });
        this.generalFunction(res);
      },

      async newsGetApi() {
        const res = await peopleApi.newsGetApi({
          id: this.optins.referId
        });
        this.generalFunction(res);
      },

      // 调用函数
      callFcuntion() {
        const ApiConfig = {
          村务公开详情: this.villageAffairsGetApi,
          党建活动详情: this.partyEventGetApi,
          医疗政策详情: '待添加',
          便民办事详情: this.newsGetApi,
          政策推送详情: this.newsGetApi,
          '介休政务百科-详情': this.newsGetApi
        };
        if (ApiConfig[this.optins.name]) {
          ApiConfig[this.optins.name]();
        }
      },

      // 通用函数
      generalFunction(res) {
        this.InfoObj = utils.setRichText(res)
      },

      // 创建点赞
      async praiseCreateApi() {
        if (this.isSignUp) {
          return;
        }
        const res = await publicApi.praiseCreateApi({
          praiseType: 99,
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          uni.showToast({
            title: '已报名',
            icon: 'success',
            duration: 2000
          });
          this.isSignUp = true
        } else {
          uni.showToast({
            title: '已经报名了哦～',
            icon: 'none',
            duration: 2000
          });
          this.isSignUp = true
        }
      }
    }
  };
</script>
<style lang="less">
  .details-page {
    padding: 30rpx 40rpx 112rpx;

    .details-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 50rpx;
    }

    .details-page-block {
      margin: 20rpx 0 30rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      line-height: 24rpx;
    }

    .details-block {
      margin-left: 20rpx;
      color: #007bd7;
    }
  }

  .details-url {
    .rich-text {
      margin-top: 24rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      line-height: 60rpx;
    }
  }
</style>