<!-- 组织管理 -->
<template>
  <div class="app-container">
    <el-container>
      <!-- 侧边栏 -->

      <el-main>
        <!-- 查询 -->
        <Conditions ref="conditions" :search-params.sync="searchParams" @search="search" />
        <!-- 表格 -->
        <Tables ref="dyTable" :tree-ids="treeIds" :search-params="searchParams" @rowOperation="rowOperation" />
        <!-- 新增编辑弹窗 -->
        <Details ref="detail" />
        <!-- 查看弹窗 -->
        <SeeDetails ref="seeDetail" />
      </el-main>

    </el-container>
  </div>
</template>

<script>
import Tables from './components/table.vue'
import Conditions from './components/conditions.vue'
import Details from './components/detail.vue'
import SeeDetails from './components/seeDetail.vue'
import { deleteDept } from '@/apiV2/dept'

export default {
  name: 'Dept',
  components: { Conditions, Tables, Details, SeeDetails },
  data() {
    return {
      global: {
        loading: true,
        companyids: '',
        companyid: '',
        projectid: '',
        dict: {
          status: { 0: '正常', 1: '已停用' }
        },
        deptList: [],
        roleList: [],
        userRoleList: []
      },
      treeIds: '', // 侧边栏选中ID
      searchParams: {} // 查询(此处不赋值)
    }
  },
  provide() {
    return {
      global: this.global, // 全局数据对象
      reload: this.reload, // 重置
      refresh: this.refresh // 刷新
    }
  },
  async mounted() {
    // 全局选项更新
    this.updateOptions()
  },
  methods: {
    /* common */
    reload() { // 重置搜索 回到第一页
      this.$refs.conditions.reset()
      this.updateOptions()
    },
    refresh() { // 不重置搜索 刷新当前页
      this.$refs.dyTable.getList(this.searchParams)
      this.updateOptions()
    },
    /* tree -> table */
    changeTree(e) {
      this.global.companyids = e.companyids
      this.global.companyid = e.companyid
      this.global.projectid = e.projectid
    },
    /* search -> table */
    search(params) { // 搜索
      this.searchParams = params
      this.$refs.dyTable.pageObj.current = 1
      this.$refs.dyTable.getList(this.searchParams)
    },
    /* table -> dialog */
    async rowOperation(row, idx, actionName) {
      if (['add', 'edit', 'see', 'addChild'].includes(actionName)) { // 增改查统一
        this.$refs['detail'].showDialog({
          mode: actionName,
          title: actionName === 'addChild' ? '新增子组织' : '',
          formData: row || {}
        })
      } else if (actionName === 'delete') { // 删除
        const txt = `<p class="delText" style="padding: 0 15px;margin-bottom: 5px">确定要删除组织【${row.name}】吗？</p>`
        await this.$confirm(txt, '温馨提示', {
          dangerouslyUseHTMLString: true,
          type: 'none'
        })
        try {
          this.loading = true
          const res = await deleteDept(row.id)
          if (res.success) {
            this.reload()
          }
        } finally {
          this.loading = false
        }
      } else { // 表格其它操作
        this.$refs[actionName].showDialog({
          formData: row || {}
        })
      }
    },
    /* 全局选项更新（增删改对选项数据产生了影响时使用） */
    async updateOptions() {
      // this.$nextTick(() => {
      //   this.$refs.conditions.$refs.deptSelect.getOptions()
      //   this.$refs.detail.$refs.deptSelect.getOptions()
      // })
    }
  }
}
</script>

<style lang="scss">
</style>
