<template>
  <div class="d-page pers-main-view">
    <van-tabs @change="change" line-width="90px" color="#FF574C" title-active-color="#FF574C" v-model="active"
              swipeable>
      <van-tab v-for="(item, index) of titles" :key="index" :title="item.name">
        <!--个人客户列表-->
        <div class="wh-100">
          <van-form class="d-form-container w-100 pt-4" :submit-on-enter="false">
            <mobile-input label-width="10px" :reset="resetvalue" input-align="left" name="custName" v-model="custName"
                          placeholder="客户名称" size="small" />
            <d-select label="客户性别" placeholder="请选择" :value="sex" border="true" v-model="sex" sfield="sex"
                      size="small"></d-select>
            <div v-if="active == 0" class="label">
              <div @click="payroll_customers" :style="pc">消费</div>
              <div @click="youyidai_customers" :style="yc">优易贷</div>
              <div @click="mortgage_customers" :style="mc">住房按揭</div>
            </div>
            <div v-if="active == 1" class="label">
              <div @click="suiyifen_customers" :style="sc">随意分</div>
            </div>
            <div style="display: flex;justify-content: space-evenly;align-items: self-start">
              <van-button color="#FF574C" type="primary" @click="reset" plain style="width: 70px;height: 34px"
                          size="small">重置
              </van-button>
              <van-button color="#FF574C" type="primary" @keyup.enter="screen" @click="screen"
                          style="width: 70px;height: 34px" size="small">查询
              </van-button>
            </div>
          </van-form>
          <!--          <div>-->
          <!--            <base-list class="d-list-df" :data="CustomerList" finishedText="没有更多了" errorText="请求失败，点击重新加载" :pageLines="pageSize" @onLoad="onLoad" @refresh="onRefresh">-->
          <!--              <template v-for="(item, index) in CustomerList">-->
          <!--                <div class="customer-bottom-list" @click="onClientInfo_personal(item)" :key="index">-->
          <!--                  <div class="customer-bottom-list-top">-->
          <!--                    <div>-->
          <!--                      <svg v-if="item.SEX ? item.SEX == '男' : true" class="icon" aria-hidden="true">-->
          <!--                        <use xlink:href="#icon-nanxing-gerentouxiangxpx"></use>-->
          <!--                      </svg>-->
          <!--                      <svg v-if="item.SEX ? item.SEX == '女' : false" class="icon" aria-hidden="true">-->
          <!--                        <use xlink:href="#icon-nvxing-gerentouxiangxpx"></use>-->
          <!--                      </svg>-->
          <!--                    </div>-->
          <!--                    <div>{{ item.CUSTOMERNAME }}</div>-->
          <!--                    <div>-->
          <!--                      <div v-if="item.sCUSTOMERTYPE && item.sCUSTOMERTYPE != ''">{{ item.sCUSTOMERTYPE }}</div>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <!--                  <div class="customer-bottom-list-bottom">-->
          <!--                    <div>{{ getAge(item.CERTID) }}岁</div>-->
          <!--                    <div>-->
          <!--                      <div>身份证号：</div>-->
          <!--                      <div>{{ getCertId(item.CERTID) }}</div>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <!--                </div>-->
          <!--              </template>-->
          <!--            </base-list>-->
          <!--          </div>-->
          <div class="Managementdata d-flex flex-column">
            <scroller-view v-if="nodata" v-calculate-height :pulldown="pulldown" :pullup="pullup"
                           :refresh-data="onrefreshdata" :load-data="onloaddata">
              <div v-for="(item, index) in CustomerList" :key="index" class="customer-bottom-list"
                   @click="onClientInfo_personal(item)">
                <div class="customer-bottom-list-top">
                  <div>
                    <svg v-if="item.SEX ? item.SEX == '男' : true" class="icon" aria-hidden="true">
                      <use xlink:href="#icon-nanxing-gerentouxiangxpx"></use>
                    </svg>
                    <svg v-if="item.SEX ? item.SEX == '女' : false" class="icon" aria-hidden="true">
                      <use xlink:href="#icon-nvxing-gerentouxiangxpx"></use>
                    </svg>
                  </div>
                  <div>{{ item.CUSTOMERNAME }}</div>
                  <div>
                    <!--                  不展示‘个人客户‘这几个字-->
                    <!--                  <div v-if="item.sCUSTOMERTYPE && item.sCUSTOMERTYPE != ''">{{ item.sCUSTOMERTYPE }}</div>-->
                    <div v-if="item.ZBUSINESSSUM && item.ZBUSINESSSUM > 0 && active == 0">住房按揭客户</div>
                    <div v-if="item.YBUSINESSSUM && item.YBUSINESSSUM > 0">优易贷客户</div>
                    <div v-if="item.ZBUSINESSSUM && item.ZBUSINESSSUM > 0 && active == 1">随意分客户</div>
                    <div v-if="item.INDNATURE && item.INDNATURE == '2'">小微企业主</div>
                  </div>
                </div>
                <div class="customer-bottom-list-bottom">
                  <div>{{ getAge(item.BIRTHDAY) }}岁</div>
                  <div>
                    <div>身份证号：</div>
                    <div>{{ getCertId(item.CERTID) }}</div>
                  </div>
                </div>
              </div>
            </scroller-view>
          </div>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import DataDics from "@/services/dict.service.ts";
import { Tab, Tabs } from "vant";
import { getText } from "@/stores";

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 客户列表
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:50
 */
@Component({
  name: "PersonalMgtView"
})
export default class PersonalMgtView extends Vue {
  active: any = 0;

  src = require("../../assets/svg/red-subscript.svg");
  s = {
    backgroundColor: "#fff4f6",
    border: "1px solid #fd5065",
    color: "#fd5065",
    backgroundImage: `url("${this.src}")`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "right bottom"
  };
  titles = [
    { name: "个贷客户", bsno: "1" },
    { name: "网贷客户", bsno: "2" }
  ];
  value = "";
  resetvalue = false;
  // 筛选条件
  custName = "";
  custType = "";
  sex = "";
  displayValue = "";
  custTypes: any = [];
  custStates: any = [];

  CustomerList: any = [];
  id = "";
  uname = "";
  pageNo = 1;
  pageSize = 10; //每页的数量
  pullup = true;
  pulldown = true;
  nodata = true;
  userType = ""; //客户类型，只有一个

  //个人
  //代发工资客户
  pc: any = {};
  //优易贷客户
  yc: any = {};
  //住房按揭客户
  mc: any = {};
  //随意分
  sc: any = {};
  IF: any;

  //消费
  payroll_customers() {
    if (this.pc == this.s) {
      this.pc = {};
      this.custType = "";
    } else {
      this.custType = "0";
      this.pc = this.s;
      this.yc = {};
      this.mc = {};
    }
  }

  //优易贷
  youyidai_customers() {
    if (this.yc == this.s) {
      this.yc = {};
      this.custType = "";
    } else {
      this.custType = "1";
      this.yc = this.s;
      this.mc = {};
      this.pc = {};
    }
  }

  //住房按揭
  mortgage_customers() {
    if (this.mc == this.s) {
      this.mc = {};
      this.custType = "";
    } else {
      this.custType = "2";
      this.mc = this.s;
      this.pc = {};
      this.yc = {};
    }
  }

  //随意分
  suiyifen_customers() {
    if (this.sc == this.s) {
      this.sc = {};
      this.custType = "";
    } else {
      this.custType = "1";
      this.sc = this.s;
    }
  }

  gender = false;

  activated() {
    this.loadCustomList();
  }

  mounted() {
    this.loadCustomList();
  }

  //上拉加载
  onloaddata() {
    this.pageNo = Math.ceil(this.CustomerList.length / 10) + 1;
    if (this.active == 0) {
      return this.loadCustomList(this.pageNo);
    } else if (this.active == 1) {
      return this.selectPersonalCustInfo(this.pageNo);
    }
  }

  /**
   * @Description 下拉刷新
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:14
   */
  onrefreshdata() {
    if (this.active == 0) {
      return this.loadCustomList();
    } else if (this.active == 1) {
      return this.selectPersonalCustInfo();
    }
  }

  //数据加载
  onLoad(pageNo: number, list: any) {
    this.pageNo = Math.ceil(this.CustomerList.length / 10) + 1;
    if (this.active == 0) {
      this.loadCustomList(this.pageNo).then(() => {
        list.onStoreLoad();
      });
    } else if (this.active == 1) {
      this.selectPersonalCustInfo(this.pageNo).then(() => {
        list.onStoreLoad();
      });
    }
  }

  //下拉刷新处理
  onRefresh(list: any) {
    if (this.active == 0) {
      return this.loadCustomList().then(() => {
        list.refreshing = false;
      });
    } else if (this.active == 1) {
      return this.selectPersonalCustInfo().then(() => {
        list.refreshing = false;
      });
    }
  }

  /**
   * @Description 重置
   * @Author JiangTao
   * @Date 2022-01-17 下午 07:36
   */
  reset() {
    this.sex = "";
    this.custName = "";

    this.resetvalue = true;
    this.custType = "";
    if (this.active == 0) {
      this.mc = {};
      this.pc = {};
      this.yc = {};
      this.loadCustomList(1).then(() => {
        this.resetvalue = false;
      });
    } else if (this.active == 1) {
      this.sc = {};
      this.selectPersonalCustInfo(1).then(() => {
        this.resetvalue = false;
      });
    }

  }

  /**
   * @Description 筛选
   * @Author JiangTao
   * @Date 2022-01-17 下午 07:36
   */
  screen() {
    if (this.sex == "0") {
      this.sex = "";
    }
    if (this.active == 0) {
      this.loadCustomList(1);
    } else if (this.active == 1) {
      this.selectPersonalCustInfo(1);
    }
  }

  /**
   * @Description 标签切换
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:02
   */
  change() {
    console.log("-=-=-=-============");
    this.reset();
    this.pageNo = 1;
    this.custType = "";
    this.CustomerList = [];
    if (this.active == 0) {
      this.pc = {};
      this.yc = {};
      this.mc = {};
      this.loadCustomList(1);
    } else if (this.active == 1) {
      this.sc = {};
      this.selectPersonalCustInfo(1);
    }
  }

  /**
   * @Description 网贷客户列表
   * @Author JiangTao
   * @Date 2022-01-17 下午 06:08
   */
  selectPersonalCustInfo(pageNo = 1) {
    const param = {
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      CUSTOMERNAME: this.custName,
      CXTYPE: "1", //1为查询用户列表
      SEX: this.sex,
      BYTEFLGE: this.custType,
      tc: nettyApi.TRADE_CODE.selectNetCustList
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.CustomerList = res.CustomerInfoArray;
        } else {
          this.CustomerList = this.CustomerList.concat(res.CustomerInfoArray);
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (this.CustomerList.length < 10) {
        // 如果小于10条，说明没有更多数据了,去掉加载更多
        this.pullup = false;
      } else {
        //如果等于10条那么就保留加载更多
        this.pullup = true;
      }
    });
  }

  /**
   * @Description 个人客户列表
   * @Author JiangTao
   * @Date 2022-01-13 上午 10:54
   */
  loadCustomList(pageNo = 1) {
    const param = {
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      CUSTOMERNAME: this.custName,
      CXTYPE: "1", //1为查询用户列表
      SEX: this.sex,
      BYTEFLGE: this.custType,
      tc: nettyApi.TRADE_CODE.selectPersonalList
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.CustomerList = res.CustomerInfoArray;
        } else {
          this.CustomerList = this.CustomerList.concat(res.CustomerInfoArray);
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (this.CustomerList && this.CustomerList.length < 10) {
        // 如果小于10条，说明没有更多数据了,去掉加载更多
        this.pullup = false;
      } else {
        //如果等于10条那么就保留加载更多
        this.pullup = true;
      }
    });
  }

  /**
   * @Description 修改年龄计算方法
   * @Author JiangTao
   * @Date 2022-01-13 上午 11:15
   */
  // getAge(item: any) {
  //   let i = item.substring(6, 10);
  //   let age = new Date().getFullYear() - i;
  //   return age;
  // }
  getAge(item: any) {
    var temp = item; //获取客户生日
    let res = -1;
    if (temp != "") {
      temp = temp.split("/").join("");
      var now = new Date();
      res = now.getFullYear() - temp.substring(0, 4); //52
      if ((now.getMonth() + 1) == temp.substring(4, 6) && now.getDate < temp.substring(6, 8)) {
        res -= 1;
      } else if ((now.getMonth() + 1) < temp.substring(4, 6)) {
        res -= 1;
      }
    }
    return res;
  }

  /**
   * @Description 对客户身份证号做加密处理
   * @Author JiangTao
   * @Date 2022-01-13 上午 11:42
   */
  getCertId(item: any) {
    let CERTID = item.substring(0, 4) + "**********" + item.substring(14);
    return CERTID;
  }

  onClientInfo_personal(item: any) {
    this.$store.commit("setEmpty");
    this.$store.commit("setCusInfo", item);
    this.$router.push({
      path: "/PersonalDetails",
      query: {
        active: this.active,
        CUSTOMERID: item.CUSTOMERID
      }
    });
  }
}
</script>

<style scoped lang="scss">
.pers-main-view {
  padding: 0 32px;
}

.d-list-df {
  height: calc(100vh - 180px);
}

.d-form-container {
  display: grid;
  grid-template-columns: 1fr 1.3fr 2fr 1fr;
}

::v-deep .d-form-field .van-field__label {
  width: 5em;
}

::v-deep .d-form-field {
}

.customer {
  width: 100%;
  background-color: white;
  padding-top: 2%;
  padding-left: 3%;
}

.customer-top {
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}

.name {
  width: 90%;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-left: 5%;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.d-add_user {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.add_logo {
  width: 95px;
  height: 95px;
  background-image: url("../../assets/svg/red-shadow-round.svg");
  background-repeat: no-repeat;
}

.add_inside {
  width: 44px;
  margin: 0 auto;
  padding-top: 18px;
}

.add {
  color: white;
  font-size: 16px;
}

.customer-bottom-list {
  border-radius: 10px;
  background-color: #f8fdff;
  box-shadow: 0 0 6px #d7d7d7;
  margin-bottom: 16px;
  padding-bottom: 15px;
  padding-top: 9px;
  position: relative;
}

.customer-bottom-list-top > div:nth-child(1) svg {
  width: 40px;
  height: 40px;
}

.customer-bottom-list-top > div:nth-child(2) {
  font-size: 115%;
  font-weight: bold;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  margin-left: 0.8%;
}

.customer-bottom-list-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 16px;
}

.customer-bottom-list-top > div:nth-child(3) {
  width: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-around;
  grid-column-gap: 4px;
  align-items: center;
  margin-left: 1%;
}

.customer-bottom-list-top > div:nth-child(3) div {
  color: #ff6e0d;
  background-color: rgba(255, 247, 204, 1);
  font-size: 80%;
  padding-top: 2%;
  padding-bottom: 1.5%;
  border-radius: 2px;
  text-align: center;
  width: 100%;
}

.customer-bottom-list-bottom {
  width: 60%;
  display: flex;
  padding-left: 35px;
  justify-content: space-around;
  align-items: flex-start;
}

.customer-bottom-list-bottom > div {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.customer-bottom-list-bottom > div > div:nth-child(1) {
  white-space: nowrap;
}

.customer-bottom-list-bottom > div:nth-child(1) {
  width: 30%;
}

.contact-person {
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-person > div:nth-child(1) {
  margin-right: 10px;
  font-family: "Arial Normal", "Arial";
}

.label-type {
  width: 18%;

  border: 1px solid #cccccc;
  border-radius: 5px;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
  margin-left: 1%;
}

::v-deep .scroller {
  padding: 1%;
}

.label {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.label div {
  width: 25%;
  font-size: 13px;
  padding-top: 1.1%;
  padding-bottom: 0.7%;
  border-radius: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}

.backgroundlogo {
  position: absolute;
  width: 60px;
  top: 25%;
  right: 20%;
}

.backgroundlogo img {
  width: 100%;
  opacity: 0.5;
}

::v-deep .van-tabs--line .van-tabs__wrap {
  width: 20%;
}

::v-deep .van-tab--active {
  font-weight: bold;
}

::v-deep .van-tab {
  font-size: 16px;
}
</style>