<template>
  <view>
    <custom-nav-bar left-text="党员优质回复" left-arrow />

    <view class="second-header flex flex-v-center flex-evenly">
      <image class="header-bg" src="/static/packages/my/image/masses.png"></image>
      <view class="nav-item flex flex-center flex-col" v-for="(item, index) in partyMember" :key="index">
        <image class="nav-item-ic-img" :src="item.icon"></image>

        <text class="nav-item-name">{{ item.name }}</text>

        <text class="nav-item-name">{{ item.count }}</text>
      </view>
    </view>

    <view class="masses">
      <view v-if="seekHelpPageList.length > 0">
        <view class="thenMesses" @click="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">
              <block v-for="(t, index1) in seekHelptype"
              :key="index1">
              <text v-if="item.type + '' === t.value" >{{ t.label }}</text>
              </block>
            </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" v-if="item.images">
            <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 class="myAppeal">
            <view class="myAppeal-bg" v-if="item.reply">
              <view class="myAppeal-line1">
                <view class="flex flex-v-center flex-between">
                  <image src="/static/images/ic-success.png" mode="aspectFill"></image>
                  <text>{{ item.reply.replyUserName }}</text>
                </view>
                <view class="myAppeal-conent-block">{{ getDateTime(item.reply.createTime, 0) }}</view>
              </view>
              <view class="myAppeal-bg-conent flex flex-col">
                <rich-text :nodes="item.reply.replyContent"></rich-text>
                <view class="inquiry-image" v-if="item.reply.replyImages">
                  <image class="image" :src="item" v-for="(item, index1) in item.reply.replyImages" :key="index1">
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <van-empty v-else description="暂无数据" />
    </view>

    <view @click="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 module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>

  import * as publicApi from '@/api/publicApi';
  import * as myApi from '@/api/myApi';
  import utils from '@/utils/util.map'
  const partyMember = [{
      icon: '/static/packages/my/image/order.png',
      name: '已接单',
      count: '0'
    },
    {
      icon: '/static/packages/my/image/accomplish.png',
      name: '已完成',
      count: '0'
    },
    {
      icon: '/static/packages/my/image/reply.png',
      name: '优质回复',
      count: '0'
    }
  ];
  export default {
    data() {
      return {
        pageNo: 1,
        partyMember,
        seekHelptype: [],
        seekHelpPageList: [],
        total: 0,
        count: '',

        t: {
          value: '',
          label: ''
        },

        it: ''
      };
    },
    onShow() {
      this.pageNo = 1
      this.seekHelpPageList = []
      this.getMyMasserCountApi();
      this.seekHelpPageApi();
      this.getTypeApi();
    },
    onReachBottom() {
      if (this.seekHelpPageList.length === this.total) {
        return;
      }
      this.pageNo = this.pageNo + 1
      this.seekHelpPageApi();
    },
    methods: {
      getDateTime(tiem){
        return utils.getDateTime(tiem)
      },
      async seekHelpPageApi() {
        let params = {
          pageNo: this.pageNo,
          pageSize: 10,
          // helpUserId: wx.getStorageSync('userInfoData').userId,
          goodFlag: 1
        };
        const res = await myApi.replyGoodPageApi(params);
        if (res.data) {
          let _goodsList = [...this.seekHelpPageList, ...res.data.list];
          this.total = res.data.total;
          this.seekHelpPageList = _goodsList
        }
      },

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

      // 统计党员
      async getMyMasserCountApi() {
        const res = await myApi.myMasserCountApi();
        if (res.data) {
          this['partyMember[0].count'] = res.data.acceptCount
          this['partyMember[1].count'] = res.data.finishCount
          // ['partyMember[2].count']: res.data.scoreCount,
          this['partyMember[2].count'] = res.data.goodReplyCount
        }
      },

      jumpRelease() {
        uni.navigateTo({
          url: '/packages/people/pages/masses-create/masses-create'
        });
      },

      jumpDetail(event) {
        const {
          id
        } = event.currentTarget.dataset;
        uni.navigateTo({
          url: './my-masses-details?id=' + 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%;
  }

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

    .myAppeal {
      padding: 0 25rpx;
    }

    .myAppeal-bg {
      background: #f7f7f7;
      border-radius: 8px;
      // margin-top: 32rpx;
      padding: 28rpx 20rpx;

      .myAppeal-line1 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }

        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #fe3b53;
        }
      }

      .myAppeal-conent-block {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }

      .myAppeal-bg-conent {
        padding: 16rpx 0 0 40rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }

      .inquiry-image {
        margin-top: 40rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 16rpx;
        gap: 16rpx;

        .image {
          width: 174rpx;
          height: 160rpx;
          border-radius: 8rpx;
        }
      }
    }
  }

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

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

  // 党员接单
  .second-header {
    position: relative;
    z-index: 1;
    height: 400rpx;
    padding-top: 128rpx;

    .header-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .nav-item {
      position: relative;

      .nav-item-ic-img {
        width: 72rpx;
        height: 72rpx;
      }

      .nav-item-name {
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 36rpx;
        margin-top: 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;
    }
  }
</style>