<template>
  <div class="w-100 h-100">
    <title-bar title="担保视图" @clickLef="onClick" line-height="0" line-width="80px" color="#FF574C" title-active-color="#FF574C">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <van-tabs class="guarTabCls" :active="active" @click="checkMod">
      <van-tab title="客户提供担保情况(信贷+个贷)">
        <tree-graph-cmp :data="treeData" :format="formatLabel" v-if="test == '1'"></tree-graph-cmp>
      </van-tab>
      <van-tab title="客户提供担保情况(征信)">
        <tree-graph-cmp :data="treeData" :format="formatLabel" v-if="test == '2'"></tree-graph-cmp>
      </van-tab>
      <van-tab title="客户在行内业务的担保情况">
        <tree-graph-cmp :data="treeData" :format="formatLabel" v-if="test == '3'"></tree-graph-cmp>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import TreeGraphCmp from '@/components/general/TreeGraphCmp.vue';
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import Public from "@/public/ts/Public";
/**
 * @Description 担保视图
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:15
 */
@Component({
  name: "GuaranteeView",
  components: {
    TitleBar,
    TreeGraphCmp
  },
})
export default class GuaranteeView extends Vue {
  pageTitle = ""; // 页面标题
  active = 0;
  test = "1";
  treeData:any = {};
  array:any = {
    name: this.$store.getters.getCusInfo.cus_name,
    children: []
  };
  onClick() {
    this.$router.back();
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
    this.active = 0;
    this.checkMod(0);
  }
  formatLabel(item:any) {
    if (item.flag == '1') {
      return item.labelValue;
    } else if (item.flag == '2') {
      return item.types;
    } else return;
  }

  //客户提供担保情况（个贷+信贷）
  getInfoa() {
    this.test = '1';
    const parm = {
      tc: nettyApi.TRADE_CODE.selectDBQK,
      cus_id: this.$store.getters.getCusInfo.cus_id
    };
    NativeUI.showWaiting('正在查询....');
    this.$IF.transferDataInter(nettyApi.commonRq, parm).then((res:any) => {
      NativeUI.closeWaiting();
      this.array.children = [];
      if (res.rc == '1') {
        if (res.cus_grt_list != '') {
          for (let obj of res.cus_grt_list) {
            let newobj:any = {};
            newobj.name = obj.borrower_name;
            newobj.labelValue = obj.gage_way_union_cn;
            newobj.labelShow = true;
            newobj.flag = '1';
            this.array.children.push(newobj);
            this.treeData = this.array;
          }
        } else {
          this.treeData = this.array;
        }
      } else {
        this.treeData = this.array;
        NativeUI.toast(res.msg);
      }
    });
  }
  //对公客户提供担保情况（征信）
  getInfob() {
    this.test = '2';
    const parm = {
      tc: nettyApi.TRADE_CODE.selectDBQKZX,
      cus_id: this.$store.getters.getCusInfo.cus_id
    };
    NativeUI.showWaiting('正在查询....');
    this.$IF.transferDataInter(nettyApi.commonRq, parm).then((res:any) => {
      NativeUI.closeWaiting();
      this.array.children = [];
      if (res.rc == '1') {
        if (res.grt_list != '') {
          for (let obj of res.grt_list) {
            let newObj:any = {};
            newObj.types = obj.eb05bd01;
            newObj.name = obj.eb05bj01;
            newObj.labelShow = true;
            newObj.flag = '2';
            this.array.children.push(newObj);
          }
          this.treeData = this.array;
        } else {
          this.treeData = this.array;
        }
      } else {
        this.treeData = this.array;
        NativeUI.toast(res.msg);
      }
    });
  }
  //对公客户行内业务担保情况
  getInfoc() {
    this.test = '3';
    const parm = {
      tc: nettyApi.TRADE_CODE.selectHNDBQK,
      cus_id: this.$store.getters.getCusInfo.cus_id
    };
    NativeUI.showWaiting('正在查询....');
    this.$IF.transferDataInter(nettyApi.commonRq, parm).then((res:any) => {
      NativeUI.closeWaiting();
      this.array.children = [];
      if (res.rc == '1') {
        if (res.cus_grt_list != '') {
          for (let obj of res.cus_grt_list) {
            let objNew:any = {};
            objNew.name = obj.guar_name;
            objNew.labelValue = obj.gage_way_union_cnName;
            objNew.flag = '1';
            // objNew.id = ;
            objNew.labelShow = true;
            this.array.children.push(objNew);
          }
          this.treeData = this.array;
        } else {
          this.treeData = this.array;
        }
      } else {
        this.treeData = this.array;
        NativeUI.toast(res.msg);
      }
    });
  }

  checkMod(index:any) {
    if (index == 0) {
      this.treeData = {};
      this.test = '1';
      this.getInfoa();
    } else if (index == 1) {
      this.test = '2';
      this.treeData = {};
      this.getInfob();
    } else if (index == 2) {
      this.treeData = {};
      this.test = '3';
      this.getInfoc();
    }
  }
}
</script>

<style scoped>
.guarTabCls {
  width: 100%;
}
::v-deep .van-tab{
  font-size: 20px;
  line-height: 60px;
}
::v-deep .van-cell__title,
::v-deep .van-field__label {
  display: flex;
  align-items: center;
  width: 60%;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 80%;
  height: 60px;
}
::v-deep .van-tab--active {
  border-bottom: 3px solid #FF574C;
  font-weight: bold;
  color: #FF574C;
}
::v-deep .van-tabs__line {
  height: 0;
  background-color: white;
}
</style>