<template>
  <view class="hasfixedbottom">
	  
	   <view class="searchbar">
		<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
			v-model="queryParams.name" placeholder="搜索姓名" @blur="search()" @clear="search()">
		</uni-easyinput>
	   </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>
              <view class="name">{{n.name}} <text>{{n.perCode}}</text></view>
              <view class="date">{{ cardType[n.idcType]?.text }}：{{n.idcCode}}</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 'underscore'
import config from '/config.js'
const queryParams = ref({
	paymentRangeId:-1,
	multiDeptFlag: 1,
	perType: 1,
	pageNum:1,
	pageSize:10
})
const paging = ref(null)
const total = ref(0)
const status = ref('no-more')
const list = ref([])
const popup = ref(null)
const choseStudent = ref(null)
const studentList = ref([])
const type = ref('')
const form = ref({})
const contentText = ref({contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"})
const cardType = ref([{
                        text: '身份证',
                        value: '0'
                      },
                      {
                        text: '来往大陆(内地)通行证',
                        value: '1'
                      },
                      {
                        text: '中国护照',
                        value: '2'
                      },
                      {
                        text: '护照',
                        value: '3'
                      },
                      {
                        text: '其它',
                        value: '4'
                      },
                      {
                        text: '香港身份证',
                        value: '5'
                      },
                      {
                        text: '往来港澳台通行证',
                        value: '6'
                      }
])
onLoad((option) => {
  if (option.rangeId) {
    queryParams.value.paymentRangeId = option.rangeId
  } 
  getList()
})
onShow(() => {})
function clickLoadMore(){
	getList()
}
function search(){
	queryParams.value.pageNum = 1
	api.selectPageList(queryParams.value).then(res => {
	  studentList.value = res.rows
		total.value = res.total
		if(total.value>studentList.value.length){
			status.value = 'more'
		} else {
			status.value = 'no-more'
		}
	  uni.hideLoading()
	})
}
function getList() {
	if(total.value>0&&total.value>studentList.value.length){
		uni.showLoading({
		    title: '加载中',
		    icon: 'none'
		  })
		  status.value = 'loading'
		  queryParams.value.pageNum += 1
		  api.selectPageList(queryParams.value).then(res => {
		    studentList.value = _.concat(studentList.value,res.rows)
			total.value = res.total
			if(total.value>studentList.value.length){
				status.value = 'more'
			} else {
				status.value = 'no-more'
			}
		    uni.hideLoading()
		  })
		
	}else if(total.value==0){
		search()
	}
}

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.perId)
    }
  }
  api.addInfoModeToRange({
    perIds: arr,
    rangeIdStr: queryParams.value.paymentRangeId || '-1'
  }).then(res => {
	var pages = getCurrentPages()
	var prevPage = pages[pages.length - 2]
	prevPage.onShow(res.data)
    uni.navigateBack()
  })
}

	
</script>
<style scoped lang="scss">
	.flexbox {
		padding: 30rpx 30rpx 0
	}

	.danger-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
.userlist{
		padding: 0 25rpx;
}
	.searchbar {
		display: flex;
		align-items: center;
		padding: 25rpx;
		box-sizing: border-box;

		.invertedbtn-red {
			margin-left: 15rpx;
			font-size: 30rpx;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			background-color: #fff;
		}

		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			border: none;
			height: 70rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 26rpx;
		}
	}

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

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