<template>
  <div>
    <Modal v-model="showUserModal" width="800" :mask-closable="false" class="zIndex-1100">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Row :gutter="16">
          <!--组织列表-->
          <Col span="10" />
          <Card class="user_card_tree">
            <p slot="title">
              {{ titleChange }}
            </p>
            <p slot="extra" @click="_changeLimit">
              <Tooltip content="切换" placement="top-end">
                <Badge dot>
                  <Icon type="arrow-swap" size="23" />
                </Badge>
              </Tooltip>
            </p>
            <div>
              <OrginZtree v-show="changeBool" ref="orginZtree" @on-result-change="_orgData" />
              <UserMarshalling
                v-show="changeBool === false"
                ref="marshalling"
                @on-result-change="_marshallingData"
              />
            </div>
          </Card>
          </Col>
          <!--待选列表-->
          <Col span="14" />
          <Card class="user_card_tree">
            <p slot="title">
              待选人员列表
            </p>
            <div>
              <UserCheck ref="userCheck" @on-result-change="_userCheckData" @on-type-change="_typeChange" />
            </div>
          </Card>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          提交
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 分配人员信息
 */

import OrginZtree from './OrginZtree.vue'
import UserMarshalling from './UserMarshalling.vue'
import UserCheck from './UserCheck'

export default {
  components: {
    OrginZtree,
    UserMarshalling,
    UserCheck
  },
  data() {
    return {
      id: '',
      modalTitle: '分配人员',
      showUserModal: false,
      titleChange: '组织列表',
      changeBool: true,
      rightBtn: true,
      leftBtn: true,
      userCheckIds: [],
      userCheckedIds: [],
      userCheck: '',
      checkedBackData: [],
      backDataLength: 0,
      type: ''
    }
  },
  methods: {
    _open(data) {
      ;(this.checkedBackData = []), (this.showUserModal = true)
      this.changeBool = true
      this.rightBtn = true
      this.leftBtn = true
      this.userCheckIds = []
      this.userCheckedIds = []
      this.titleChange = '组织列表'
      this.$refs.orginZtree._getZtree(data)
      this.$refs.userCheck._openClear()
    },
    _orgData(data) {
      this.$refs.userCheck._open(data.id)
      this.$refs.userCheck._indexChange()
      this.userCheck = ''
    },
    _marshallingData(data) {
      this.$refs.userCheck._marshallingOpen(data.id)
    },
    _userCheckData(data) {
      this.userCheck = data
    },
    _typeChange(data) {
      this.type = data
    },
    _changeLimit() {
      this.changeBool = !this.changeBool
      this.$refs.userCheck._indexChange()
      this.userCheck = ''
      if (this.changeBool) {
        // 组织
        this.titleChange = '组织列表'
        this.$refs.orginZtree._getZtree('assign')
        this.$refs.userCheck._refresh()
      } else {
        // 用户编组
        this.titleChange = '用户编组'
        this.$refs.marshalling._open()
        this.$refs.userCheck._refresh()
      }
    },
    _cancel() {
      this.showUserModal = false
    },
    _ok() {
      if (this.userCheck == '') {
        this.$Message.warning('请选择人员！')
      } else {
        this.$emit('on-result-change', this.userCheck)
        this.showUserModal = false
        this.$refs.userCheck._deleteAll()
      }
    },
    _userCheckedBackData(result) {
      this.backDataLength = result.length
    }
  }
}
</script>
