<template>
  <view class="hasfixedbottom">

        <view class="searchbar">
          <uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
                         v-model="query.name" placeholder="搜索团体会员名称" @blur="getSonList" @clear="getSonList">
          </uni-easyinput>
          <view class="invertedbtn-red" @click="getSonList">搜索</view>
        </view>
        <view class="userlist">
          <view class="item" v-for=" (n,index) in studentList" :key="index">
            <view @click="checkThis(n)">
              <image class="icon" v-if="n.checked"
                     :src="config.baseUrl_api+'/fs/static/member/dx_dwn.png'" />
              <image class="icon" v-else :src="config.baseUrl_api+'/fs/static/member/dx.png'" />
            </view>
            <view class="w100">
              <view class="name">{{n.name}} </view>
              <view class="flexbox" style="padding: 0">
                <view v-if="n.memCode">会员号
                  <text>{{n.memCode}}</text>
                </view>
                <view class="date" v-if="n.validityDate">到期时间 
                  <text>{{n.validityDate?.slice(0,10)}}</text>
                </view>
                <view class="date">团体类型
                  <text v-if="n.deptType == 2">一级协会</text>
                  <text v-if="n.deptType == 3">直属协会</text>
                  <text v-if="n.deptType == 4">二级协会</text>
                  <text v-if="n.deptType == 5">三级协会</text>
                  <text v-if="n.deptType == 6">职业性团体会员</text>
                </view>
              </view>
            </view>
          </view>
          <view class="nodata" v-if="studentList.length==0">
            <image mode="aspectFit" src="/static/nodata.png"></image>
            <text>无可变更会员</text>
          </view>
        </view>
        <uni-load-more  @clickLoadMore="clickLoadMore" :contentText="contentText" :status="status"></uni-load-more>
		
		  <view class="fixedBottom" v-if="studentList.length!=0">
		<button class="btn-red" @click="handleImport">批量添加</button>
   </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app'
import * as api from '@/common/api.js'
import _ from 'lodash'
import config from '/config.js'
const query = ref({
	pageNum:1,
	pageSize:10,
	paymentRangeId:-1,
})
const total = ref(0)
const list = ref([])
const studentList = ref([])
const type = ref('')
const form = ref({})
const status = ref('no-more')
const contentText = ref({contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"})

onLoad((option) => {
  if (option.rangeId) {
    query.value.paymentRangeId = option.rangeId
  }
  getList()
})
onShow(() => {})

function clickLoadMore(){
	getList()
}
function getList() {
	if(total.value>0&&total.value>studentList.value.length){
		uni.showLoading({
		  title: '加载中',
		  icon: 'none'
		})
		 status.value = 'loading'
		  query.value.pageNum += 1
		api.getMySonList(query.value).then(res => {
		  studentList.value = _.concat(studentList.value,res.data.rows)
		  total.value = res.data.total
		  if(total.value>studentList.value.length){
		  	status.value = 'more'
		  } else {
		  	status.value = 'no-more'
		  }
		  uni.hideLoading()
		})
	}else if(total.value==0){
		getSonList()
	}
}
function getSonList(){
	query.value.pageNum = 1
  api.getMySonList(query.value).then(res => {
    studentList.value = res.data.rows
	total.value = res.data.total
	if(total.value>studentList.value.length){
		status.value = 'more'
	} else {
		status.value = 'no-more'
	}
  })
}

function checkThis(n) {
  if (n.checked) {
    n.checked = false
  } else {
    n.checked = true
  }
}

function handleImport() {
  var arr = []
  for (var n of studentList.value) {
    if (n.checked) {
      arr.push(n.memId)
    }
  }
  api.addGroupInfoModeToRange({
    memId: arr,
    rangeIdStr: query.value.paymentRangeId
  }).then(res => {
    var pages = getCurrentPages()
    var prevPage = pages[pages.length - 2]
    prevPage.onShow(res.data)
    uni.navigateBack()
  })
}

</script>
<style scoped lang="scss">
	.searchbar {
		display: flex;
		align-items: center;
		padding:25rpx;
		box-sizing: border-box;
	
		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			height: 66rpx;    border: 1px solid #AD181F!important;
		}
	
		:deep(.uni-easyinput__content-input) {
			font-size: 26rpx;
		}
	
		.invertedbtn-red {
			border-radius: 50px;    margin-left: 20rpx;
			background-color: #fff;
	
			font-size: 30rpx;
			padding: 10rpx 20rpx;
		}
	}
	.userlist {padding: 0 25rpx;}
	.flexbox {
		padding: 30rpx 30rpx 0
	}

	.danger-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.collapseBody {
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		view {
			margin: 0 0 20rpx;

			label {
				width: 7em;
				color: #999;
				display: inline-block;
				text-align: right;
			}
		}
	}

	.popBody {
		background: #fff;
		padding: 30rpx;
	}

	.text-center .btn-red-kx {
		border-radius: 50px;
		font-size: 28rpx;
	}
	:deep(.file-picker__progress){opacity: 0;}
</style>