<template>
  <view>
    <button @click="open">打开弹窗</button>
    <uni-popup ref="popup" type="bottom">
      <view class="uni-list">
        <scroll-view scroll-y="true">
          <checkbox-group @change="checkboxChange" class="checkbox-group">
            <label class="uni-list-cell" v-for="item in items" :key="item.value">
              <view class="item">
                <checkbox :value="item.value" :checked="item.checked" />
              </view>
              <view>{{item.name}}</view>
            </label>
          </checkbox-group>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data () {
    return {
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				],

    }
  },
  methods: {
    checkboxChange(e){
      console.log(e);
      var items = this.items,
        values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if(values.includes(item.value)){
          this.$set(item,'checked',true)
        }else{
          this.$set(item,'checked',false)
        }
      }
    },
    open(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('top')

      this.sendRequest({
        url: 'xmgl/systemUser/getProjectChilderSystemUserList',
        method: "post",
        data: { },
        success: res => {
          console.log(res, '操');
          if (res.code == 200) {
            console.log('res', res)
            
            if (this.pageNo == 1) {
              this.listData = []
            }
            // console.log('--------')
            // this.listData = res.result.records
            this.listData = [...this.listData, ...res.result.records]
            uni.hideLoading() //关闭加载中
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	.uni-popup{
		position: absolute;
		top: 0;
		width: 100%;
		height: 667px;
	}
	.uni-list{
		position: absolute;
    bottom: -667px;
		padding-top: 20px;
		width: 100%;
		height: 300px;
		background-color: #fff;
		.checkbox-group{
			height: 300px;
			// overflow: auto;
		}
	}
	.uni-list-cell {
		margin-bottom: 10px;
		padding-left: 20px;
		display: flex;
		align-items: center;
	}
</style>