<template>
<section>
<div>
    <div class="row shadow-2">
        <div class="col q-pa-sm q-ml-sm">选择审批人</div>
        <q-btn class="float-right" dense flat icon="close" @click="closeModel">
        <q-tooltip>关闭窗口</q-tooltip>
        </q-btn>
    </div>
    <!-- 选择个人 -->
    <div class="row q-mb-lg" >
        <div class="col q-ml-lg" style="height:50vh;overflow:auto;">
                <organizationAnt v-model="orgList" @staffNode="staffNode" />
        </div>
        <div class="col q-ml-lg" style="height:50vh;overflow:auto;" >
            <div class="q-mb-lg q-mt-lg">
                显示已选择的部门、成员
            </div>
            <div v-if="orgList.length ===0" class="text-grey-5">
                没有选择任何部门、成员
            </div>
            <div v-else >
                <!--人的-->
                <div class="row shadow-1" v-for="node in selectStaff" :key="node.id"  >
                    <div class="col" style="display:flex;align-items: center;">
                        <q-icon name="person" size="16px"/>
                        <div>
                        {{' '+node.title}}&nbsp;<span style="color: #64b5fe">{{ node.key  ? node.key:'' }}</span>
                        </div>
                    </div>
                    <div class="col">
                        <q-btn class=" float-right" flat color="primary" icon="clear" @click="deleteNode(node)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <q-card-separator />
    <div class="row float-right q-mt-lg q-mb-lg">
        <div style="width: 200px;display: flex;justify-content: space-evenly ">
        <q-btn color="primary" @click="onSubmit" >确定</q-btn>
        <q-btn outline color="primary" @click="closeModel">取消</q-btn>
        </div>
    </div>
</div>
</section>
</template>

<script>
  import organizationAnt from '../components/organization-ant'
  export default {
    name: "SeleteOrganization",
    components: {organizationAnt},
    props: {
      opened:{
        default:false,
        type:Boolean
      },
      title: {
        default: '组织机构',
        type: String
      },
      label: {
        default: '打开弹窗',
        type: String
      },
      treeKey: {
        type: Array
      },
      value: {
        type: Array
      }
    },
    data() {
      return {
        orgFlag: true,
        orgList: [],// org树选择的
        selectStaff: [], // 已选择
        selectDept: [],
      }
    },
    created() {
      this.orgList = this.value;
    },
    methods: {
      staffNode(nodeList) {
        debugger
        this.selectStaff = nodeList
      },
      departmentNode(nodeList) {
        this.selectDept = nodeList
      },
      //  删除节点事件
      deleteNode(node) {
        if (!node) {
          return false;
        }
        var staff = this.selectStaff.filter(staff => staff.key !== node.key);
        this.selectStaff = staff;
        this.orgList = staff.map(org => org.key);
      },
      deleteAllNode(){
        this.selectStaff =[];
        this.orgList=[];
      },
      // 向父组件提交所选择的节点
      onSubmit() {
        this.simpleEmit();
      },
      // 关闭窗口
      closeModel() {
        this.deleteAllNode();
        this.orgFlag = false
        this.$emit('close', false);
      },
      // 子组件内的数据准备就绪
      treeDataReady(status) {
        if ('ok' === status) {
          this.$emit('ok', 'ok');
        }
      },
      simpleEmit() {
        var arr = this.selectDept.concat(this.selectStaff);
        this.$emit('selectNode', arr);
        console.log('微信组织机构组件，向父提交了',this.selectStaff,this.selectDept);
        this.$emit('staffNode', this.selectStaff);
        this.$emit('departmentNode', this.selectDept);
        this.closeModel();
      },
    },
    watch: {
      value(newValue) {
        this.orgList = this.value;
        this.$emit('input', newValue);
        // this.simpleEmit();
      },
      orgList(newValue) {
        console.log('微信组织机构组件，选择了 ,', newValue);
        // this.$emit('input', newValue);
        // this.simpleEmit();
      },
      opened(newValue){
        this.orgFlag = newValue;
      }

    }

  }
</script>

<style scoped>

</style>
