<template>
  <view class="page">
    <header>
      <p class="title">{{ title }}</p>
      <view class="time">
        <span>提交时间：</span>
        <span>{{ baseInfo.submitTime }}</span>
      </view>
    </header>
    <view class="mylog_main">
      <view class="mylog_main_summary">
        <p class="word">活动总结</p>
        <p class="value">{{ baseInfo.content }}</p>
      </view>
      <view class="imageList">
        <p class="word">活动照片</p>
        <image v-for="(e, index) in baseInfo.files" :key="index" @click="previewImage(baseInfo.files,index)"
               mode="aspectFill" :src="e.accessUrl"></image>
      </view>
    </view>
    <view class="editLog" @click="editLog">
      <div class="iconfont">&#xe6c2;</div>
    </view>
  </view>
</template>

<script>
export default {
  name: "myLog",
  data() {
    return {
      signupId: '',
      baseInfo: {},
      title: ''
    }
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.signupId = options.signupId;
    this.title = options.title;
  },
  methods: {
    editLog() {
      uni.navigateTo({
        url: `./fillLog?reportId=${this.baseInfo.reportId}&signupId=${this.signupId}&signupContent=${this.baseInfo.signupContent}`
      })
    },
    searchDetail() {
      this.$instance.post(`/app/apppartyreport/log?id=${this.signupId}`).then(res => {
        if (res.code == 0) {
          this.baseInfo = {...res.data};
        }
      })
    },
    previewImage(arr, index) {
      let list = [];
      let current = index;
      arr.map((e, index) => {
        list.push(e.accessUrl)

      })
      uni.previewImage({
        urls: list,
        current: current,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片'],
          success: function (data) {

          },
          fail: function (err) {

          }
        }
      });
    },
  },

  onShow(){
    this.searchDetail();
  }
}
</script>

<style lang="scss" scoped>
.page{
    width: 100%;
    height: 100%;
    position: relative;
    header{
        width: 100%;
        min-height: 256rpx;
        background:rgba(230,0,18,1);
        padding: 32rpx;
        box-sizing: border-box;
        .title{
            font-size:40rpx;
            color:#fff;
        }
        .time{
            height: 112rpx;
            line-height: 112rpx;
            font-size:28rpx;
            color:#fff;
            span:nth-child(2){
                opacity: 0.7;
            }
        }
    }
    .mylog_main{
        width: 100%;
        .word{
            height: 44rpx;
            width: 100%;
            border-left: 6rpx solid  #E60012;
            box-sizing: border-box;
            color:#333333;
            font-size:38rpx;
            line-height: 44rpx;
            text-indent: 16rpx;
            font-weight: 600;
        }
        .mylog_main_summary{
             width: 100%;
             padding: 32rpx;
             background-color: #fff;
             box-sizing: border-box;
            .value{
                margin-top: 56rpx;
                color:#333333;
                font-size:32rpx;
                word-break: break-all;
            }
        }
        .imageList{
            width: 100%;
            background-color: #fff;
            padding: 32rpx;
            box-sizing: border-box;
            margin-top: 16rpx;
            image{
                width: 100%;
                height: 384rpx;
                border-radius: 4rpx;
                margin-top:32rpx;
            }
        }
    }
    .editLog{
      width: 96px;
      height: 96px;
      border-radius: 48px;
      background: #FFFFFF;
      position: fixed;
      right: 0;
      top: calc(100% - 400px);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
      .iconfont {
        font-size: 66px;
        color: #F85461;
      }
    }
}
</style>