<template>
  <section class="AppVillageCadres">
    <functionary-create v-if="isEdit" :instance="instance" :dict="dict" :permissions="permissions"/>
    <functionary-detail v-else-if="showDetail" :instance="instance" :dict="dict" :permissions="permissions"/>
    <ai-list v-else>
      <ai-title slot="title" title="干部档案" isShowArea isShowBottomBorder
                :instance="instance" v-model="areaId" :hideLevel="hideLevel">
      </ai-title>
      <template #content>
        <cadre-files :instance="instance" :dict="dict" :areaId="areaId"/>
      </template>
    </ai-list>
  </section>
</template>
<script>
import {mapState} from "vuex";
import CadreFiles from "./cadreFiles";
import FunctionaryCreate from "./components/functionaryCreate";
import FunctionaryDetail from "./components/functionaryDetail";

export default {
  name: "AppVillageCadres",
  label: "干部档案",
  components: {FunctionaryDetail, FunctionaryCreate, CadreFiles},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  provide() {
    return {
      top: this
    }
  },
  data() {
    return {
      areaId: ""
    }
  },
  computed: {
    ...mapState(["user"]),
    isEdit() {
      return this.$route.hash == "#add"
    },
    showDetail() {
      return this.$route.query.id
    },
    hideLevel() {
      return this.user.info?.areaList?.length - 1
    }
  },
  methods: {},
  created() {
    this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
  }

};
</script>
<style lang="scss" scoped>
.AppVillageCadres {
  width: 100%;
  height: 100%;

  ::v-deep .functionaryContent > .el-tabs__content {
    background: #f3f6f9;
  }
}
</style>
