<template>
  <div>
    <title-bar :title="title" @clickLef="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <sub-title>基本信息变动历史</sub-title>
      <div v-if="baseInfoHistoryList.length >0 " style="margin-left: 30px; padding-bottom: 50px">
        <van-steps direction="vertical"
                   active-color = "#000000"
                   inactive-color = "#000000"
                   >
          <van-step v-for="(item, index) in baseInfoHistoryList" :key="index">
            <template v-slot:active-icon>
              <div class="slotImg"></div>
            </template>
            <template v-slot:inactive-icon>
              <div class="slotImg"></div>
            </template>
            <template v-slot:finish-icon>
              <div class="slotImg"></div>
            </template>
              <div style="font-size: 16px;">
                {{ item.ALT_DATE }}&nbsp;<span style="font-weight: bold">{{ item.ALT_ITEM }}</span>
              </div>
                <div style="margin: 10px 20px;font-size: 14px;">变动前内容：{{ item.ALT_BE }}</div>
                <div style="margin: 10px 20px;font-size: 14px;">变动后内容：{{ item.ALT_AF }}</div>
          </van-step>
        </van-steps>
      </div>
      <div v-else align="center">
        <img src="@/assets/images/nodata.png" style="width: 40%;margin-top: 137px" />
      </div>
  </div>
</template>

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

/**
 * @Description 工商-历史变更
 * @Author JiangTao
 * @Date 2022-02-10 上午 11:58
 */
@Component({
  name: "LSBGView",
  components: { TitleBar },
})
export default class LSBGView extends Vue {
  title = "工商-历史变更"; // 页面标题
  baseInfoHistoryList = [
              //             {ALT_DATE:'2020', ALT_ITEM:'123',ALT_BE:'嗖地哦',ALT_AF:'sjaoo'},
              // {ALT_DATE:'2020', ALT_ITEM:'123',ALT_BE:'嗖地哦',ALT_AF:'sjaoo'},
                        ];
  nodata = false; // 是否有数据
  onClick() {

  }
  mounted() {
   this.selectBaseInfo()
  }
  //基本信息变动历史
  selectBaseInfo() {
    let 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.baseInfoHistoryList = res.ALTER_INFO;
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
}
</script>

<style scoped>
.slotImg {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #FF574C;
}
::v-deep .van-index-bar {
  margin-left: 30px;
}
::v-deep .van-step__line {
  background-color: #FF574C !important;
}

</style>