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

    <view class="details-page">
      <view v-if="InfoObj.merchantPhoto"
        style="width: 100%; height: 376rpx; margin-bottom: 32rpx; border-radius: 10rpx; overflow: hidden">
        <video class="team-video" :danmu-btn="true" :controls="false" v-if="InfoObj.merchantVideo !== null"
          :src="InfoObj.merchantVideo" style="width: 100%; height: 100%" />
        <image v-else-if="InfoObj.merchantVideo === null" :src="InfoObj.merchantPhoto"
          style="width: 100%; height: 100%" />
      </view>

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

      <!-- 家庭医生时展示 -->
      <!-- <image class="details-coverPic" wx:if="{{ InfoObj.phone && optins.name === '家庭医生进网格详情' }}" src="https://zongzhi.xuqidata.com:5009/xq-ssg/d3115b665537def7764a688c4cb46bc1df41175232c2a5c5af79f9d3f32c9002.png" data-phone="{{InfoObj.phone}}" bindtap="makePhone"></image> -->

      <!-- 店铺详情时展示 -->
      <view class="nav-to flex flex-v-center flex-between" v-if="optins.name === '店铺详情'">
        <view class="nav-to-left">
          <view class="text-line-1">{{ InfoObj.merchantName }}</view>
          <view class="msg text-line-2">{{ InfoObj.merchantPosition }}</view>
        </view>
        <view class="nav-to-right flex flex-col flex-center" @tap="goMap">
          <van-icon size="32rpx" color="#FE3B53" name="location" />
          <text class="nav-to-right-text">导航</text>
        </view>
      </view>

      <view class="details-url">
        <!-- <rich-text class="rich-text" nodes="{{InfoObj.content}}" /> -->
        <mp-html class="rich-text" :content="InfoObj.content" />
      </view>

      <!-- 优秀医生跟优秀党员时才显示 -->
      <view class="doctor" v-if="doctorPageList.length">
        <view class="title flex flex-center">
          <text class="title-name">{{ optins.name === '家庭医生进网格详情' ? '家庭医生团队' : '优秀党员' }}</text>
        </view>

        <view class="mediate-select-list">
          <view class="mediate-select-item flex" :data-item="item" v-for="(item, index) in doctorPageList" :key="index">
            <view class="select-left">
              <image :src="item.photo" class="mediate-head" />
            </view>

            <view class="select-right flex1 flex flex-col flex-between">
              <view class="select-title flex flex-v-center flex-between">
                <text
                  :class="'name ' + (optins.name === '家庭医生进网格详情' ? 'name-doctor' : 'name-party')">{{ item.name }}</text>
              </view>
              <view class="select-msg text-line-4">
                {{ item.introduce }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="details flex flex-between">
      <view class="details-item flex flex-v-center">
        <button class="icon-bth" open-type="share" hover-class="none" />
        <image class="icon" src="/static/images/ic-share.png" />
        <text class="icon-text">{{ InfoObj.shareCount }}</text>
      </view>
      <view class="flex flex-v-center">
        <view class="right-one flex flex-v-center" v-if="InfoObj.collectionFlag === 1 || InfoObj.collectionFlag === 0"
          @click="parseEventDynamicCode($event, InfoObj.collectionFlag ? 'collectionCancelApi' : 'collectionCreateApi')">
          <image class="icon"
            :src="InfoObj.collectionFlag ? '/static/images/ic-collection1.png' : '/static/images/ic-collection.png'" />
          <text class="icon-text">{{ InfoObj.collectionCount }}</text>
        </view>
        <view class="flex flex-v-center"
          @click="parseEventDynamicCode($event, InfoObj.praiseFlag ? 'praiseCancelApi' : 'praiseCreateApi')">
          <image class="icon"
            :src="InfoObj.praiseFlag ? '/static/images/ic-give1.png' : '/static/images/ic-give.png'" />
          <text class="icon-text">{{ InfoObj.praiseCount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // 所有详情页复用
  // const app = getApp();
  // const {
  //   publicApi,
  //   consult,
  //   peopleApi,
  //   lifeApi
  // } = app.globalData.api;
  import * as consult from '@/api/consult';
  import * as publicApi from '@/api/publicApi';
  import * as peopleApi from '@/api/peopleApi';
  import * as lifeApi from '@/api/lifeApi';
  export default {
    components: {},
    data() {
      return {
        shareType: 0,
        // 点赞所需字段
        optins: {
          name: ''
        },
        InfoObj: {
          merchantPhoto: '',
          merchantVideo: '',
          title: '',
          createTime: '',
          publisher: '',
          merchantName: '',
          merchantPosition: '',
          content: '',
          shareCount: '',
          collectionFlag: 0,
          collectionCount: '',
          praiseFlag: false,
          praiseCount: ''
        },
        doctorPageList: []
      };
    },
    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: app.globalData.util.getCurrentPageUrlWithArgs(),
        promise
      };
    },
    // 分享朋友
    async onShareAppMessage() {
      this.shareCreateApi();
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            title: this.InfoObj.title
          });
        }, 2000);
      });
      return {
        title: this.InfoObj.title,
        // path: app.globalData.util.getCurrentPageUrlWithArgs(),
        promise
      };
    },
    // 分享到朋友圈
    onShareTimeline() {
      const obj = {
        title: this.InfoObj.title,
        // query: app.globalData.util.getCurrentPageUrlWithArgs()
      };
      if (this.InfoObj.pics) {
        obj.imageUrl = this.InfoObj.pics;
      }
      return obj;
    },
    methods: {
      // 党建引领详情
      async newsGetApi() {
        const res = await peopleApi.newsGetApi({
          id: this.optins.referId
        });
        this.generalFunction(res);
      },

      // 医院详情
      async hospitalGetApi() {
        const res = await peopleApi.hospitalGetApi({
          id: this.optins.referId
        });
        // 为医院的字段添加以符合所有其他页面的字段
        res.data.title = res.data.name || '';
        res.data.publisher = res.data.userName || '';
        res.data.content = res.data.introduce || '';
        this.generalFunction(res);
      },

      // 优秀医生
      async doctorPageApi() {
        const parse = {
          pageNo: 1,
          pageSize: 10,
          hospitalName: this.optins.hospitalName
        };
        if (this.optins.orgId) {
          parse.orgId = this.optins.orgId;
        }
        const res = await peopleApi.doctorPageApi(parse);
        if (res.data && res.data.list.length) {
          this.doctorPageList = res.data.list
        }
      },

      // 商户详情
      async merchantGetApi() {
        const res = await lifeApi.merchantGetApi({
          id: this.optins.referId
        });
        res.data.title = res.data.merchantName || '';
        res.data.publisher = res.data.merchantPosition || '';
        res.data.content = res.data.merchantIntroduce || '';
        this.generalFunction(res);
      },

      // 法律法规详情
      async lawsRegulationGetApi() {
        const res = await peopleApi.lawsRegulationGetApi({
          id: this.optins.referId
        });
        this.generalFunction(res);
      },

      // 党支部详情
      async partyBranchGetApi() {
        const res = await peopleApi.partyBranchGetApi({
          id: this.optins.referId
        });
        res.data.title = res.data.name || '';
        res.data.content = res.data.descInfo || '';
        this.generalFunction(res);
      },

      // 优秀党员
      async excellentPartMemberPageApi() {
        const res = await peopleApi.excellentPartMemberPageApi({
          pageNo: 1,
          pageSize: 10
        });
        if (res.data && res.data.list.length) {
          res.data.list.forEach((e) => {
            e.introduce = e.position;
          });
          this.doctorPageList = res.data.list
        }
      },

      // 创建分享
      async shareCreateApi() {
        const res = await publicApi.shareCreateApi({
          shareType: this.shareType,
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          this.callFcuntion();
        }
      },

      // 创建点赞
      async praiseCreateApi() {
        const res = await publicApi.praiseCreateApi({
          praiseType: this.shareType,
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          uni.showToast({
            title: '已点赞',
            icon: 'none',
            duration: 1000
          });
          this.callFcuntion();
        }
      },

      // 取消点赞
      async praiseCancelApi() {
        const res = await publicApi.praiseCancelApi({
          praiseType: this.shareType,
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          uni.showToast({
            title: '已取消点赞',
            icon: 'none',
            duration: 1000
          });
          this.callFcuntion();
        }
      },

      // 创建收藏
      async collectionCreateApi() {
        const res = await publicApi.collectionCreateApi({
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          uni.showToast({
            title: '已点赞',
            icon: 'none',
            duration: 1000
          });
          this.callFcuntion();
        }
      },

      // 取消收藏
      async collectionCancelApi() {
        const res = await publicApi.collectionCancelApi({
          referId: this.optins.referId,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          uni.showToast({
            title: '已取消收藏',
            icon: 'none',
            duration: 1000
          });
          this.callFcuntion();
        }
      },

      // 医生api集中调用
      doctorFcuntion() {
        // if (Number(this.data.optins.pageType) === 1101) {
        //   this.newsGetApi();
        //   return;
        // }
        this.hospitalGetApi();
        this.doctorPageApi();
      },

      // 星级党支部api集中调用
      partyBranchFcuntion() {
        this.partyBranchGetApi();
        this.excellentPartMemberPageApi();
      },

      // 调用函数
      callFcuntion() {
        const ApiConfig = {
          咨询详情: {
            shareType: 1,
            api: this.newsGetApi
          },
          党建引领详情: {
            shareType: 1,
            api: this.newsGetApi
          },
          家庭医生进网格详情: {
            shareType: 2,
            api: this.doctorFcuntion
          },
          店铺详情: {
            shareType: 4,
            api: this.merchantGetApi
          },
          法律详情: {
            shareType: 5,
            api: this.lawsRegulationGetApi
          },
          星级党支部详情: {
            shareType: 3,
            api: this.partyBranchFcuntion
          },
          党建新闻详情: {
            shareType: 1,
            api: this.newsGetApi
          },
          党建活动详情: {
            shareType: 1,
            api: this.newsGetApi
          },
          医疗政策详情: {
            api: this.newsGetApi
          }
        };
        const obj = ApiConfig[this.optins.name];
        if (obj.api) {
          obj.api();
        }
        this.shareType = obj.shareType || 0
      },

      // 通用函数
      generalFunction(res, key) {
        if (res.data && res.data.createTime) {
          // res.data.createTime = app.globalData.util.timeFormat(res.data.createTime);
          if (res.data.content) {
            res.data.content = res.data.content.replace(/(\<img|\<p|\<iframe|src=null)/gi, function($0, $1) {
              console.log($0, $1);
              return {
                '<img': '<img style="width:100%;height:auto;display:block;" ',
                '<iframe': '<video style="width:100%;height:auto;display:block;" ',
                '</iframe': '/>',
                '<p': '<p style="text-indent: 24px;" ',
                '<article': '<div',
                '</article': '</div',
                '<header': '<div',
                '</header': '</div'
              } [$1];
            });
          }
          this.InfoObj = res.data
        }
      },

      // 拨打电话
      makePhone(event) {
        const {
          phone
        } = event.currentTarget.dataset;
        uni.makePhoneCall({
          phoneNumber: phone,
          complete: () => {}
        });
      },

      // 导航
      goMap() {
        const {
          latitude,
          longitude,
          merchantName,
          merchantPosition
        } = this.InfoObj;
        uni.openLocation({
          latitude: Number(latitude),
          longitude: Number(longitude),
          name: merchantName,
          address: merchantPosition
        });
      }
    }
  };
</script>
<style lang="less">
  .details-page {
    padding: 30rpx 40rpx 112rpx;
  }

  .ml-15 {
    margin-left: 30rpx;
  }

  .mt-26 {
    margin-top: 52rpx;
    padding-top: 36rpx;
    border-top: 1px solid #efefef;
  }

  .details-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 26rpx;
  }

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

  .details-block {
    color: #007bd7;
  }

  .details-coverPic {
    width: 100%;
    height: 150rpx;
    padding-top: 20rpx;
    padding-bottom: 40rpx;
    box-sizing: content-box;
  }

  .details-url {
    margin-top: 24rpx;

    .rich-text {
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      line-height: 60rpx;
    }
  }

  .nav-to {
    padding: 12rpx 0 16rpx 0;
    border-bottom: 1px solid #efefef;

    .nav-to-left {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 28rpx;
      flex: 1;
      padding-right: 100rpx;

      .msg {
        margin-top: 12rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        line-height: 26rpx;
      }
    }

    .nav-to-right {
      width: 100rpx;
      height: 100rpx;
      background: #fff1f3;
      border-radius: 4rpx;

      .nav-to-right-text {
        margin-top: 9rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #fe3b53;
        line-height: 18rpx;
      }
    }
  }

  .details {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    // height: 112rpx;
    padding: 40rpx 40rpx 40rpx 44rpx;
    background-color: #ffffff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      width: 670rpx;
      height: 1px;
      background: #efefef;
    }

    .details-item {
      position: relative;
    }

    .right-one {
      margin-right: 52rpx;
    }

    .icon-bth {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    .icon {
      width: 32rpx;
      height: 32rpx;
    }

    .icon-text {
      font-size: 32rpx;
      line-height: 32rpx;
      font-weight: 500;
      color: #666666;
      margin-left: 20rpx;
    }
  }

  .doctor {
    margin-top: 50rpx;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 36rpx;
      padding-left: 6rpx;

      .title-name {
        position: relative;

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

    .mediate-select-list {
      margin-top: 54rpx;
      width: 100%;

      .mediate-select-item {
        padding: 24rpx 0;
        border-bottom: 1px solid #e1e1e1;

        .select-left {
          width: 218rpx;
          height: 218rpx;

          .mediate-head {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }
        }

        .select-right {
          margin-left: 20rpx;

          .select-title {
            margin-top: 27rpx;

            .name {
              font-size: 32rpx;
              font-weight: 400;
              color: #333333;
              line-height: 32rpx;
              border-radius: 2rpx;
              padding-right: 52rpx;
            }

            .name-doctor {
              background: linear-gradient(94deg, #ffffff 0%, #1593f7 100%);
            }

            .name-party {
              background: linear-gradient(94deg, #ffffff 0%, #ff7373 100%);
            }
          }

          .select-msg {
            align-self: flex-start;
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;
            line-height: 40rpx;
            margin-top: 27rpx;
          }
        }
      }
    }
  }

  .team-video {
    position: relative;
    text-align: center;
    z-index: 1;
    margin: 0 auto;
  }
</style>