<template>
  <vxe-modal v-model="value" id="addQuest" width="600" v-loading="load" @show="show" @hide="hide" height="300" show-footer :title="type == '1' ? '选择拣货员' : '选择播种员'">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange" size="medium" class="batchUser">
      <el-checkbox v-for="item in list" :label="item" :key="item">{{item}}</el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { listUser } from "@/api/system/user";
@Component({components:{}})
export default class AddQuestModel extends Vue {
  value = false;
  load = false;
  type:string = '1'
  checkAll= false
  checkedList:Array<any>= []
  list:Array<any>=[]
  isIndeterminate= false
  show(){
    
  }
  setType(v:string) {
    this.type = v;
  }
  hide(){
    this.checkedList = []
    this.checkAll = false;
    this.isIndeterminate = false
  }
  handleCheckAllChange(val) {
    this.checkedList = val ? this.list : [];
    this.isIndeterminate = false;
  }
  handleCheckedCitiesChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.list.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
  }
  loadList() {
    this.list = []
    listUser({
      pageNum: 1,
      pageSize: 10
    }).then((response:any) => {
      for(let item of response.rows) {
        this.list.push(item.userName)
      }
    }).catch(()=>{});
  }
  setShow(v:boolean){
    this.value = v;
    this.loadList()
  }
  btn(){
    this.$emit('handle',{
      type: this.type,
      data: this.checkedList
    });
    this.value = false;
    this.$message({
      message:'添加成功！',
      type:'success'
    })
    // (this.$refs.form as any).validate().then(()=>{
    //   let data = (this.$refs.form as any).getValue();
    //   this.load = true
    //   save(data).then(()=>{
    //     this.load = false;
    //     this.$emit('handleSuccess');
    //     this.value = false;
    //   }).catch(()=>{
    //     this.load = false;
    //   })
    // })
  }
}
</script>

<style lang="scss">
.batchUser{
  .el-checkbox{
    padding-bottom: 16px;
  }
}
</style>