<template>
  <div>
    <el-dialog
      :visible.sync="showModal"
      :title="modalTitle"
      fullscreen
      top="0"
    >
      <div>
        <el-row :gutter="8">
          <!--组织列表-->
          <el-col :span="6">
            <el-card class="user_card_tree">
              <p slot="header">
                {{ titleChange }}
              </p>
              <div>
                <orgZtree v-show="changeBool" ref="orginZtree" @on-result-change="_orgTreeResult" />
              </div>
            </el-card>
          </el-col>
          <!--待选列表-->
          <el-col :span="8">
            <el-card class="user_card_tree">
              <p slot="header">
                待选人员列表
              </p>
              <div>
                <userCheck ref="userCheck" :group-id="groupId" @on-result-change="_userCheckResult" />
              </div>
            </el-card>
          </el-col>
          <!--操作按钮-->
          <el-col :span="1">
            <div class="assign-user-col-btn">
              <div style="margin-bottom: 20px">
                <el-tooltip content="添加" placement="right">
                  <el-button type="primary" size="mini" @click="_add">
                    <i class="el-icon-d-arrow-right" style="font-size: 20px"></i>
                  </el-button>
                </el-tooltip>
              </div>
              <div>
                <el-tooltip content="移除" placement="right">
                  <el-button type="primary" size="mini" @click="_deleteSelected">
                    <i class="el-icon-d-arrow-left" style="font-size: 20px"></i>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <!--已选列表-->
          <el-col :span="9">
            <el-card class="user_card_tree">
              <p slot="header">
                已添加人员列表
              </p>
              <div>
                <userChecked ref="userChecked" :get-page="getPage" @on-result-change="_userCheckedResult" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 选择人员信息
 */
import { sysOrg } from '../../api'
import orgZtree from '../user-info/orgZtree'
import userCheck from './userCheck'
import userChecked from './userChecked'

export default {
  components: {
    orgZtree,
    userCheck,
    userChecked
  },
  data() {
    return {
      id: '',
      modalTitle: '选择人员',
      showModal: false,
      titleChange: '组织列表',
      changeBool: true,

      footerList: [
        { name: '取消', type: '' },
        { name: '确定', type: 'primary' }
      ],
      groupId: '',
      getPage: [],
      addIds: [],
      delData: []
    }
  },
  methods: {
    // modal-footer
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _open(modalTitle, groupId) {
      this.showModal = true
      this.$nextTick(() => {
        // 标题
        this.modalTitle = modalTitle === undefined ? '选择人员' : modalTitle
        this.groupId = groupId
        this.changeBool = true
        this.titleChange = '组织列表'
        this._getCurrentOrg()
        this._hideLoading()
        this.getPage = []
      })
    },
    // 当前登录用户所处的组织
    _getCurrentOrg: async function() {
      const result = await sysOrg.getOrg()
      if (result !== undefined) {
        this.$refs.orginZtree._getZtree(result.id)
        this.$refs.userCheck._open(result.id)
      } else {
        this.$refs.orginZtree._getZtree()
        this.$refs.userCheck._refresh()
      }
    },
    _orgTreeResult(data) {
      this.$refs.userCheck._open(data.id)
    },
    _userCheckResult(msg, data) {
      switch (msg) {
        case 'click':
          this.selectData = data
          break
        case 'dbClick':
          this.selectData = [data]
          this._add()
          break
        case 'search':
          this.selectData = []
          break
      }
    },
    _add() {
      if (this.selectData.length === 0) {
        this.$message.warning('请至少选择一条数据！')
      } else {
        for (let i = 0; i < this.selectData.length; i++) {
          this.selectData[i].userId = this.selectData[i].id
          if (
            !this.getPage.find(
              item => item.userId === this.selectData[i].userId
            )
          ) {
            this.getPage.push(this.selectData[i])
            this.addIds.push(this.selectData[i].userId)
          }
        }
        this.$refs.userCheck._clearSelection()
      }
    },
    _userCheckedResult(msg, data) {
      switch (msg) {
        case 'click':
          this.delData = data
          break
      }
    },
    _deleteSelected() {
      if (this.delData.length === 0) {
        this.$message.warning('请选择一条或多条数据！')
      } else {
        this._deleteByIds(
          this.delData,
          '确定删除 ' + this.delData.length + ' 条记录？'
        )
      }
    },
    _deleteByIds(row, content) {
      for (let i = 0; i < row.length; i++) {
        const dataIndex = this.getPage.indexOf(row[i])
        this.getPage.splice(dataIndex, 1)
        const idIndex = this.addIds.indexOf(row[i].id)
        this.addIds.splice(idIndex, 1)
      }
    },
    _cancel() {
      this.showModal = false
    },
    _ok() {
      this.showModal = false
      this.$emit('on-result-change', this.getPage)
      this._hideLoading()
    }
  }
}
</script>
