<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black"
      :left-text="'议事厅-' + (assemblyHallGetObj.status === 1 ? '未开始' : assemblyHallGetObj.status === 2 ? '议事中' : assemblyHallGetObj.status === 3 ? '议事结束' : '')"
      left-arrow />

    <view class="messes-info bg-status1">
      <view class="messes-image">
        <view class="text-line-1 messes-image-title">主题：{{ assemblyHallGetObj.title }}</view>
        <view class="text-line-1 messes-image-block">时间：{{ hooks.getDateTime(assemblyHallGetObj.createTime) }}</view>
      </view>
      <view :class="
                    'messes-hint ' +
                    (assemblyHallGetObj.status === 1 ? 'hint-grey' : assemblyHallGetObj.status === 2 ? 'hint-purple' : assemblyHallGetObj.status === 3 ? 'hint-green' : '')
                ">
        {{ assemblyHallGetObj.status === 1 ? '未开始' : assemblyHallGetObj.status === 2 ? '议事中' : assemblyHallGetObj.status === 3 ? '议事结束' : '' }}
      </view>
    </view>

    <view class="line-top"></view>

    <view class="assembly-detail">
      <view class="messes-content">
        <view class="messes-title">
          <rich-text :nodes="assemblyHallGetObj.content"></rich-text>
        </view>
        <view class="content-list">
          <image v-if="assemblyHallGetObj.images" class="content-image"
            src="http://shichunfei.top/web/image/information.png" v-for="(it, index) in assemblyHallGetObj.images"
            :key="index"></image>
        </view>
        <view class="messes-block" v-if="assemblyHallGetObj.address">{{ assemblyHallGetObj.address }}</view>
      </view>

      <view class="messes-comment" v-if="assemblyHallGetObj.status != 3">
        <view class="comment-item flex flex-between" v-for="(item, index) in commentPageList" :key="index">
          <image class="head-img" :src="item.avatar"></image>

          <view class="flex1 comment-head-info">
            {{ item.nickname }}:
            {{ item.content }}
          </view>
        </view>
      </view>

      <view class="messes-msg" v-if="assemblyHallGetObj.status === 3">
        <view class="messes-msg-item">
          <view class="messes-msg flex">
            <text class="messes-msg-name">议事总结</text>
          </view>
          <view class="messes-msg-info-item">
            <view>实际参与人数：{{ assemblyHallGetObj.joinCount }}</view>
            <view>总结时间：{{ assemblyHallGetObj.timeContinued }}分钟</view>
          </view>
        </view>
        <view class="messes-msg-item" v-if="assemblyHallGetObj.result">
          <view class="messes-msg flex">
            <text class="messes-msg-name">议事公示</text>
          </view>
          <view class="messes-msg-info-item">
            <view>{{ assemblyHallGetObj.result || '' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="comment-input flex flex-v-center" v-if="assemblyHallGetObj.status !== 3">
      <input class="input-info flex1" type="text" :value="searchContent" placeholder="请输入"
        placeholder-class="input-info-placeholder" @input="onSearchInput" />
      <view class="input-bth" @tap="commentCreateApi">发送</view>
    </view>
  </view>
</template>
<!-- <script module="hooks" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const {
  //   peopleApi
  // } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    data() {
      return {
        searchContent: '',
        assemblyHallGetObj: {
          status: 0,
          title: '',
          content: '',
          images: '',
          address: '',
          joinCount: '',
          timeContinued: '',
          result: ''
        },
        commentPageList: [],
        optins: null,
        userInfo: null
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad(optins) {
      this.setData({
        optins,
        userInfo: uni.getStorageSync('userInfoData')
      });
      this.assemblyHallGetApi();
      this.commentPageApi();
    },
    methods: {
      //
      async assemblyHallGetApi() {
        const res = await peopleApi.assemblyhallIdApi({
          id: this.optins.id
        });
        if (res.data) {
          res.data.timeContinued = parseInt((res.data.endTime - res.data.startTime) / 1000 / 60);
          this.setData({
            assemblyHallGetObj: res.data
          });
        }
      },

      async commentPageApi() {
        const res = await peopleApi.commentPageApi({
          pageNo: 1,
          pageSize: 10,
          referId: this.optins.id
        });
        if (res.data) {
          this.setData({
            commentPageList: res.data.list
          });
        }
      },

      async commentCreateApi() {
        if (this.searchContent == '') {
          uni.showToast({
            title: '评论不能为空',
            icon: 'none'
          });
          return;
        }
        const res = await peopleApi.commentCreateApi({
          content: this.searchContent,
          referId: this.assemblyHallGetObj.id,
          userId: uni.getStorageSync('userInfoData').userId
        });
        if (res.data) {
          this.setData({
            searchContent: ''
          });
        }
        this.commentPageApi();
      },

      /**
       * 页面事件
       */
      onSearchInput(event) {
        const {
          value
        } = event.detail;
        this.setData({
          searchContent: value
        });
      }
    }
  };
</script>
<style lang="less">
  .bg-status2 {
    background: #eaf5eb;
  }

  .bg-status1 {
    background: #f7f5fe;
  }

  .hint-purple {
    background: linear-gradient(360deg, #6e63f9 0%, #8e5aff 100%);
  }

  .hint-green {
    background: #1aa63b;
  }

  .messes-info {
    padding: 53rpx 25rpx 20rpx;
    position: relative;
    border-radius: 16rpx 16rpx 0 0;
    position: fixed;
    width: 100%;

    .messes-hint {
      position: absolute;
      top: 0;
      right: 0;
      width: 130rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      font-size: 24rpx;
      color: #fff;
      font-weight: 400;
      border-radius: 0px 16rpx 0px 40rpx;
    }

    .messes-image {
      font-size: 30rpx;
      line-height: 30rpx;
      color: #333333;

      .messes-image-title {
        font-weight: 500;
      }

      .messes-image-block {
        margin-top: 34rpx;
        font-weight: 400;
      }
    }
  }

  .line-top {
    width: 100%;
    height: 166rpx;
    background-color: transparent;
  }

  .assembly-detail {
    padding: 0 15rpx 130rpx;

    .messes-content {
      padding: 0 25rpx;

      .messes-title {
        margin-top: 20rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #666666;
        line-height: 50rpx;
        margin-bottom: 25rpx;
      }

      .assembly-info {
        width: 100%;
        height: 322rpx;

        .assembly-info-bg {
          width: 100%;
          height: 100%;
        }
      }

      .content-list {
        display: grid;
        grid-template-columns: repeat(3, 218rpx);
        justify-content: space-between;
        grid-gap: 10rpx;

        .content-image {
          width: 218rpx;
          height: 200rpx;
          border-radius: 8rpx;
        }
      }

      .messes-block {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        line-height: 26rpx;
        margin-top: 24rpx;
      }
    }
  }

  .messes-comment {
    margin-top: 38rpx;
    padding: 0 25rpx 0;

    .comment-item {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;

      &:not(:first-child) {
        margin-top: 32rpx;
      }

      .head-img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .comment-head-info {
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
      }
    }
  }

  .messes-msg {
    margin-top: 76rpx;
    padding: 0 25rpx;

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

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

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

    .messes-msg-info-item {
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      line-height: 60rpx;
    }
  }

  .comment-input {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 108rpx;
    background: #ededed;
    padding: 0 20rpx 0 30rpx;

    .input-info {
      height: 56rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 35rpx;
      border: 1px solid #ffffff;
      padding-left: 30rpx;
    }

    .input-info-placeholder {
      color: #5c446e;
      font-weight: 400;
    }

    .input-bth {
      text-align: center;
      margin-left: 14rpx;
      width: 116rpx;
      height: 56rpx;
      background: linear-gradient(360deg, #835dfd 0%, #8e5aff 100%);
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 56rpx;
    }
  }
</style>