<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="志愿服务详情" left-arrow />

    <view class="detail">
      <view class="detail-bg">
        <view class="multi-line" style="width: 80%;">{{detaileObj.title}}</view>
        <view :class="`type${detaileObj.serviceStatus}`">{{getStatusText(statusList,detaileObj.serviceStatus)}}
        </view>
        <view class=" detail-heade">
          <image class="image" :src="detaileObj.avatar" mode=""></image>
          <text class="nickname">{{detaileObj.nickName}}</text>
          <view class="msg">{{getStatusText(projectTypeList,detaileObj.serviceType)}}</view>
        </view>
      </view>

      <view class="conent">{{detaileObj.content}}</view>

      <view class="detail-grid">
        <block v-for="(item,index) in detaileObj.pics" :key="index">
          <image @click="previewImage(item,index)" :src="item"></image>
        </block>
      </view>

      <view class="validity">申领有效期：<text
          class="time">{{getDateTime(detaileObj.createTime)}}～{{getDateTime(detaileObj.effectDate)}}</text></view>

      <view class="flex-between">
        <text class="title-name">志愿服务</text>
        <text class="num"><text class="action">{{total}}</text>/{{detaileObj.needNum}}</text>
      </view>

      <view class="user">
        <block v-for="item in applyVolunteerProjec" :key="item">
          <view class="user-item">
            <image class="user-image" :src="item.avatar"></image>
            <text class="nickname">{{item.userName}}</text>
          </view>
        </block>
      </view>

      <view class="but" v-if="detaileObj.serviceStatus !== 2" @click="applyFor">申领</view>
    </view>

    <view style="height: 50rpx;"></view>
  </view>
</template>

<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util.map'
  export default {
    data() {
      return {
        options: {},
        detaileObj: {},
        statusList: [],
        projectTypeList: [],
        educationList: [],
        total: 0,
        applyVolunteerProjec: [],
      }
    },
    onLoad(options) {
      this.options = options
      this.getTypeApi('people_volunteer_project_type', 'projectTypeList');
      this.getTypeApi('people_volunteer_project_serviceStatus', 'statusList');
      this.getVolunteerProject();
      this.applyVolunteerProjecPageApi();
    },
    methods: {
      getStatusText(list, key) {
        return utils.getStatusText(list, key)
      },
      getDateTime(time) {
        return utils.getDateTime(time, 4)
      },
      //  获取群众点单字典
      async getTypeApi(dictType, list) {
        const res = await publicApi.getDictDataApi({
          dictType: dictType,
          pageNo: 1,
          pageSize: 100,
        });
        if (res.code === 0) {
          this[list] = res.data.list;
        }
      },
      async getVolunteerProject() {
        const res = await peopleApi.getVolunteerProjectApi({
          id: this.options.id,
        });
        if (res.data) {
          this.detaileObj = res.data
        }
      },
      async applyVolunteerProjecPageApi() {
        const res = await peopleApi.applyVolunteerProjecPageApi({
          volunteerProjectId: this.options.id,
          pageSize: 100,
          pageNo: 1,
        });

        if (res.data) {
          this.applyVolunteerProjec = res.data.list
          this.total = res.data.total
        }
      },
      previewImage(item, index) {
        uni.previewImage({
          current: item,
          urls: this.detaileObj.pics,
        });
      },
      async applyFor() {
        const res = await peopleApi.applyVolunteerProjecCreateApi({
          volunteerProjectId: this.options.id,
          userId: uni.getStorageSync('userInfoData').userId,
        });
        if (res.data) {
          const {
            applyVolunteerProjec
          } = this;
          let appitme = [];
          appitme.push({
              userName: uni.getStorageSync('userInfoData').nickName,
              avatar: uni.getStorageSync('userInfoData').avatar,
            }),
            applyVolunteerProjec.push(...appitme);
          uni.showToast({
            title: '申领成功',
            icon: 'none',
          });
          this.applyVolunteerProjec = applyVolunteerProjec
          this.total = this.total + 1
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .detail {
    padding: 0 15rpx;

    .detail-bg {
      position: relative;
      background: linear-gradient(182deg, #FEF6E9 0%, #FFFFFF 100%, #FFFFFF 100%);
      border-radius: 16px 16px 0px 0px;
      padding: 26rpx 25rpx 13rpx 25rpx;

      .detail-heade {
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        .image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 4313210px;
        }

        .nickname {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          margin-left: 16rpx;
        }

        .msg {
          margin-left: 78rpx;
          display: inline-block;
          font-size: 20rpx;
          font-weight: 400;
          color: #FFFFFF;
          padding: 4rpx 15rpx;
          background: linear-gradient(270deg, #F38A36 0%, #FF9D4F 100%);
          border-radius: 4rpx;
        }
      }
    }

    .conent {
      margin-top: 36rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #333333;
      padding: 0rpx 25rpx 0rpx 25rpx;
    }

    .detail-grid {
      margin-top: 29rpx;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      grid-gap: 10rpx;
      padding: 0rpx 25rpx 0rpx 25rpx;

      image {
        width: 100%;
        height: 200rpx;
      }
    }

    .validity {
      margin-top: 41rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      padding: 0rpx 25rpx 0rpx 25rpx;

      .time {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .type0 {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
    border-radius: 0px 8rpx 0px 1000rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    padding: 12rpx 22rpx 12rpx 36rpx;
  }


  .type1 {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(270deg, #5B638E 0%, #7B96BF 100%);
    border-radius: 0px 8rpx 0px 1000rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    padding: 12rpx 22rpx 12rpx 36rpx;
  }

  .title-name {
    display: inline-block;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    z-index: 3;

    &::after {
      content: '';
      position: absolute;
      left: 0px;
      bottom: 5px;
      width: 140rpx;
      // width: 115%;
      z-index: -1;
      height: 10rpx;
      background: #FFCED6;
      border-radius: 2rpx;
    }

    .num {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }
  }

  .action {
    color: #FE3B53;
    margin-right: 7rpx;
  }

  .flex-between {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx 0 30rpx;
  }

  .user {
    width: 100%;
    margin-top: 48rpx;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12rpx;
    padding-right: 10rpx;

    .user-item {
      background: linear-gradient(90deg, #FFD9DA 0%, #FF8C8F 100%);
      border-radius: 232132318px;
      padding: 12rpx 10rpx 12rpx 16rpx;
      display: flex;
      align-items: center;

      .user-image {
        width: 32rpx;
        height: 32rpx;
        border-radius: 1932131rpx;
        border: 1px solid #FFFFFF;
      }

      .nickname {
        display: inline-block;
        font-size: 24rpx;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: 16rpx;
      }
    }
  }

  .but {
    background: #FE3B53;
    border-radius: 8rpx;
    padding: 24rpx 0;
    text-align: center;
    margin-top: 72rpx;
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
</style>