<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="申请党员帮办" left-arrow />

    <van-search :value="value" shape="round" placeholder="请输入您想查询的内容" use-action-slot @change="onChange"
      @search="onSearch">
      <view slot="action" @tap="onClick">搜索</view>
    </van-search>

    <view class="masses">
      <view v-if="seekHelpPageList.length > 0">
        <view class="thenMesses" @tap="jumpDetail" :data-id="item.id" :data-item="item"
          v-for="(item, index) in seekHelpPageList" :key="index">
          <view class="thenMesses-bg bg-orange">
            <view class="hide thenMesses-title" style="padding-right: 100rpx">{{ item.title }}</view>
            <view class="absolute orange">
              <!-- <text wx:for="{{seekHelptype}}" wx:key="id" wx:for-item="t" wx:if="{{item.type+'' === t.value}}">{{t.label}}</text> -->
              <text>{{ item.type === 1 ? '帮助' : '求助' }}</text>
            </view>
            <view :class="
                                'thenMesses-hint ' +
                                (item.status === 1
                                    ? 'hint-orange'
                                    : item.status === 2
                                    ? 'hint-orange'
                                    : item.status === 3
                                    ? 'hint-green'
                                    : item.status === 4
                                    ? 'hint-purple'
                                    : item.status === 5
                                    ? 'hint-green'
                                    : 'hint-orange')
                            ">
              {{
                                item.status === 1
                                    ? '待认领'
                                    : item.status === 2
                                    ? '待接单'
                                    : item.status === 3
                                    ? '待评价'
                                    : item.status === 4
                                    ? '已完结'
                                    : item.status === 5
                                    ? '已接单'
                                    : '暂无'
                            }}
            </view>
          </view>

          <view class="thenMesses-content thenMesses-title">
            <rich-text class="rich-text" :nodes="item.content"></rich-text>
          </view>

          <view class="thenMesses-content-image">
            <image :src="it" v-for="(it, index1) in item.images" :key="index1"></image>
          </view>

          <view class="thenMesses-block pd-24">
            <van-icon name="location" color="#999999" />
            {{ item.address }}
          </view>
        </view>
      </view>
      <view v-else>
        <van-empty description="暂无数据" />
      </view>
    </view>
    <view @tap="jumpRelease" class="publish flex flex-center flex-col">
      <image class="icon-people" src="/static/images/icon-people.png"></image>
      <text class="icon-text">发布</text>
    </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';
  const partyMember = [{
      icon: '/packages/people/images/order.png',
      name: '已接单',
      num: '321'
    },
    {
      icon: '/packages/people/images/accomplish.png',
      name: '已完成',
      num: '321'
    },
    {
      icon: '/packages/people/images/integral.png',
      name: '已完成',
      num: '321'
    }
  ];
  export default {
    components: {
    },
    data() {
      return {
        options: {},
        value: '',
        pageNo: 1,
        userInfoCount: null,
        seekHelpPageList: [],
        seekHelptype: [],
        partyMember: partyMember,
        it: ''
      };
    },
    onLoad(options) {
      this.options = options
    },
    onShow() {
      this.pageNo = 1,
        this.seekHelpPageList = [],
        this.userInfoCount = uni.getStorageSync('userInfoCount')
      this.seekHelpPageApi();
      this.getTypeApi();
    },
    onReachBottom() {
      let pageNo = this.pageNo;
      this.pageNo = this.pageNo + 1
      this.seekHelpPageApi();
    },
    methods: {
      async seekHelpPageApi(val) {
        let params = {
          pageNo: this.pageNo,
          pageSize: 10
        };
        if (val) {
          params.content = val;
        }
        if (this.options.userId) {
          params.userId = this.options.userId;
        }
        const res = await peopleApi.seekHelpPageApi(params);
        if (res.data) {
          res.data.list.forEach((e) => {
            // e.createTime = app.globalData.util.timeFormat(e.createTime);
          });
          let resultList = [...this.seekHelpPageList, ...res.data.list];
          this.seekHelpPageList = resultList
        }
      },

      //  获取群众点单字典
      async getTypeApi() {
        const res = await publicApi.getDictDataApi({
          dictType: 'people_seek_help_type'
        });
        if (res.data) {
          this.seekHelptype = res.data.list
        }
      },

      onChange(e) {
        this.value = e.detail
      },

      onSearch(e) {
        this.pageNo = 1
        this.seekHelpPageList = []
        this.seekHelpPageApi(e.detail);
      },

      onClick() {
        this.pageNo = 1
        this.seekHelpPageList = []
        this.seekHelpPageApi(this.value);
      },

      jumpRelease() {
        // 暂时去除
        // if (this.data.userInfoCount.realNameAuthFlag === 0) {
        //   wx.navigateTo({
        //     url: '/packages/enterprise/pages/enterprise-certification/enterprise-certification',
        //   })
        // } else {
        uni.navigateTo({
          url: '../masses-create/masses-create'
        });
        // }
      },

      jumpDetail(val) {
        // let item = e.currentTarget.dataset.item
        uni.navigateTo({
          url: '../masses-detail/masses-detail?id=' + val.currentTarget.dataset.id
        });
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
  }

  .m-2 {
    margin: 0 0 20rpx 50rpx;
  }

  .resident-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 15rpx;
  }

  .resident-tabs>view {
    width: 47.5%;
    height: auto;
    padding: 11rpx 0rpx 11rpx 11rpx;
    border-radius: 16rpx;
  }

  .pd-24 {
    padding: 24rpx 24rpx;
  }

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

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

  .hint-orange {
    background: #f38a36;
  }

  .hint-green {
    background: linear-gradient(270deg, #1aa53c 0%, #1aa53b 100%);
  }

  .hint-purple {
    background: linear-gradient(180deg, #102ebd 0%, #571fc8 100%);
  }

  .thenMesses-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 文字省略点 */
  .hide {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .hide3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

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

  .thenMesses {
    padding: 20rpx 15rpx 20rpx 15rpx;

    .thenMesses-bg {
      padding: 26rpx 0 26rpx 25rpx;
      position: relative;
    }

    .thenMesses-content {
      padding: 20rpx 25rpx;
    }

    .thenMesses-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .thenMesses-content-image {
      display: flex;
      flex-wrap: wrap;
      padding: 0rpx 24rpx;
      margin-top: 24rpx;
    }

    .thenMesses-block {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
    }
  }

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

  .absolute {
    margin-top: 24rpx;
    width: 109rpx;
    height: 32rpx;
    font-size: 20rpx;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    border-radius: 8rpx;
    line-height: 32rpx;
  }

  .orange {
    background-color: orange;
  }

  .violet {
    background-color: #6e63f9;
  }

  .thenMesses-image>view>image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 500rpx;
    border: 3rpx solid #c9c6f7;
  }

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

  .thenMesses-content-red {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #e50113;
  }

  .thenMesses-content-image>image {
    width: 31%;
    height: 200rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
    border-radius: 16rpx;
  }

  /* 发布按钮 */
  .publish {
    background-color: #ce4745;
    position: fixed;
    bottom: 16rpx;
    right: 28rpx;
    width: 182rpx;
    height: 182rpx;
    border-radius: 50%;

    .icon-people {
      width: 64rpx;
      height: 64rpx;
    }

    .icon-text {
      margin-top: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 32rpx;
    }
  }

  .resident-none {
    width: 100%;
    padding-top: 400rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .resident-none>.resident-none-icon {
    width: 548rpx;
    height: 300rpx;
  }

  .resident-none>view {
    width: 100%;
    display: block;
    font-size: 28rpx;

    font-weight: 400;
    color: #bfbfbf;
  }

  .loading-title {
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }
</style>