<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title" @clickLef="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="information-container h-scroller flex-1-dhc">
      <van-steps active-color="#FF574C" inactive-color="#FF574C" direction="vertical" :active="9999999999999999999999">
        <van-step v-for="(item, index) in list" :key="index">
          <span class="time">{{ item.ALT_DATE }}</span><span style="margin-left: 10px;font-weight: bold" class="time">{{ item.ALT_ITEM }}</span>
          <div class="historyinfo"><div>变动前内容：</div><div>{{ item.ALT_BE }}</div></div>
          <div class="historyinfo"><div>变动后内容：</div><div>{{ item.ALT_AF }}</div></div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Step, Steps } from "vant";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import Public from '@/public/ts/Public';

Vue.use(Step);
Vue.use(Steps);
/**
 * @Description 基本信息变动历史
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:12
 */
@Component({
  name: "InfoChangeHistory",
})
export default class InfoChangeHistory extends Vue {
  title = "基本信息变动历史"; // 页面标题
  list = [];

  onClick() {
    console.log(111111);
  }
  mounted() {
    console.log(111);
  }
  activated() {
    this.getBaseInfo();
  }
  //基本信息变动历史
  getBaseInfo() {
    var param = {
      CUST_FULL_NAME: this.$store.getters.getCusInfo.cus_name,
      CERT_ARRAY_INFO: [
        {
          CERT_TYPE: '', //Public.getGScode(this.$store.getters.getCusInfo.cert_type), //'200',
          CERT_NO: '' //this.$store.getters.getCusInfo.cert_code //'77454934-7'
        }
      ],
      GS_QUERY_OPTION_ARRAY: [
        {
          GS_QUERY_OPTION_LIST: '25'
        }
      ],
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectGSXXCX),
      ClientNo: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectGSXXCX
    };
    NativeUI.showWaiting('正在查询....');
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        this.list = res.ALTER_INFO;
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
}
</script>

<style scoped>
span {
  color: #999999;
  font-size: 16px;
}
::v-deep .van-step__circle,
::v-deep .van-step__circle-container i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
}
.information-container {
  padding-right: 32px;
  padding-top: 15px;
}
.time {
  font-size: 20px;
  color: #333333;
}
.historyinfo {
  margin-top: 5px;
  padding-left: 15px;
  font-size: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.historyinfo > div:nth-child(1) {
  white-space: nowrap;
}
.historyinfo > div {
  font-size: 20px;
  line-height: 35px;
}
</style>