<template>
  <div>
    <Modal v-model="showModal" v-drag width="1250" :mask-closable="false">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Row :gutter="8">
          <!--组织列表-->
          <Col span="6">
          <Card class="user_card_tree">
            <p slot="title">
              {{ titleChange }}
            </p>
            <div>
              <orgZtree v-show="changeBool" ref="orginZtree" @on-result-change="_orgTreeResult" />
            </div>
          </Card>
          </Col>
          <!--待选列表-->
          <Col span="8">
          <Card class="user_card_tree">
            <p slot="title">
              待选人员列表
            </p>
            <div>
              <userCheck ref="userCheck" :group-id="groupId" @on-result-change="_userCheckResult" />
            </div>
          </Card>
          </Col>
          <!--操作按钮-->
          <Col span="1">
          <div class="assign-user-col-btn" style="margin-top: 180px">
            <div style="margin-bottom: 20px">
              <Tooltip content="添加" placement="right">
                <Button type="primary" style="width: 40px" size="small" @click="_add">
                  <Icon type="ios-arrow-forward" size="20"/>
                </Button>
              </Tooltip>
            </div>
            <div>
              <Tooltip content="移除" placement="right">
                <Button type="primary" size="small" @click="_deleteSelected">
                  <Icon type="ios-arrow-back" size="20"/>
                </Button>
              </Tooltip>
            </div>
          </div>
          </Col>
          <!--已选列表-->
          <Col span="9">
          <Card class="user_card_tree">
            <p slot="title">
              已添加人员列表
            </p>
            <div>
              <userChecked ref="userChecked" :get-page="getPage" @on-result-change="_userCheckedResult" />
            </div>
          </Card>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </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.modalTitle = modalTitle === undefined ? '选择人员' : modalTitle
      this.groupId = groupId
      this.showModal = true
      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()
      }
    },
    _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>
<style scoped>
.ivu-btn {
  min-width: 44px;
}
</style>
