<template>
  <div class="changePeople-wrapper flex">
    <div class="changePeople-left">
      <PeopleTable
        ref="table"
        :selectNameList.sync="selectNameList"
        :disabled="disabled"
        @selectOne="selectOne"
        @selectAll="selectAll"
      />
    </div>

    <div class="middle flex">
      <div>>></div>
    </div>

    <!-- right -->
    <div class="changePeople-right flex">
      <div class="people-card flex zzz">
        <div
          class="item flex"
          v-for="item in selectNameList"
          :key="item.personId"
        >
          <div>{{ item.personName }}</div>
          <div  class="close" @click="deleteName(item.personId)">x</div>
        </div>
      </div>
      <div class="bottom-text">已选择{{selectNameList.length}}人</div>
    </div>

  </div>

</template>

<script>
  import PeopleTable from "./PeopleTable";
  export default {
    name: "index",
    props: {
      disabled:{
        type:Boolean,
      }
    },
    components:{
      PeopleTable
    },
    data(){
      return{
        selectNameList: []
      }
    },
    watch: {
      selectNameList() {
        let json;
        if (this.selectNameList.length == 0) {
          json = null;
        }
        if (Array.isArray(this.selectNameList)) {
          json = this.selectNameList.map((item) => {
            return {
              personId: item.personId,
            };
        });
        } else {
          json = this.selectNameList;
        }
        this.$emit("getPeopleList", json);
      },
    },
    methods:{
      changeNameList(jsonSelectNameList) {
        if (jsonSelectNameList) {
          this.selectNameList = jsonSelectNameList.map((item) => {
            return {
              personId: item.personId,
              personName: item.personName,
            };
        });
        } else {
          this.selectNameList = [];
        }
        this.$refs.table.getPersonInfo();
      },
      selectOne(all, row){
        this.addName(row);
      },
      selectAll(){
        if (allSelect) {
          all.forEach((item) => {
              const index = this.selectNameList.findIndex((iten) => {
                    return iten.personId == item.personId;
              });
            if (index < 0) {
              this.selectNameList.push(item);
            }
          });
        } else {
          all.forEach((item) => {
              this.deleteName(item.userId);
          });
        }
      },
      addName(row) {
        const index = this.selectNameList.findIndex((item) => {
            return item.personId == row.personId;
        });
        if (index >= 0) {
          this.selectNameList.splice(index, 1);
        } else {
          this.selectNameList.push(row);
        }
      },
      deleteName(personId) {
        if(this.disabled) return;
        const index = this.selectNameList.findIndex((item) => {
            return item.personId == personId;
        });
        if (index >= 0) {
          this.selectNameList.splice(index, 1);
          this.$refs.table.toggleSelection(personId);
        }
      },
      selectAll(all, allSelect) {
        if (allSelect) {
          all.forEach((item) => {
            const index = this.selectNameList.findIndex((iten) => {
                  return iten.personId == item.personId;
            });
            if (index < 0) {
              this.selectNameList.push(item);
            }
          });
        } else {
          all.forEach((item) => {
              this.deleteName(item.personId);
          });
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .flex{
    justify-content: left;
  }
  .changePeople-wrapper {
    width: 100%;
    height: 400px;
    // background-color: red;
    margin-top: 10px;
    justify-content: space-between;
    & > div {
      flex-direction: column;
    }
    .changePeople-left,
    .changePeople-right {
      width: 410px;
      height: 100%;
      border: 1px solid #e5e6eb;
    }
    .middle {
      align-items: center;
      justify-content: center;
      div {
        color: #1890ff;
        font-weight: 2000;
      }
    }
    .changePeople-left {
      padding: 14px 20px 11px 16px;
      flex-direction: column;

      .top-search {
        margin-bottom: 12px;
        justify-content: space-between;
      }
      .left-middle-table {
        flex: 1;
        // background: red;
      }
      .bottom-text {
        padding-top: 10px;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: right;
        color: #1890ff;
      }
    }
    .changePeople-right {
      flex-direction: column;
      padding-top: 14px;
      height: 100%;

      .people-card {
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        flex: 1;
        height: 0;
        padding-left: 11px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          // display: none; /* Chrome Safari */
        }
        .item {
          width: 70px;
          height: 30px;
          line-height: 30px;
          padding-left: 10px;
          padding-right: 5px;
          margin-right: 10px;
          color: #3d3d3d;
          box-sizing: border-box;
          margin-bottom: 10px;
          box-sizing: border-box;
          border: 1px solid #a3d3ff;
          border-radius: 3px;
          font-size: 12px;
          position: relative;
          justify-content: space-between;
        }
        .close {
          cursor: pointer;
        }
      }
      .bottom-text {
        // padding-top: 10px;
        padding-right: 10px;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: right;
        color: #1890ff;
      }
    }
  }
</style>