<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>
            <!-- <text class="info">介休市区</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.caseCount }}</view>
        </view>
      </view>

      <view class="mediate-info-list">
        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">认证单位</text>
          </view>
          <view class="info-item">
            {{ mediatorGetObj.companyName }}
          </view>
        </view>

        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">擅长领域</text>
          </view>
          <view class="info-item">
            {{ mediatorGetObj.expertiseAreas }}
          </view>
        </view>

        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">是否收费</text>
          </view>
          <view class="info-item">
            {{ mediatorGetObj.chargeFlag ? '是' : '否' }}
          </view>
        </view>

        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">个人简介</text>
          </view>
          <view class="info-item">
            {{ mediatorGetObj.resume }}
          </view>
        </view>

        <view class="mediate-info-item">
          <view class="title flex">
            <text class="title-name">联系方式</text>
          </view>
          <view class="info-item">
            {{ mediatorGetObj.mobile }}
          </view>
        </view>
      </view>
    </view>

    <view class="mediate-detail-bth flex">
      <view :class="'bth-give ' + (mediatorGetObj.praiseFlag ? 'bth-active-give' : '') + ' flex flex-center'"
        @tap="parseEventDynamicCode($event, mediatorGetObj.praiseFlag ? 'praiseCancelApi' : 'praiseCreateApi')">
        <image class="give-img"
          :src="mediatorGetObj.praiseFlag ? '/static/images/ic-give2.png' : '/static/images/ic-give1.png'"></image>
      </view>
      <view class="bth-mediate flex1" @tap="createMediate">找TA调解</view>
    </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';
  export default {
    components: {},
    data() {
      return {
        option: {},
        mediatorGetObj: {
          photo: '',
          name: '',
          star: '',
          caseCount: '',
          companyName: '',
          expertiseAreas: '',
          chargeFlag: false,
          resume: '',
          mobile: '',
          praiseFlag: false
        }
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(option) {
      this.option =option
      this.mediatorGetApi();
    },
    methods: {
      /**
       * 接口
       */
      async mediatorGetApi() {
        const res = await peopleApi.mediatorGetApi({
          id: this.option.id
        });
        if (res.data) {
          this.mediatorGetObj =  res.data
        }
      },

      // 创建点赞
      async praiseCreateApi() {
        const res = await publicApi.praiseCreateApi({
          praiseType: 6,
          referId: this.option.id,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          this.mediatorGetApi();
        }
      },

      async praiseCancelApi() {
        const res = await publicApi.praiseCancelApi({
          praiseType: 6,
          referId: this.option.id,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          this.mediatorGetApi();
        }
      },

      /**
       * 页面事件
       */
      createMediate() {
        uni.navigateTo({
          url: `/packages/people/pages/mediate-create/mediate-create?name=申请调解&mediatorId=${this.mediatorGetObj.id}`
        });
      }
    }
  };
</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 22rpx;
        // width: 220rpx;
        // height: 40rpx;
        // background: linear-gradient(103deg, #FFFFFF 0%, #FFE5DE 100%);
        // border-radius: 20rpx 0 0 20rpx;
        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 {
        margin-top: 9rpx;
        width: 200rpx;
        height: 32rpx;
        background: linear-gradient(270deg, #f38a36 0%, #ff9d4f 100%);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 32rpx;
        padding-left: 15rpx;
      }
    }
  }

  .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;

      .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;
    }
  }

  .mediate-detail-bth {
    width: 100%;
    // height: 80rpx;
    padding: 25rpx 36rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;

    .bth-give {
      width: 100rpx;
      height: 80rpx;
      border-radius: 8rpx;
      margin-right: 10rpx;
      background: #efefef;

      .give-img {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .bth-active-give {
      background: #ff7f34;
    }

    .bth-mediate {
      height: 100%;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 80rpx;
      background: var(--item-dominant-color);
      border-radius: 8rpx;
      text-align: center;
    }
  }
</style>