<template>
  <div>
    <Modal v-model="showUserModal" width="800" :mask-closable="false" class="zIndex-1200">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Row :gutter="16">
          <!--组织列表-->
          <Col span="10">
          <Card class="user_card_tree">
            <p slot="title">{{titleChange}}</p>
            <p v-if="isChange === undefined" slot="extra" @click="_changeLimit">
              <Tooltip content="切换" placement="top-end">
                <Badge dot>
                  <Icon type="ios-switch" size="23"></Icon>
                </Badge>
              </Tooltip>
            </p>
            <div>
              <orginZtree v-show="changeBool" ref="orginZtree" @on-result-change="_orgData"></orginZtree>
              <userMarshalling
                v-show="changeBool === false"
                ref="marshalling"
                @on-result-change="_marshallingData"></userMarshalling>
            </div>
          </Card>
          </Col>
          <!--待选列表-->
          <Col span="14">
          <Card class="user_card_tree">
            <p slot="title">待选人员列表</p>
            <div>
              <userCheck ref="userCheck" :is-sampling-person="isSamplingPerson" @on-result-change="_userCheckData"></userCheck>
            </div>
          </Card>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult"></modal-footer>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 选择人员信息
 */

import orginZtree from '../user-info/orginZtree.vue'
import userMarshalling from '../user-info-multi/userMarshalling.vue'
import { sysOrg } from '../../api'
import userCheck from './userCheck'
export default {
  components: {
    orginZtree,
    userMarshalling,
    userCheck
  },
  props: {
    // 是否显示切’换操‘作
    isChange: null,
    isSamplingPerson: null // 是否显示人员变红（采样人员）
  },
  data() {
    return {
      id: '',
      modalTitle: '选择人员',
      showUserModal: false,
      titleChange: '组织列表',
      changeBool: true,
      currentRowData: {},
      // 用于区分tree
      treeName: '',
      footerList: [
        { name: '取消', type: '' },
        { name: '确定', type: 'primary' }
      ]
    }
  },
  methods: {
    // modal-footer
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _open(treeName, modalTitle) {
      if (treeName === undefined) {
        this.treeName = 'userMan'
      } else {
        this.treeName = treeName
      }
      // 标题
      if (modalTitle === undefined) {
        this.modalTitle = '选择人员'
      } else {
        this.modalTitle = modalTitle
      }
      this.showUserModal = true
      this.changeBool = true
      this.titleChange = '组织列表'
      this._getCurrentOrg()
      this.$refs.userCheck._refresh()
      this._hideLoading()
    },
    _openGoupByUserId(modalTitle, uid, treeName) {
      this.modalTitle = modalTitle
      this.changeBool = false
      this.showUserModal = true
      this.titleChange = '用户编组'
      if (treeName === undefined) {
        this.treeName = 'userMan'
      } else {
        this.treeName = treeName
      }
      this.$refs.userCheck._refresh()
      this.$refs.marshalling._uidOpen(uid)
    },
    _openGoup(modalTitle, treeName) {
      this.modalTitle = modalTitle
      this.changeBool = false
      this.showUserModal = true
      this.titleChange = '用户编组'
      if (treeName === undefined) {
        this.treeName = 'userMan'
      } else {
        this.treeName = treeName
      }
      this.$refs.userCheck._refresh()
      this.$refs.marshalling._open()
    },
    _openOrg(modalTitle, treeName) {
      this.modalTitle = modalTitle
      this.changeBool = false
      this.showUserModal = true
      this.titleChange = '用户编组'
      this._changeLimit()
      if (treeName === undefined) {
        this.treeName = 'userMan'
      } else {
        this.treeName = treeName
      }
      this.$refs.userCheck._refresh()
      this.$refs.marshalling._open()
    },
    // 当前登录用户所处的组织
    _getCurrentOrg: async function() {
      const result = await sysOrg.getOrg()
      if (result !== undefined) {
        this.$refs.orginZtree._getZtree(this.treeName, result.id)
        this._orgData(result)
      } else {
        this.$refs.orginZtree._getZtree(this.treeName)
      }
    },
    _orgData(data) {
      console.log(data)
      this.$refs.userCheck._open(data.id, this.treeName)
      this.currentRowData = {}
    },
    _marshallingData(data) {
      this.$refs.userCheck._marshallingOpen(data.id, this.treeName + 'Ma')
    },
    _userCheckData(data, msg) {
      this.currentRowData = data
      if (msg === 'dbClick') {
        // 双击
        this._ok()
      }
    },
    _changeLimit() {
      this.changeBool = !this.changeBool
      this.currentRowData = {}
      if (this.changeBool) {
        // 组织
        this.titleChange = '组织列表'
        this._getCurrentOrg()
        this.$refs.userCheck._refresh()
      } else {
        // 用户编组
        this.titleChange = '用户编组'
        this.$refs.marshalling._open()
        this.$refs.userCheck._refresh()
      }
    },
    _cancel() {
      this.showUserModal = false
    },
    _ok() {
      if (JSON.stringify(this.currentRowData) === '{}') {
        this.$Message.warning('请选择人员！')
        this._hideLoading()
      } else {
        // 根据组织选择人员时
        if (this.currentRowData.userId === undefined) {
          this.currentRowData.userId = this.currentRowData.id
        }
        this.$emit('on-result-change', this.currentRowData, this.treeName)
        this.showUserModal = false
      }
    }
  }
}
</script>
