<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <view class="detail-page">
        <view class="section">
          <view class="row"><text class="label" style="color: rgba(0,0,0,0.9);">变更日期</text><text class="value">{{
            changeTime || '' }}</text></view>
        </view>
        <view v-for="(it, idx) in otherList" :key="idx" class="section">
          <view class="row row_head"><text class="label">序号{{ it.serialNumber }}</text></view>
          <view class="row"><text class="label">变更前</text><text class="value">{{ it.beforeChange }}</text></view>
          <view class="row"><text class="label">变更后</text><text class="value">{{ it.afterChange }}</text></view>
        </view>

        <CorePersonnel title="人员信息变更前" mode="history" :options="genderOptions" :list="personnelBefore" />
        <CorePersonnel title="人员信息变更后" mode="history" :options="genderOptions" :list="personnelAfter" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getDicByCodeApi } from '@/api/base.js'
import { getCreditHistoryList } from '@/api/credit_manage.js'
import CorePersonnel from './corePersonnel.vue'

export default {
  name: 'CreditHistoryDetail',
  components: { CorePersonnel },
  data() {
    return {
      id: '',
      otherList: [],
      personnelBefore: [],
      personnelAfter: [],
      genderOptions: [],
      changeTime: '',
    }
  },
  created() {
    this.loadGenderOptions()
  },
  onLoad(query) {
    const id = (query && query.id) || ''
    this.id = id
    if (id) this.loadDetail(id)
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await getCreditHistoryList(id);
        const data = res.data || {};
        this.otherList = Array.isArray(data.otherChangeList) ? data.otherChangeList : []
        this.personnelAfter = Array.isArray(data.personnelAfterChangeList) ? data.personnelAfterChangeList : []
        this.changeTime = data.changeTime ? data.changeTime : '';
        this.personnelBefore = Array.isArray(data.personnelBeforeChangeList) ? data.personnelBeforeChangeList : []
      } catch (e) {
        this.otherList = []
        this.personnelAfter = []
        this.personnelBefore = []
        this.changeTime = ''
      }
    },
    async loadGenderOptions() {
      try {
        const res = await getDicByCodeApi('GENDER_TYPE')
        const list = res.data || []
        this.genderOptions = Array.isArray(list) ? list : []
      } catch (e) {
        this.genderOptions = []
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll {
  flex: 1;
  padding: 8rpx 0 20rpx;
}

.detail-page {
  background: #f3f3f3;
}

.section {
  padding: 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.row {
  display: flex;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .label {
    width: 120rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
  }

  .value {
    flex: 1;
    text-align: right;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
  }

  &.row_head {
    padding-bottom: 20rpx;
    border-bottom: 1rpx dashed #f0f0f0;

    .label {
      color: rgba(0, 0, 0, 0.9);
      font-weight: 600;
      padding-left: 6rpx;
    }
  }
}

.title-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx 22rpx;

  &_icon {
    width: 32rpx;
    height: 28rpx;
    margin-right: 16rpx;
    margin-top: 8rpx;
  }

  span {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 600;
  }
}

.mgb10 {
  margin-bottom: 20rpx;
}
</style>