<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title" @clickLef="onClick" @click-right="onClickRight">
      <van-icon slot="left" name="cross" size="24" />
      <van-icon slot="right" size="20" style="line-height: 60px">试算</van-icon>
    </title-bar>
    <div class="h-scroller flex-1-dhc">
      <div class="GSname">公司名称</div>
      <div class="d-form-container">
        <mobile-input label="客户所属集团" border="true" v-model="GROUP_NAME" placeholder="请输入客户名称" size="small"></mobile-input>
        <div style="display: flex; justify-content: space-evenly; align-items: center">
          <div class="Marketing-title">是否精准营销客户</div>
          <div class="Marketing-flag">
            <div :style="bnSfXd_yes_style" @click="bnSfXd_yes">是</div>
            <div :style="bnSfXd_no_style" @click="bnSfXd_no">否</div>
          </div>
        </div>
        <d-select label="评级情况" :sfield="STD_ZB_CREDIT_GRADE" border="true" placeholder="请选择" v-model="CUST_LEVEL" size="small"></d-select>
      </div>
      <div>
        <van-tabs v-model="active">
          <van-tab title="贷款">
            <div class="d-flex justify-content-center flex-column" style="border-top: 10px solid #F2F2F2;">
              <div class="add-btn-cls" @click="addItem('1')">+新增</div>
              <div class="loan-tab-class d-flex flex-column">
                <div class="content-item-mian" v-for="(item, index) in loanListData" :key="index">
                  <div class="w-100 d-flex flex-row justify-content-between pl-2 pr-2">
                    <div>贷款{{ index + 1 }}</div>
                    <div>
                      <span @click="deleteItemData(index, '1')" class="icon iconfont icon-jianshao" style="color: #FD5065; font-size: 20px;"><span stlye="color: #999999;"> 删除</span></span>
                    </div>
                  </div>
                  <div class="item-form-class">
                    <d-select
                      class="filed-class"
                      label="拟贷款期限类型"
                      :rules="[{ required: true, message: '请选择类型' }]"
                      placeholder="请选择"
                      border="true"
                      v-model="item.LOAN_TERM_TYPE"
                      sfield="cerType"
                      size="small"
                    ></d-select>
                    <mobile-input
                      class="filed-class"
                      label="拟贷款金额"
                      :rules="[{ required: true, message: '请输入金额' }]"
                      :border="true"
                      input-align="left"
                      v-model="item.LOAN_AMT"
                      size="small"
                    />
                    <mobile-input
                      class="filed-class"
                      label="拟贷款利率(%)"
                      :rules="[{ required: true, message: '请输入利率' }]"
                      :border="true"
                      input-align="left"
                      v-model="item.LOAN_RATE"
                      size="small"
                    />
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="存款">
            <div class="d-flex justify-content-center flex-column" style="border-top: 10px solid #F2F2F2;">
              <div class="add-btn-cls" @click="addItem('2')">+新增</div>
              <div class="loan-tab-class d-flex flex-column">
                <div class="content-item-mian" v-for="(item, index) in depositData" :key="index">
                  <div class="w-100 d-flex flex-row justify-content-between pl-2 pr-2">
                    <div>存款{{ index + 1 }}</div>
                    <div>
                      <span @click="deleteItemData(index, '2')" class="icon iconfont icon-jianshao" style="color: #FD5065; font-size: 20px;"><span stlye="color: #999999;"> 删除</span></span>
                    </div>
                  </div>
                  <div class="item-form-class">
                    <d-select
                      class="filed-class"
                      label="拟存款期限类型"
                      :rules="[{ required: true, message: '请选择类型' }]"
                      placeholder="请选择"
                      border="true"
                      v-model="item.LOAN_TERM_TYPE"
                      sfield="cerType"
                      size="small"
                    ></d-select>
                    <mobile-input
                      class="filed-class"
                      label="拟存款金额"
                      :rules="[{ required: true, message: '请输入金额' }]"
                      :border="true"
                      input-align="left"
                      v-model="item.LOAN_AMT"
                      size="small"
                    />
                    <mobile-input
                      class="filed-class"
                      label="拟存款利率(%)"
                      :rules="[{ required: true, message: '请输入利率' }]"
                      :border="true"
                      input-align="left"
                      v-model="item.LOAN_RATE"
                      size="small"
                    />
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Tab, Tabs } from "vant";
import MobileInput from "@/components/general/form/MobileInput.vue";
import DSelect from "@/components/general/form/DSelect.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import Public from "@/public/ts/Public";

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 综合收益率试算
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:12
 */
@Component({
  name: "TrialEntry",
  components: {
    MobileInput,
    DSelect
  },
})
export default class TrialEntry extends Vue {
  title = "综合收益率试算"; // 页面标题
  active = "0";
  GROUP_NAME = ''; //名称
  JZ_FLG = '1'; //是否精准营销客户
  CUST_LEVEL = ''; //客户评级
  bnSfXd_yes_style = {};
  bnSfXd_no_style = {};
  loanListData:any[] = [];
  depositData:any[] = [];
  STD_ZB_CREDIT_GRADE:string = 'STD_ZB_CREDIT_GRADE'; //评级


  /**
   * @description:  点击退回按钮
   * @author LiShenghui
   * @date 2022/2/19 16:21
   */
  onClick() {
    this.$router.go(-1);
  }
  mounted() {}

  /**
   * @description:  选择精准客户
   * @author LiShenghui
   * @date 2022/2/19 16:21
   */
  bnSfXd_yes() {
    this.JZ_FLG = '1';
    this.bnSfXd_yes_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.bnSfXd_no_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  }

  /**
   * @description:  选择非精准客户
   * @author LiShenghui
   * @date 2022/2/19 16:21
   */
  bnSfXd_no() {
    this.JZ_FLG = '2';
    this.bnSfXd_no_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.bnSfXd_yes_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  }
  /**
   * @description:  新增贷款或者存款信息
   * @author LiShenghui
   * @date 2022/2/19 16:18
   */
  addItem(bsno:string) {
    // 贷款
    if (bsno == "1") {
      let loan = {
        ifSave: 0, //是否存储
        LOAN_TERM_TYPE: '', //拟贷款期类型
        LOAN_AMT: '', //拟贷款金额
        LOAN_RATE: '' //拟贷款利率
      };
      this.loanListData.push(loan);
    } else if (bsno == "2") {
      let deposit = {
        ifSave: 0, //是否存储
        DEP_TERM_TYPE: '', //拟存款期限类型
        DEP_AMT: '', //拟存款金额
        DEP_RATE: '' //拟存款利率
      };
      this.depositData.push(deposit);
    }
  }
  /**
   * 删除保存数据
   */
  deleteItemData(index:any, bsno:string) {
    if (bsno == "1") {
      //贷款
      this.loanListData.splice(index, 1);
    }
    if (bsno == "2") {
      //存款
      this.depositData.splice(index, 1);
    }
    NativeUI.toast('删除成功');
  }
  /**
   * @description:  试算
   * @author LiShenghui
   * @date 2022/2/19 17:47
   */
  onClickRight() {
    let param = {
      GROUP_NAME: this.GROUP_NAME, //集团名称
      JZ_FLG: this.JZ_FLG, //是否精准营销客户
      CUST_LEVEL: this.CUST_LEVEL, //客户评级
      NAME_CN: this.$store.getters.getCusInfo.cus_name, //客户名称
      CUST_NO: this.$store.getters.getCusInfo.cus_id, //客户号
      zhsyClmInputLoanIColl: this.loanListData, //贷款
      zhsyDlmInputDepIColl: this.depositData, //存款
      tc: nettyApi.TRADE_CODE.selectSSLR
    };
    NativeUI.showWaiting('正在查询...');
    this.$IF.transferDataInter(nettyApi.commonRq, param).then((res:any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        NativeUI.toast("测算录入成功，请次日查询测算结果");
        this.$router.go(-1);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
}
</script>

<style scoped lang="scss">
.h-scroller {
  padding: 20px 0px;
}
.d-form-container {
  margin: 20px 0;
  padding: 0px 15px;
  display: grid;
  grid-template-columns: 6fr 4fr 4fr;
}
::v-deep .d-form-container > div:nth-child(1) > div > div:nth-child(1) {
  width: 25% !important;
}
span {
  color: #999999;
  font-size: 16px;
}
::v-deep .van-cell__title span {
  font-size: 16px !important;
}
.GSname {
  padding: 0px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
::v-deep .d-form-field {
  padding-bottom: 0;
}
.Marketing-title {
  font-size: 16px;
  color: #999999;
}
.Marketing-flag {
  display: flex;
  justify-content: flex-end;
}
.Marketing-flag div {
  width: 60px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
}
.Marketing-flag > div:nth-child(1) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.Marketing-flag > div:nth-child(2) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.add-btn-cls {
  width: 50%;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border: 1px solid rgba(215, 215, 215, 1);
  color: #333333;
  margin: 10px auto;
  border-radius: 5px;
}
.content-item-mian {
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 5px;
  width: 90%;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
  margin: 10px auto;
}
.item-form-class {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  ::v-deep .van-field__label {
    width: 35%
  }
}
.filed-class {
  width: 45%;
  padding: 10px 0px;
}
.loan-tab-class {
  height: calc(100vh - 315px);
  overflow-y: auto;
}
::v-deep .van-field__label {
  display: flex;
  align-items: center;
  width: 30%;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 40%;
  height: 40px;
  font-weight: 700;
}
::v-deep .van-tab--active {
  border-bottom: 3px solid #ee0a24;
  font-weight: bold;
  color: #ee0a24;
}
::v-deep .van-tabs__line {
  height: 0;
  background-color: white;
}
::v-deep .van-tab {
  font-size: 16px;
  line-height: 40px;
}
</style>