<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="我的诉求" left-arrow border />

    <scroll-view :scroll-y="true" :style="'height:' + (windowHeight + 'px')" @scrolltolower="headleTopLower">
      <view class="myAppeal">
        <!-- 内容部分 -->
        <view v-if="List.length !== 0" class="myAppeal-conent" @tap="details" :data-item="item"
          v-for="(item, index) in List" :key="index">
          <view class="godd-replay-head">
            <image src="/static/packages/enterprise/image/my-appeal.png" mode="aspectFill" />
            <text class="myAppeal-head-title">{{ item.enterpriseName }}</text>
          </view>

          <view class="myAppeal-flex">
            <block v-for="(type, index1) in typeList" :key="index1">
              <view v-if="item.appealType + '' === type.value" class="myAppeal-type"
                :style="'background-color: ' + type.cssClass + ';'">{{ type.label }}</view>
            </block>
            <view>
              <text class="myAppeal-conent-block">{{ getDateTime(item.createTime, 2) }}</text>
              <block v-for="(state, index1) in statusList" :key="index1">
                <text v-if="item.appealProcessStatus + '' === state.value"
                  class="myAppeal-conent-bg myAppeal-conent-block" :style="'background-color: ' + state.cssClass + ';'">
                  {{ state.label }}
                </text>
              </block>
            </view>
          </view>

          <view class="myAppeal-title mt-21 uniline">{{ item.appealTitle }}</view>

          <view class="myAppeal-subheading multi-line">
            <rich-text :nodes="item.appealContent"></rich-text>
          </view>

          <view class="myAppeal-imgage" v-if="item.appealEnclosure">
            <image v-if="key < 3" :src="url" v-for="(url, key) in item.appealEnclosure" :key="key"></image>
          </view>

          <view class="myAppeal-conent-block mt-21 uniline" v-if="item.appealCurrentLocation !== null">
            <rich-text :nodes="item.appealCurrentLocation" />
          </view>

          <view class="border"></view>

          <view class="myAppeal-bg" v-if="item.perfectReplyFlag === 1">
            <view>
              <view>
                <image src="/static/images/ic-success.png" mode="aspectFill"></image>
                <text>{{ item.nickName }}</text>
              </view>
              <view class="myAppeal-conent-block">{{ getDateTime(item.replyTime, 2) }}</view>
            </view>
            <view class="myAppeal-bg-conent">
              <rich-text :nodes="item.appealReply"></rich-text>
            </view>
          </view>
        </view>
        <van-empty v-if="List.length === 0" description="暂时没有我的诉求" />
      </view>
    </scroll-view>
  </view>
</template>
<script>
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  import utils from '@/utils/util.map';
  export default {
    data() {
      return {
        windowHeight: null,
        option: {},

        type: {
          value: '',
          cssClass: '',
          label: ''
        },

        status: 'appeal_process_status',
        typeList: [],
        statusList: [],
        List: [],

        params: {
          userId: uni.getStorageSync('userInfoData').userId,
          pageNo: 1,
          pageSize: 15
        },

        state: {
          value: '',
          cssClass: '',
          label: ''
        },

        url: ''
      };
    },
    async onLoad(option) {
      const res = uni.getSystemInfoSync();
      this.windowHeight = res.windowHeight
      this.option = option
      await this.getAppealList();
      await this.getTypeList();
      await this.getStateList();
    },
    methods: {
      getDateTime(time){
        return utils.getDateTime(time)
      },
      // 详情页跳转
      details(event) {
        const {
          item
        } = event.currentTarget.dataset;
        uni.navigateTo({
          url: `/packages/enterprise/pages/details/details?id=${item.id}`
        });
      },

      // 获取我的企业列表
      async getAppealList() {
        const res = await enterprise.getAppealListApi(this.params);
        if (res.data && res.data.list.length === 0) {
          uni.showToast({
            title: '已经加载底部了',
            icon: 'none'
          });
          return;
        }
        if (res.data) {
          this.List = this.List.concat(res.data.list)
        }
      },

      // 获取类型字典
      async getTypeList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.type
        });
        if (res.data) {
          this.typeList = res.data.list
        }
      },

      // 获取状态字典
      async getStateList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.status
        });
        if (res.data) {
          this.statusList = res.data.list
        }
      },

      // 分页加载
      headleTopLower() {
        const {
          userId,
          pageNo,
          pageSize
        } = this.params;
        this.params = {
          userId: userId,
          pageNo: pageNo + 1,
          pageSize: pageSize
        }
        this.getAppealList();
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
  }

  .mt-20 {
    margin-top: 40rpx;
  }

  .mt-21 {
    margin-top: 21rpx;
  }

  .myAppeal {
    padding: 37rpx 40rpx 40rpx 40rpx;
  }

  .myAppeal>.myAppeal-title {
    position: relative;
    width: 175rpx;
    height: 10rpx;
    background: #ffe5e9;
    border-radius: 2rpx;
    line-height: 0;
    margin-top: 10px;

    text {
      position: absolute;
      top: -5px;
      text-align: center;
      width: 100%;
      font-size: 36rpx;

      font-weight: 500;
      color: #000000;
    }
  }

  .myAppeal-conent {
    height: 100%;

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

    .godd-replay-head {
      display: flex;

      .myAppeal-head-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #fe3b53;
      }

      image {
        width: 44rpx;
        height: 44rpx;
        margin-right: 24rpx;
      }
    }

    .myAppeal-flex {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .myAppeal-type {
        width: 88rpx;
        height: 38rpx;
        line-height: 38rpx;
        text-align: center;
        color: #fff;
        box-shadow: 2px 2px 2px 0px rgba(12, 181, 207, 0.1);
        border-radius: 8rpx;
      }

      .myAppeal-conent-title {
        font-size: 32rpx;

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

      .myAppeal-conent-bg {
        padding: 5rpx 20rpx;
        height: 38rpx;
        text-align: center;
        color: #fff;
        line-height: 38rpx;
        box-shadow: 2px 2px 2px 0px rgba(254, 61, 85, 0.1);
        border-radius: 500rpx;
        margin-left: 39rpx;
      }
    }
  }

  .border {
    padding: 16rpx 0 18rpx 0;
    border-bottom: 1px solid #efefef;
  }

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

  .myAppeal-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }

  .myAppeal-subheading {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    margin-top: 24rpx;
  }

  .myAppeal-imgage {
    margin-top: 24rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    image {
      width: 222rpx;
      height: 222rpx;
      border-radius: 10rpx;
      margin-right: 10rpx;
    }
  }

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

    view {
      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-bg-conent {
      padding: 16rpx 0 0 40rpx;
      font-size: 28rpx;

      font-weight: 400;
      color: #333333;
    }
  }
</style>