<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="党员详情" left-arrow />

    <view class="mediate-detail-section">
      <view class="mediate-detail-list flex flex-end">
        <image :src="mediatorGetObj.photo" class="mediate-head"></image>
        <view class="select-right flex flex-col">
          <image class="select-right-bg"
            src="https://zongzhi.xuqidata.com:5009/xq-ssg/ef982f0938e272c4295cc818721ab1db820aeeec01f2aa4a58920867d22c588d.png">
          </image>
          <view class="select-title flex">
            <text class="name">{{ mediatorGetObj.name }}</text>
          </view>
          <view class="select-rate flex flex-v-center">
            <van-rate readonly icon="/src/images/rate-icon.png" void-icon="/src/images/void-icon2.png"
              :value="mediatorGetObj.star" />
          </view>
          <view class="select-tag">{{ mediatorGetObj.position }}</view>
        </view>
      </view>

      <view class="mediate-info-list">
        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">先进事迹介绍</text>
          </view>
          <rich-text class="info-item" :nodes="mediatorGetObj.deed"></rich-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { peopleApi } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        options: {},
        mediatorGetObj: {
          photo: '',
          name: '',
          star: '',
          position: '',
          deed: ''
        }
      };
    },
    onLoad(options) {
      this.options = options
      this.excellentPartMemberGetApi();
    },
    methods: {
      async excellentPartMemberGetApi() {
        const res = await peopleApi.excellentPartMemberGetApi({
          id: this.options.id
        });
        this.generalFunction(res);
      },

      // 通用函数
      generalFunction(res) {
        if (res.data && res.data.createTime) {
          // res.data.createTime = app.globalData.util.timeFormat(res.data.createTime);
          if (res.data.deed) {
            res.data.deed = res.data.deed
              .replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
              .replace(/&lt;/g, '<')
              .replace(/&gt;/g, '>')
              .replace(/&amp;nbsp;/g, ' ')
              .replace(/&quot;/g, '"');
          }
          this.mediatorGetObj =res.data
        }
      }
    }
  };
</script>
<style lang="less">
  page {
    --rate-icon-size: 26rpx; // 评分大小
    --rate-icon-full-color: var(--item-dominant-color); // 评分选中颜色
    --rate-icon-gutter: 4rpx; // 评分图标之前的距离
  }

  .mediate-detail-section {
    padding: 0 30rpx 130rpx;
  }

  .mediate-detail-list {
    margin-top: 16rpx;
    width: 100%;
    height: 218rpx;
    position: relative;

    .mediate-head {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 218rpx;
      height: 218rpx;
      border-radius: 8rpx;
    }

    .select-right {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      width: 497rpx;
      height: 218rpx;
      background: linear-gradient(94deg, #ffffff 0%, #ffcdc0 100%);
      border-radius: 2rpx;
      padding-left: 55rpx;
      justify-content: center;

      .select-right-bg {
        position: absolute;
        right: 29rpx;
        bottom: 6rpx;
        width: 140rpx;
        height: 140rpx;
      }

      .select-title {
        align-items: flex-end;

        .name {
          font-size: 32rpx;
          font-weight: 400;
          color: var(--item-dominant-color);
          line-height: 32rpx;
        }

        .info {
          font-size: 26rpx;
          font-weight: 400;
          color: #222222;
          line-height: 26rpx;
          margin-left: 24rpx;
        }
      }

      .select-rate {
        margin: 24rpx 0 29rpx;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: -17rpx;
          top: 50%;
          transform: translateY(-50%);
          z-index: -1;
          width: 220rpx;
          height: 40rpx;
          background: linear-gradient(103deg, #ffffff 50%, #ffe5de 100%);
          border-radius: 20rpx 0 0 20rpx;
        }
      }

      .select-tag {
        font-size: 30rpx;
        font-weight: 400;
        color: #222222;
        line-height: 30rpx;
      }
    }
  }

  .mediate-info-list {
    margin-top: 76rpx;

    .mediate-info-item:not(:first-child) {
      margin-top: 53rpx;
    }

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

      .title-name {
        position: relative;

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

    .info-item {
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      line-height: 60rpx;
    }
  }
</style>