<template>
  <div>
    <template>
      <el-checkbox-group
        style="margin-top: 46px"
        v-model="checkedUser"
        @change="handleCheckedUserChange"
        v-if="deptUsers.length != 0"
      >
        <el-checkbox
          size="medium"
          style="display: block; padding: 1.2em 1.8em; margin: 0"
          v-for="(item, index) in deptUsers"
          :ref="item.userId"
          :checked="item.isChecked"
          :label="item.userId"
          :key="index"
        >
          <svgIcon
            icon-style="icon header-icon"
            icon-class="lianxiren2"
            style="margin-right: 2vw"
          />
          {{ item.fullname }}
        </el-checkbox>
      </el-checkbox-group>
      <van-empty v-else description="暂无数据" />
    </template>

    <div
      class="okBtn"
      style="
        margin: 0;
        position: fixed;
        bottom: 0;
        width:100%;
        box-sizing: border-box;
      "
    >
      <el-button
        style="position: relative; left: 72vw"
        type="primary"
        @click="handlerOk"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import {Message} from 'element-ui'
export default {
  data() {
    return {
      checkAll: false,
      checkedUser: [],
      deptList: [],
      userList: [],
      childUserList: [],
      users: [],
      deptUsers: [],
      isIndeterminate: false,
      value: [],
      value2: [],
      isActive: [],
      isActive2: false,
      currentHandleCheckIndex: 0,
      deptId: 0,
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     if(from.name == 'selPaticipants'){

  //     }
  //   })
  // },
  created() {
    let query = this.$route.query
    this.deptId = query.deptId
    this.deptUsers = JSON.parse(query.deptUsers)
    console.log(this.deptUsers, 'this.deptUsers')
    this.$bus.on('setAllUnCheck', () => {
      this.deptUsers.forEach((item) => {
        item.isChecked = false
      })
    })
    this.$bus.on('changeValue', (id) => {
      this.value.forEach((e, i) => {
        if (e == id) {
          this.value.splice(i, 1)
        }
      })
    })
  },
  mounted() {
    window.scrollTo(0, 0)
  },
  methods: {
    handleCheckedUserChange(value) {
      this.value = value
      console.log(this.value, 'handleCheckedUserChange=this.value')
    },
    handlerOk() {
      // this.$router.push({ path: '/order', query: { value: this.value } })
      this.deptUsers.forEach((item) => {
        this.value.indexOf(item.userId) != -1
          ? (item.isChecked = true)
          : (item.isChecked = false)
      })
      localStorage.setItem('deptUsers', JSON.stringify(this.deptUsers))
      localStorage.setItem('deptId', JSON.stringify(this.deptId))
      this.$router.push({
        name: 'selParticipants',
        // query: {
        //   deptUsers: this.deptUsers,
        //   deptId: this.deptId
        // }
      })
      console.log(this.value, 'this.value')
    },
    changeActive(item) {
      // item.isActive = !item.isActive
      // console.log(this.deptList, 'this.deptList')
    },

    filterUserListByDeptid(id) {
      let users = this.users
      let userList = this.userList
      var filUserList = userList.filter(
        (item) => item.department.indexOf(id) != -1
      )
      let users2 = users.filter((i) => {
        if (
          filUserList.find((item) => {
            return item.name == i
          }) != undefined
        ) {
          return true
        } else {
          return false
        }
      })
      return users2
    },
  },
  watch: {
    deptList: {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {},
    },
  },
  computed: {},
}
</script>
<style scoped>
.childDept {
  margin-top: 10vw;
  font-weight: 700;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  line-height: 52px !important;
}

.el-checkbox {
  padding-top: -3vw;
  padding-bottom: 3vw;
  border-bottom: 1px solid rgb(221, 221, 221);
  font-weight: 700;
}

.el-checkbox__inner {
  z-index: 0 !important;
}

.okBtn {
  padding: 2vw 3vw;
  background-color: rgb(248, 248, 248);
}

.okBtn .el-button {
  width: 22vw;
  padding-left: 3vw;
  /* margin-right: 14vw; */
}
</style>
