<template>
  <view style="height: 100%">
    <custom-nav-bar left-text="星级党支部" left-arrow />
    <view class="banner">
      <image data-name="just" :src="recursionObj.icon"></image>
    </view>
    <view class="second-search">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" type="text" confirm-type="search"
          placeholder-class="placeholder-style" :placeholder="recursionObj.remark" @input="onSearch"
          @confirm="onChange" />
        <view class="search-icon flex flex-center">
          <image class="search-icon-img" src="/static/images/search.png"></image>
        </view>
      </view>
    </view>
    <view class="page-content">
      <view v-if="branchList.length > 0">
        <view class="cell" :data-item="item" @tap="headleDetails" v-for="(item, index) in branchList" :key="index">
          <view class="cell-left">
            <view class="icon">
              <image data-name="just"
                src="https://zongzhi.xuqidata.com:5009/xq-ssg/d3b90ac36c5196dc263b97e08aaa53d0f75aa35b8caf4abc5e86a204e546bd7f.png">
              </image>
            </view>
            <view class="title">
              {{ item.name }}
            </view>
          </view>

          <view class="cell-right">
            <view class="cell-right-number"></view>
            <view class="arrow">
              <van-icon name="arrow" size="18px" />
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <van-empty description="暂无数据" />
      </view>
    </view>
  </view>
</template>

<script>
  //index.js
  // const app = getApp();
  // const { peopleApi, publicApi } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  export default {
    components: {},
    data() {
      return {
        branchList: [],
        searchValue: '',
        option: {},
        pageNo: 1,
        pageSize: 10,
        total: 0,

        recursionObj: {
          icon: '',
          remark: ''
        }
      };
    },
    onLoad(option) {
      this.setData({
        option
      });
      this.recursionApi();
      this.partyBranchApi();
    },
    onReachBottom() {
      if (this.branchList.length === this.total) {
        return;
      }
      this.partyBranchApi(false);
    },
    methods: {
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 1,
          parentId: this.option.parentId
        });
        if (res.data) {
          this.setData({
            recursionObj: res.data[0]
          });
        }
      },

      async partyBranchApi(reset = true) {
        const params = this.generalQueryData(reset);
        const res = await peopleApi.partyBranchApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            const _goodsList = list;
          } else {
            const _goodsList = this.branchList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.setData({
            branchList: _goodsList
          });
        }
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
          data: {
            searchValue
          }
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 10
        };
        if (searchValue) {
          params.name = searchValue;
        }
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      onChange(e) {
        this.setData({
          searchValue: e.detail.value
        });
        this.partyBranchApi();
      },

      onSearch(e) {
        if (e.detail.value !== '') {
          return;
        }
        this.setData({
          searchValue: e.detail.value
        });
        this.partyBranchApi();
      },

      headleDetails(event) {
        const {
          id
        } = event.currentTarget.dataset.item;
        uni.navigateTo({
          url: `/packages/public/pages/details/details?name=星级党支部详情&&referId=${id}`
        });
      }
    }
  };
</script>
<style lang="less">
  /* pages/people/people.wxss */
  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  }

  .banner {
    width: 100%;
    height: 330rpx;
    position: relative;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .second-search {
    padding: 40rpx 30rpx 50rpx;

    .search-input {
      height: 64rpx;
      line-height: 64rpx;
      background: #f9f9f9;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      text-align: center;
      position: relative;
      box-sizing: content-box;

      .input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        text-decoration: 20rpx;
        padding: 0 64rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

      .placeholder-style {
        text-align: center;
        color: #c1c1c1;
      }
    }

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      position: absolute;
      right: -1px;
      top: 0;
      z-index: 1;

      .search-icon-img {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .life-tabs {
      margin-top: 40rpx;

      .van-tabs__wrap {
        border-bottom: 1px solid #c1c1c1;
      }

      .life-tabs-flex {
        margin-top: 50rpx;

        .life-tabs-icon {
          width: 70rpx;
          height: 70rpx;
          background: linear-gradient(180deg, #ff5f7a 0%, #fe3b53 100%);
          box-shadow: 0px 6px 4px 0px rgba(254, 80, 107, 0.1);
          border-radius: 500rpx;

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

        .life-iocn-title {
          margin-left: 32rpx;
          font-size: 34rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
  }

  .page-content {
    // margin-top: 120rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .cell {
      width: 100%;
      height: 120rpx;
      background: #ffffff;
      border-bottom: 1rpx solid #efefef;
      display: flex;
      justify-content: space-between;

      .cell-left {
        height: 100%;
        display: flex;
        align-items: center;

        .icon {
          height: 70rpx;
          width: 70rpx;
          margin-right: 32rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }

        .title {
          font-size: 32rpx;
          font-weight: 400;
          color: #333333;
          line-height: 32rpx;
        }
      }

      .cell-right {
        height: 100%;
        width: 40rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .cell-right-number {
          font-size: 32rpx;

          font-weight: 400;
          color: #666666;
          margin-right: 28rpx;
        }
      }
    }
  }
</style>