<!--
	@name: 组织选择
	@description: 组织和用户列表数据
	@ author: @liulin
	@update: 2023年3月20日
-->
<template>
  <el-dialog
    top="4vh"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    width="50%"
    :close-on-click-modal="false"
    v-if="visible"
  >
    <div class="innerDialog">
      <div class="left">
        <div class="innerDialog-tabs">
          <div class="tabs-left">
            <!-- 树形控件 -->
            <tree
              :data="treeData"
              @node-click="handleNodeClick"
              @loadTree="loadDataTree"
            />
          </div>
          <div class="tabs-right">
            <!-- <div class="dialog-header">
              <el-form ref="form" :model="searchForm" label-width="70px">
                <el-form-item label="名称">
                  <el-input
                    v-model="searchForm.name"
                    clearable
                    :placeholder="$t('navigator.searchTip')"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
              <el-divider direction="vertical" class="line"></el-divider>
              <div>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="btn btn-plus"
                  @click="handleSearch"
                >
                  {{ $t('common.search') }}
                </el-button>
              </div>
            </div> -->
            <el-table
              ref="table"
              tooltip-effect="dark"
              :data="tableData"
              :min-height="600"
              style="width: 100%"
              class="single-select-table"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>

              <el-table-column show-overflow-tooltip prop="code" align="center">
                <template slot="header">
                  {{ $t('reportManagement.code') }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="name" align="center">
                <template slot="header">
                  {{ $t('reportManagement.name') }}
                </template>
              </el-table-column>
            </el-table>
            <!-- <pagination
              :pageResult="pageResult"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /> -->
          </div>
        </div>
      </div>
      <!-- <div class="right">
        <div class="text">{{ $t('reportManagement.selected') }}</div>
        <template v-if="multipleSelection.length !== 0">
          <div class="item" v-for="item in multipleSelection" :key="item.name">
            <span>{{ item.name }}</span>
            <el-link
              icon="el-icon-delete"
              :underline="false"
              type="danger"
              @click="handleRightDelete(item.name)"
            >
              {{ $t('common.delete') }}
            </el-link>
          </div>
        </template>
        <span style="padding: 10px; display: inline-block" v-else>{{
          $t('common.empty')
        }}</span>
      </div> -->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">
        确认
      </el-button>
      <el-button @click="handleClose">
        {{ $t('common.cancel') }}
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import tree from '@/components/tree'
import pagination from '@/components/pagination'
import req from '@/request.js'
import org from '@/api/org.js'
import uc from '@/api/uc.js'
import utils from '@/utils.js'
const portal = window.context.portal
export default {
  name: 'authDailog',
  components: {
    pagination,
    tree
  },
  data() {
    return {
      treeData: [],
      title: '选择',
      visible: false,
      searchForm: {},
      tableData: [],
      tableDataUser: [],

      params: {
        pageBean: {
          page: 1,
          pageSize: 20
        }
      },
      treeParams: {demId: '1258608622670319616'},
      multipleSelection: [] // 已选中的列表
    }
  },
  created() {
    this.loadDataTree(this.treeParams)
    this.getOrgData()
  },
  methods: {
    open() {
      this.visible = true
      this.multipleSelection = []
    },
    getOrgData() {
      org.getByParentAndDemToTree().then(res => {
        this.tableData = res || []
      })
    },
    getUserData(params) {
      uc.getOrgUserQuery(params).then(res => {
        let data = (res && res.rows) || []
        this.tableData = data.map(item => {
          return {
            name: item.fullname,
            ...item
          }
        })
        this.pageResult = {
          page: res.page,
          pageSize: res.pageSize,
          total: res.total
        }
      })
    },
    handleClose() {
      this.visible = false
    },
    loadDataTree(params) {
      org.getByParentAndDemToTree(params).then(res => {
        let data = res || []
        this.treeData = utils.tile2nest(data)
      })
    },
    handleNodeClick(item) {
      if (item.id == '0') {
        this.getOrgData()
      } else {
        if (!item.children) return
        this.tableData = []
        this.tableData.push(...item.children)
      }
    },
    handleNodeClickUser(item) {
      if (item.id == '0') {
        this.params.querys = [
          {
            property: 'DEM_ID_',
            value: item.demId,
            group: 'orgTree',
            relation: 'AND',
            operation: 'EQUAL'
          }
        ]
      } else {
        this.params.querys = [
          {
            property: 'ORG_ID_',
            value: item.id,
            group: 'orgTree',
            relation: 'AND',
            operation: 'IN'
          }
        ]
      }
      this.getUserData(this.params)
    },
    handleSearch() {
      let obj = this.searchForm
      let querys = []
      for (let i in obj) {
        if (obj[i]) {
          querys.push({
            group: 'main',
            operation: 'LIKE',
            parentGroup: '',
            property: i,
            relation: 'AND',
            value: obj[i]
          })
        }
      }
      this.params.querys = querys
    },
    handleSelectionChange(rows) {
      // 单选
      if (rows.length > 1) {
        this.$refs.table.clearSelection()
        let obj = rows[1]
        this.$refs.table.toggleRowSelection(obj)
        rows = rows.slice(1)
      }
      this.multipleSelection = rows
    },
    // 去重
    uniqueFunc(arr, uniId) {
      const res = new Map()
      return arr.filter(
        item => !res.has(item[uniId]) && res.set(item[uniId], 1)
      )
    },
    handleSizeChange(pageSize) {
      this.params.pageBean = {...this.dialogParams.pageBean, pageSize}
    },
    handleCurrentChange(page) {
      this.params.pageBean = {...this.dialogParams.pageBean, page}
    },
    handleRightDelete(name) {
      this.multipleSelection = this.multipleSelection.filter(
        item => item.name !== name
      )
    },
    submit() {
      this.visible = false
      this.$emit('orgSelect', this.multipleSelection)
    }
  }
}
</script>
<style lang="scss" scoped>
.innerDialog {
  // display: flex;
  min-height: 600px;
  max-height: 600px;
  .right {
    width: 180px;
    border: 1px solid #eee;
    margin-left: 10px;
    /deep/ .el-checkbox__label {
      max-width: 120px;
      text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
      white-space: nowrap; /*让文字不换行*/
      overflow: hidden; /*超出要隐藏*/
    }
    .text {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      font-size: 14px;
      border-bottom: 1px solid #eee;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      &:nth-child(n + 1) {
        padding-bottom: 0;
      }
    }
    .grop {
      padding-left: 20px;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      border: 1px solid #eee;
      padding-right: 10px;
    }
    /deep/ .el-checkbox {
      margin-right: 0;
      height: 24px;
      display: flex;
      align-items: center;
    }
  }
  /deep/ .el-tabs__nav {
    padding-top: 0;
  }
  /deep/ .el-tabs,
  /deep/ .el-tabs__header,
  /deep/ .el-tabs__nav-wrap,
  /deep/ .el-tabs__nav-scroll,
  /deep/ .el-tabs__nav {
    height: inherit;
  }
  .innerDialog-tabs {
    display: flex;
    width: 100%;
    max-height: 600px;
    min-height: 600px;
    .tabs-left {
      flex: 1;
      border: 1px solid #eee;
      padding: 10px;
      margin-right: 10px;
      overflow: auto;
    }
    .tabs-right {
      flex: 3;
      overflow: auto;
    }
  }
}
.dialog-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .line {
    margin: 0 30px;
  }
  .btn-plus {
    margin-right: 10px;
  }
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
  /deep/ .el-form {
    height: 40px;
  }
}
/deep/ .single-select-table thead .el-table-column--selection .cell {
  display: none;
}
</style>
