<template>
  <ai-detail list class="List">
    <template slot="title">
      <ai-title title="组织换届" isShowBottomBorder>
        <template #rightBtn>
          <el-button size="small" type="primary" @click="toAdd(selected.id)" v-if="hasConfig&&permissions('app_apporganizationchangeconfig')">换届设置
          </el-button>
        </template>
      </ai-title>
    </template>
    <el-row slot="content" type="flex">
      <ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
        <ai-party-tree
            :filter-node-method="filterNode"
            ref="tree"
            :instance="instance"
            :root="user.info.organizationId"
            :current-node-key="selected.id"
            @select="onTreeChange"/>
      </ai-tree-menu>
      <el-scrollbar class="fill mar-l16 mainContent">
        <ai-card title="当前届次">
          <moment slot="content" :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
        </ai-card>
        <ai-card title="历史届次" v-if="hasConfig">
          <history slot="content" :selected="selected" v-on="$listeners"/>
        </ai-card>
      </el-scrollbar>
    </el-row>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'
import moment from './moment.vue'
import history from './history.vue'

export default {
  name: 'List',
  inject: ['permissions', 'instance', 'dict'],
  data() {
    return {
      tabs: [
        {label: '当前届次', name: 'moment', comp: moment, permission: ''},
        {label: '历史届次', name: 'history', comp: history, permission: ''}
      ],
      currIndex: '0',
      selected: null,
      hasConfig: false
    }
  },
  components: {
    moment,
    history,
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    onTreeChange(e) {
      this.selected = e
    },
    onSearch(v) {
      this.$refs.tree?.$refs?.partyTree?.filter(v)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    toAdd(oid) {
      this.$router.push({hash: "#add", query: {oid}})
    },
  },
  created() {
    const {organizationId: id, organizationName: name} = this.user.info
    this.selected = {id, name}
  }
}
</script>

<style lang="scss" scoped>
.List {
  position: relative;

  :deep(.ai-detail__content--wrapper ){
    height: 100%;

    & > * {
      height: inherit;
    }

    .mainContent {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }

    .AiTreeMenu {
      min-width: 300px;
      box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
    }
  }

  :deep( .is-current > .el-tree-node__content ){
    width: 100% !important;
    padding-right: 16px !important;
  }
}
</style>
