<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="option.name" left-arrow />

    <!-- 介小键和介小康 -->
    <view class="second-community" v-if="option.key === '介小键'">
      <view class="second-community-flex uniline">
        <view class="uniline" :data-name="item.name"
          :style="'background-color: ' + (index % 2 != 0 ? 'rgba(0, 123, 215, 0.2)' : 'rgba(9, 178, 123, 0.2)') + ';'"
          data-key="peple" @tap="headleDetails" :data-item="item" v-for="(item, index) in newsPageList" :key="index">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="second-community" v-if="option.key === '介小康'">
      <view class="second-community-flex uniline">
        <view :data-name="item.name"
          :style="'background-color: ' + (index % 2 != 0 ? 'rgba(255,140,143,0.2)' : 'rgba(0, 123, 215, 0.2)') + ';'"
          data-key="peple" @tap="headleDetails" :data-item="item" class="uniline" v-for="(item, index) in newsPageList"
          :key="index">
          {{ item.name }}
        </view>
      </view>
    </view>

    <!-- 所在村 -->
    <view v-if="option.key === 'peple'">
      <view class="second-community-table"
        :style="'background-color: ' + (option.keyname === '介小键' ? 'rgba(0, 123, 215, 0.2)' : 'rgba(255,140,143,0.2)')">
        <view>姓名</view>
        <view>所属网格</view>
        <view>联系电话</view>
      </view>

      <view :data-item="item" :style="
                    'background-color: ' +
                    (option.keyname === '介小键' ? (index % 2 != 0 ? 'rgba(0, 123, 215, 0.2)' : '#fff') : index % 2 != 0 ? 'rgba(255,140,143,0.2)' : '#fff') +
                    ';'
                " class="second-community-table uniline" v-for="(item, index) in newsPageList" :key="index">
        <view>{{ item.name }}</view>

        <view class="uniline">{{ item.orgName }}</view>

        <view>{{ item.mobile }}</view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // 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 {
    data() {
      return {
        option: {
          name: '',
          key: '',
          keyname: ''
        },
        newsPageList: [],
        pageNo: 1,
        pageSize: 30,
        total: 0
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad(option) {
      this.option = option
      if (this.option.key === 'peple') {
        this.getPepleList();
      } else {
        this.getList();
      }
    },
    onReachBottom() {
      if (this.newsPageList.length === this.total) {
        return;
      }
      this.getPepleList(false);
    },
    methods: {
      //  网格人员
      async getPepleList(reset = true) {
        const params = this.generalQueryData(reset);
        let _goodsList = []
        params.orgId = this.option.id;
        params.gridId = this.option.gridId;
        const res = await peopleApi.getGridMemberListApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            _goodsList = list;
          } else {
            _goodsList = this.newsPageList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.newsPageList = _goodsList
        }
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        console.log(321321312);
        const {
          pageNo,
          pageSize
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 50
        };
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      // 网格
      async getList(reset = true) {
        const params = this.generalQueryData(reset);
        let _goodsList = []
        params.parentId = this.option.orgId;
        const res = await peopleApi.deptListApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            _goodsList = list;
          } else {
            _goodsList = this.newsPageList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.newsPageList = _goodsList
        }
        if (res.data) {
          this.newsPageList =res.data
        }
      },

      // 跳转网格人员
      headleDetails(event) {
        const {
          name,
          key,
          item
        } = event.currentTarget.dataset;
        console.log('居委会', item);
        const {
          gridId
        } = this.option;
        console.log(item.id);
        uni.navigateTo({
          url: `/packages/people/pages/second/second-community?name=${name}&key=${key}&id=${item.id}&keyname=${this.option.key}&gridId=${gridId}`
        });
      }
    }
  };
</script>
<style lang="less">
  .second-community {
    padding: 30rpx 40rpx 0 40rpx;

    .second-community-flex {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      view {
        width: 48%;
        padding: 25rpx 16rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 16rpx;

        &:nth-child(odd) {
          // margin-right: 16rpx;
          // background: rgba(0, 123, 215, 0.2);
        }

        &:nth-child(even) {
          margin-right: 16rpx;
          // background: rgba(9, 178, 123, 0.2);
        }
      }
    }
  }

  .second-community-table {
    display: flex;
    text-align: left;
    align-content: center;
    padding: 27rpx 30rpx;
    background: #fff;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;

    view {
      &:nth-child(1) {
        width: 25%;
      }

      &:nth-child(2) {
        width: 50%;
      }

      &:nth-child(3) {
        width: 25%;
        text-align: right;
      }
    }
  }
</style>