<template>
  <section class="moment">
    <template v-if="detail.id">
      <ai-title :title="detail.organizationName||'基本信息'" class="mar-b8"/>
      <ai-wrapper>
        <ai-info-item label="本届换届时间" :value="detail.changeTime"/>
        <ai-info-item label="换届类型" :value="dict.getLabel('organizationChangeType',detail.type)"/>
        <ai-info-item label="下届换届时间" :value="detail.nextChangeTime"/>
        <ai-info-item label="当前届次" :value="detail.sessionTime"/>
      </ai-wrapper>
      <detail-panel :candidate-list="detail.candidateList" :serve-list="detail.serveList" disabled/>
    </template>
    <ai-empty v-else>
      <div>暂无换届信息</div>
      <el-row type="flex" justify="center" class="mar-t8">
        <ai-highlight content="请点击【@v】完善基础内容后,再进行后续操作" value="开始设置"/>
      </el-row>
      <el-button class="mar-t32" type="primary" @click="$router.push({hash:'#add',query:{oid,new:1}})">开始设置</el-button>
    </ai-empty>
  </section>
</template>

<script>
import DetailPanel from "./detailPanel";

export default {
  name: "moment",
  components: {DetailPanel},
  inject: ['permissions', 'instance', 'dict'],
  data() {
    return {
      detail: {},
      tableData: [],
      totalJob: 0,
      current: 1,
      size: 10,
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'content', label: '职位'},
        {prop: 'content', label: '姓名'},
        {slot: 'options'},
      ]
    },
    oid: v => v.$attrs.selected.id
  },
  watch: {
    oid: {
      immediate: true,
      handler() {
        this.getDetail()
      }
    }
  },
  methods: {
    getDetail() {
      const {oid: organizationId} = this
      this.detail = {}
      organizationId && this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
        pureBack:true,
        params: {organizationId}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      }).finally(() => this.$emit("update:hasConfig", !!this.detail.id))
    },
  },
  created() {
    this.dict.load("organizationChangeType")
  }
}
</script>

<style lang="scss" scope>
.moment {
  padding-top: 0 !important;
  background-color: #FFF !important;
}
</style>
