<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="议事厅" left-arrow />

    <van-search @change="onChange" :value="content" shape="round" placeholder="发布信息查询" use-action-slot
      @search="onSearch">
      <view slot="action" @tap="onSearch">搜索</view>
    </van-search>

    <view class="masses">
      <view class="thenMesses" v-if="assemblyHallList.length !== 0" @tap="applySuccess" :data-item="item"
        v-for="(item, index) in assemblyHallList" :key="index">
        <view :class="'messes-bg bg-status' + item.status">
          <view class="flex flex-v-center flex-between thenMesses-image">
            <view class="image-head">
              <image class="head-img" :src="item.avatar"></image>
            </view>
            <view class="thenMesses-image-flex">
              <view class="text-line-1 thenMesses-title">{{ item.title }}</view>
              <text class="text-line-1 thenMesses-block">{{ toods.getDateTime(item.createTime) }}</text>
            </view>
          </view>
          <view
            :class="'thenMesses-hint ' + (item.status === 1 ? 'hint-grey' : item.status === 2 ? 'hint-purple' : item.status === 3 ? 'hint-green' : '')">
            {{ item.status === 1 ? '未开始' : item.status === 2 ? '议事中' : item.status === 3 ? '议事结束' : '' }}
          </view>
        </view>

        <view class="messes-content">
          <view class="messes-title">
            <rich-text :nodes="item.content"></rich-text>
          </view>
          <view class="content-list">
            <image class="content-image" :src="it" v-for="(it, index1) in item.images" :key="index1"></image>
          </view>
          <view class="messes-block">发布人：{{ item.nickName }}</view>
          <!-- 议事厅状态 status： 1 未开始 2 议事中 3 议事结束 -->
          <!-- 议事人员状态 joinStatus 1 申请加入 2 审批中 3 已加入 4 加入失败 -->
          <block v-if="item.status === 1">
            <view class="messes-bth" v-if="item.joinStatus === 1" @tap.stop.prevent="applyToJoin" :data-item="item">申请加入
            </view>
            <view v-if="item.joinStatus == 2" class="messes-bth">审批中</view>
            <view v-if="item.joinStatus == 3" class="messes-bth messes-bth-success">已加入</view>
            <view v-if="item.joinStatus == 4" class="messes-bth messes-bth-fail">加入失败</view>
          </block>
          <block v-if="item.status === 2">
            <view class="messes-bth" v-if="item.joinStatus === 1" @tap.stop.prevent="applyToJoin" :data-item="item">申请加入
            </view>
            <view v-if="item.joinStatus == 2" class="messes-bth">审批中</view>
            <view v-if="item.joinStatus == 3" class="messes-bth messes-bth-success">已加入</view>
            <view v-if="item.joinStatus == 4" class="messes-bth messes-bth-fail">加入失败</view>
          </block>
          <block v-if="item.status === 3">
            <view v-if="item.joinStatus == 1" @tap.stop.prevent="applyError" data-name="议事已经结束，无法加入" class="messes-bth">
              申请加入</view>
            <view v-if="item.joinStatus == 2" class="messes-bth">审批中</view>
            <view v-if="item.joinStatus == 3" class="messes-bth messes-bth-success">已加入</view>
            <view v-if="item.joinStatus == 4" class="messes-bth messes-bth-fail">加入失败</view>
          </block>
        </view>
      </view>
      <van-empty v-if="assemblyHallList.length === 0" description="暂时无数据" />
    </view>

    <!-- 显示成功和失败 -->
    <van-popup :show="isPopup">
      <view class="state flex flex-col flex-center">
        <view class="flex flex-col flex-center" v-if="type == 'success'">
          <image style="width: 72rpx; height: 72rpx" src="/static/images/icon3.png"></image>
          <view class="state-text state-text-yes">申请加入成功</view>
        </view>
        <view class="state-text state-text-no flex flex-col flex-center" v-if="type == 'error'">
          <image style="width: 72rpx; height: 72rpx" src="/static/images/icon2.png"></image>
          <text style="margin-top: 10rpx">申请加入失败</text>
          <text style="margin-top: 10rpx" class="defalue">{{ typeName }}</text>
        </view>
      </view>
    </van-popup>
  </view>
</template>
<!-- <script module="toods" 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 {
    components: {},
    data() {
      return {
        content: '',
        isPopup: false,
        assemblyHallList: [],
        type: '',
        typeName: '',
        userInfoData: uni.getStorageSync('userInfoData'),
        pageNo: 1,
        pageSize: 10,
        total: 0,
        it: ''
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      this.assemblyHallListApi();
      this.setData({
        userInfoData: uni.getStorageSync('userInfoData')
      });
    },
    onReachBottom() {
      if (this.assemblyHallList.length === this.total) {
        return;
      }
      this.assemblyHallListApi(false);
    },
    methods: {
      /**
       * 接口
       */
      async assemblyHallListApi(reset = true) {
        const params = this.generalQueryData(reset);
        const res = await peopleApi.assemblyHallPageApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            const _goodsList = list;
          } else {
            const _goodsList = this.assemblyHallList.concat(list);
          }
          this.pageNum = params.pageNum || 1;
          this.total = total;
          this.setData({
            assemblyHallList: _goodsList
          });
        }
      },

      // 申请加入议事
      async applyToJoin(event) {
        const that = this;
        const {
          item
        } = event.currentTarget.dataset;
        const res = await peopleApi.assemblyIdApi({
          hallId: item.id,
          joinStatus: 2,
          userId: uni.getStorageSync('userInfoData').userId
        });
        this.assemblyHallListApi();
        this.setData({
          isPopup: true,
          type: res.msg == '' ? 'success' : 'error',
          typeName: res.msg
        });
        // 清除定时器
        const time = setTimeout(function() {
          that.setData({
            isPopup: false
          });
          clearTimeout(time);
        }, 3000);
      },

      // 申请
      applyError(event) {
        const {
          userInfoData
        } = this;
        if (userInfoData.realNameAuthFlag == 0) {
          this.setData({
            isPopup: true,
            type: 'error',
            typeName: '请先实名认证'
          });
          return;
        }
        const that = this;
        const {
          name
        } = event.currentTarget.dataset;
        this.setData({
          isPopup: true,
          type: 'error',
          typeName: name
        });
        this.assemblyHallListApi();
        // 清除定时器
        const time = setTimeout(function() {
          that.setData({
            isPopup: false
          });
          clearTimeout(time);
        }, 3000);
      },

      // 监听搜索栏事件
      onChange(e) {
        this.setData({
          content: e.detail
        });
      },

      // 搜索
      onSearch() {
        this.assemblyHallListApi();
      },

      // 调解详情页
      applySuccess(event) {
        const {
          item
        } = event.currentTarget.dataset;
        if (item.status !== 1 && item.joinStatus === 3) {
          // 只有议事开始并且申请加入成功后才能进入详情
          uni.navigateTo({
            url: `../assembly-detail/assembly-detail?id=${item.id}`
          });
        }
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
          data: {
            content
          }
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 10
        };
        if (content) {
          params.title = content;
        }
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      }
    }
  };
</script>
<style lang="less">
  page {
    --popup-background-color: transparent; // 重置弹窗背景色
    --search-padding: 24rpx 32rpx 40rpx; // 搜索框内边距
  }

  .bg-status3 {
    background: linear-gradient(180deg, #e3f4e7 0%, #ffffff 100%, #ffffff 100%);
  }

  .bg-status2 {
    background: linear-gradient(180deg, #f6f3ff 0%, #ffffff 100%);
  }

  .bg-status1 {
    background: linear-gradient(180deg, #f5f4f3 0%, #ffffff 100%, #ffffff 100%);
  }

  .hint-grey {
    background: linear-gradient(270deg, #b7b7b7 0%, #bebebe 100%);
  }

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

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

  .masses {
    width: 100%;
    // height: 100%;

    .thenMesses {
      padding: 0 15rpx;

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

  .messes-bg {
    padding: 26rpx 0 26rpx 25rpx;
    position: relative;
    border-radius: 16rpx 16rpx 0 0;

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

    .thenMesses-image {
      .image-head {
        position: relative;
        width: 80rpx;

        .head-img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }

      .thenMesses-image-flex {
        flex: 1;
        margin-left: 30rpx;

        .thenMesses-title {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          line-height: 32rpx;
          padding-right: 80rpx;
          padding-top: 4rpx;
        }

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

  .messes-content {
    padding: 15rpx 25rpx 24rpx;

    .messes-title {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      margin-bottom: 24rpx;
    }

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

    .messes-block {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      margin: 24rpx 0 18rpx;
    }

    .messes-bth {
      width: 100%;
      height: 54rpx;
      background: #e6e1ff;
      border-radius: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #9d6df3;
      line-height: 54rpx;
      letter-spacing: 1px;
      text-align: center;
    }

    .messes-bth-fail {
      background: #ffe5e8;
      color: #f3786d;
    }

    .messes-bth-success {
      background: #f4fbf5;
      color: #1aa53b;
    }
  }

  .details {
    margin-top: 32rpx;

    .right-one {
      margin-right: 52rpx;
    }

    .icon {
      width: 40rpx;
      height: 40rpx;
    }

    .icon-text {
      font-size: 32rpx;
      line-height: 32rpx;
      font-weight: 500;
      color: #666666;
      margin-left: 20rpx;
    }
  }

  .state {
    // width: 400rpx;
    // height: 260rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 51rpx 40rpx 65rpx;

    .state-text {
      width: 320rpx;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 36rpx;
      text-align: center;
    }

    .state-text-yes {
      color: #5ca506;
      margin-top: 36rpx;
    }

    .state-text-no {
      color: #ff8c8f;
      margin-top: 28rpx;
      line-height: 52rpx;

      .defalue {
        color: #666666;
        font-size: 28rpx;
      }
    }
  }
</style>