<template>
  <view class="AppOrganizational" :class="tabIndex == 1 ? 'bg-369' : 'bg-fff'">
    <div class="detail-top">
      <p>{{ dataInfo.organizationName || '-' }}</p>
      <div>成立时间：{{ formatTime(dataInfo.createOrganizationTime) || '-' }}</div>
    </div>
    <div class="line-bg"></div>
    <div class="select-tab">
      <div :class="tabIndex == 0 ? 'tab-active' : ''" @click="tabClick(0)">当前届次</div>
      <div :class="tabIndex == 1 ? 'tab-active' : ''" @click="tabClick(1)">历史届次</div>
    </div>
    <div class="organization-detail" v-if="!tabIndex">
      <p>当前届次：{{ dataInfo.sessionTime || '-' }}</p>
      <p>本届换届时间：{{ dataInfo.changeTime || '-' }}</p>
      <p>换届类型：{{ $dict.getLabel('organizationChangeType', dataInfo.type) || '-' }}</p>
      <p class="padd-b32">下届换届时间：{{ dataInfo.nextChangeTime || '-' }}</p>

      <p class="fw500">本届任职</p>
      <div style="margin-bottom: 40px;">
        <p v-for="(item, index) in dataInfo.serveList" :key="index">{{ item.position }}：{{ item.name }}</p>
      </div>

      <p class="fw500">本届候选人</p>
      <p v-for="(item, index) in dataInfo.candidateList" :key="index">{{ item.position }}：{{ item.name }}</p>
    </div>
    <div class="history-list" v-if="historyList.length && tabIndex">
      <div class="item" v-for="(item, index) in historyList" :key="index" @click="toDetail(item.id)">
        <div class="item-top">
          <image src="https://cdn.cunwuyun.cn/img/organizationalchange-icon.png"/>
          届次：{{ item.sessionTime }}
        </div>
        <div class="item-date">换届时间：{{ item.changeTime }}</div>
      </div>
    </div>
    <AiEmpty  v-if="!historyList.length && tabIndex"/>
  </view>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name:"AppOrganizational",
  appName: "组织换届",
  computed: {
    ...mapState(['user']),
    formatTime() {
      return function (time) {
        return time && time.substring(0, 10);
      }
    }
  },
  data() {
    return {
      tabIndex: 0,
      historyList: [],
      dataInfo: {}
    };
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.$dict.load('organizationChangeType').then(() => {
      this.getDetail()
      this.getHistory()
    })
  },
  methods: {
    getDetail() {
      this.$instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId-forwx`, null, {
        params: {organizationId: this.user.partyOrgId}
      }).then(res => {
        if (res?.data) {
          this.dataInfo = res.data
        }
      }).catch(err => {
        this.$toast(err)
      })
    },
    getHistory() {
      this.$instance.post(`/app/apporganizationgeneralelection/list-forwx?organizationId=${this.user.partyOrgId}`).then(res => {
        if (res && res.data) {
          this.historyList = res.data
        }
      })
    },
    tabClick(index) {
      this.tabIndex = index
    },
    toDetail(id) {
      uni.navigateTo({
        url: `./detail?id=${id}`
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.AppOrganizational {
  .detail-top {
    padding: 32px;
    background-color: #E60012;
    color: #fff;

    p {
      line-height: 64px;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }

    div {
      line-height: 40px;
      font-size: 28px;
      margin-top: 16px;
    }
  }

  .line-bg {
    height: 8px;
    background-color: #F3F6F9;
  }

  .select-tab {
    display: flex;
    line-height: 96px;
    background-color: #fff;

    div {
      flex: 1;
      border-bottom: 2px solid #D8DDE6;
      font-size: 28px;
      text-align: center;
      color: #999;
    }

    .tab-active {
      color: #F26C77;
      border-bottom: 4px solid #E60012;
    }
  }

  .organization-detail {
    padding: 48px 32px 0;

    p {
      font-size: 32px;
      color: #666;
      line-height: 48px;
    }

    .padd-b32 {
      padding-bottom: 40px;
    }

    .fw500 {
      font-weight: 600;
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }

  .history-list {
    padding: 16px 32px;

    .item {
      width: 686px;
      background: #fff;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      margin-bottom: 32px;
      display: flex;

      .item-top {
        width: 622px;
        height: 108px;
        line-height: 106px;
        margin-left: 16px;
        color: #333;
        font-size: 32px;
        flex: 1;

        image {
          width: 40px;
          height: 40px;
          margin: 0 20px 0 16px;
          vertical-align: middle;
        }
      }

      .item-date {
        line-height: 106px;
        padding-right: 32px;
        flex: 1;
        color: #999;
        font-size: 28px;
        text-align: right;
      }
    }
  }
}

.bg-fff {
  background-color: #fff;
}

.bg-369 {
  background-color: #F3F6F9 !important;
}

</style>
