<template>
  <!-- 添加用户 -->
  <div id="addUser">
    <div class="main">
      <!-- 未添加用户 -->
      <div class="table-box">
        <div class="title">
          <div>未添加用户</div>
          <div><span>{{ this.checkedLength }}/</span>{{ this.NoUserDataSource.length }}</div>
        </div>
        <div class="table-content">
          <FilterTable
            ref="noUsertable"
            :columns="columns"
            :searchInput="searchInput"
            :dataSource="NoUserDataSource"
            :total="total"
            @changeParams="changeParams"
          />
        </div>
      </div>
      <div class="btn-box">
        <div>
          <a-button type="primary" :disabled="$refs.noUsertable&&$refs.noUsertable.selectedRows.length===0" @click="addFun">
            <a-icon type="right" />添加
          </a-button>
          <a-button type="primary" :disabled="$refs.addedUsertable&&$refs.addedUsertable.selectedRows.length===0" @click="removeFun">
            <a-icon type="left" />移除
          </a-button>
        </div>

      </div>
      <!-- 已添加用户 -->
      <div class="table-box">
        <div class="title">
          <div>已添加用户</div>
          <div>{{ 0 || this.addListArr.length }}</div>
        </div>
        <div class="table-content">
          <FilterTable ref="addedUsertable" :columns="columns" :dataSource="addListArr" :total="total" @changeParams="changeParams" />
        </div>
      </div>

    </div>

    <div class="btn-list">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import { listUser } from '@/api/system/user'

export default {
  components: {
    FilterTable
  },
  props: {
    addedUserDataSource: {
      type: Array,
      default: () => {}
    }
  },

  data() {
    return {
      columns: [
        {
          title: '用户姓名',
          dataIndex: 'subscribersName',
          key: 'subscribersName',
          align: 'center',
          scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender'
					}
        },
        {
          title: '用户账号',
          dataIndex: 'subscribersEmail',
          key: 'subscribersEmail',
          align: 'center',
          scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender'
					}
        }
      ],
      NoUserDataSource: [],
      addListArr: [],
      total: 0,
      selectedRowsId: [],
      searchInput: null,
      params: {
        pageSize: 10,
        pageNum: 1
      },
      // 查询用户列表
      dateRange: [],
      checkedLength: 0,
      arrText: [],
      tempArr: []

    }
  },
  mounted() {
    this.addListArr = JSON.parse(JSON.stringify(this.addedUserDataSource))
    console.log('%c [ this.addListArr  ]-118', 'font-size:13px; background:pink; color:#bf2c9f;', this.addListArr)
    this.getList()
  },
  methods: {
    // 移除数组的方法
    removeData(arr1, arr2) {
      arr1.forEach((item1, index1) => {
        arr2.forEach((item2, index2) => {
          if (item1.subscribersEmail === item2.subscribersEmail) {
            // console.log('1', 1)
            arr1[index1] = undefined
          }
        })
      })
      return arr1.filter(x => {
        return x
      })
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true
      listUser(this.addDateRange(this.params, this.dateRange)).then(response => {
          this.NoUserDataSource = response.rows
          this.NoUserDataSource.forEach((item, index) => {
            item.id = item.userId
            item.orderNum = index + 1
            item.subscribersId = item.userId
            item.subscribersName = item.userName
            item.subscribersEmail = item.email
          })
          this.NoUserDataSource = this.removeData(this.NoUserDataSource, this.addedUserDataSource)
          this.total = response.total
        }
      )
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
    },
    addFun() {
      this.NoUserDataSource = this.removeData(this.NoUserDataSource, this.$refs.noUsertable.selectedRows)

      // this.$refs.noUsertable.selectedRowKeys.forEach(item => {
      //   this.NoUserDataSource.splice(item, 1)
      // })
      this.$refs.noUsertable.selectedRows.forEach(item => {
        this.addListArr.push(item)
      })
      this.addListArr.forEach((item, key) => {
        item.key = key
        item.orderNum = key
      })
      console.log(this.addListArr)
    },
    removeFun() {
      // this.NoUserDataSource = [...this.NoUserDataSource, ...this.$refs.addedUsertable.selectedRows]
      this.addListArr = this.removeData(this.addListArr, this.$refs.addedUsertable.selectedRows)
      this.$refs.addedUsertable.selectedRows.forEach(item => {
        this.NoUserDataSource.push(item)
      })
      // this.addListArr = this.$refs.addedUsertable.selectedRows
    },
    // 取消
    handleOk() {
      this.$emit('handleOk')
    },

    // 提交
    onSubmit() {
      this.$emit('getAddedUserData', this.addListArr)
    }
    // getChecked() {
    //   if (this.$refs.noUsertable && this.$refs.noUsertable.selectedRows) {
    //     this.checkedLength = this.$refs.noUsertable.selectedRows.length
    //     console.log('jjjjjj')
    //   }
    // }
  }

}
</script>

<style scoped lang='less'>
#addUser {
  .main {
    display: flex;
    justify-content: space-between;
    .table-box {
      width: 45%;
      .title {
        font-size: 16px;
        color: #000;
        margin: 0 10px 15px 10px;
        display: flex;
        justify-content: space-between;
      }
    }
    .btn-box {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      text-align: center;
      & > div {
        & > button {
          margin: 5px 0;
        }
      }
    }
  }
  .btn-list {
    margin: 20px 0 0;
    text-align: center;
  }
}
</style>
