<template>
  <!--对公客户列表-->
    <div class="content">
<!--      <van-form class="search">-->
<!--        <mobile-input label="申请编号" :reset="resetvalue" border="true" name="cus_name" v-model="pk_value" placeholder="请输入" size="small"></mobile-input>-->
<!--        <mobile-input label="客户号" :reset="resetvalue" border="true" name="cus_name" v-model="cus_id" placeholder="请输入" size="small"></mobile-input>-->
<!--        <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" @click="selectProcess(1)" style="width: 70px;height: 34px" size="small">查询</van-button>-->
<!--        </div>-->
<!--      </van-form>-->
      <div class="search">
        <d-select label="客户类型:" :reset="resetvalue" input-align="left" border="true" name="custNam" v-model="appl_type" placeholder="请选择客户类型" sfield="PROCESS_TYPE" size="small"></d-select>
        <mobile-input label="搜索:" :reset="resetvalue" border="true" name="custNam" v-model="pk_value" placeholder="请输入申请编号" size="small"></mobile-input>
        <mobile-input :reset="resetvalue" border="true" name="custNam" v-model="cus_id" placeholder="请输入客户号" size="small"></mobile-input>
        <mobile-input :reset="resetvalue" border="true" name="custNam" v-model="cus_name" placeholder="请输入客户名称" size="small"></mobile-input>
        <div
          style="
          display: flex;
          justify-content: space-evenly;
          align-items: self-start;
          margin-left: 10px;
        "
        >
          <van-button
            color="#FF574C"
            type="primary"
            @click="reset"
            plain
            style="width: 70px; height: 34px"
            size="small"
          >重置</van-button
          >
          <van-button
            color="#FF574C"
            type="primary"
            @click="selectProcess(1)"
            style="width: 70px; height: 34px; margin-left: 20px"
            size="small"
          >搜索</van-button
          >
        </div>
      </div>

      <scroller-view class="d-page" v-if="nodata" v-calculate-height :pulldown="pulldown" :pullup="pullup" :refresh-data="selectProcess" :load-data="onloaddata">
        <div v-for="(item, index) in list" :key="index" class="customer-bottom-list" @click="onClientInfo(item)">
          <div class="customer-bottom-list-top">
            <div>
              <svg class="icon" aria-hidden="true">
                <!--暂时方案，右侧图标无法传达到内网-->
                <use xlink:href="#icon-gongsimingcheng"></use>
              </svg>
            </div>
            <div>{{ item.cus_name }}</div>
            <span class="point-box" style="color: orange"
            ><div style="background: orange" class="point-rew"></div>
              &nbsp;{{ item.appl_type_cnName }}</span
            >
          </div>
          <div class="customer-bottom-list-bottom">
            <div>
              <div>申请编号：</div>
              <div>{{ item.pk_value }}</div>
            </div>
            <div>
              <div>客户号：</div>
              <div>{{ item.cus_id }}</div>
            </div>
            <div>
              <div>申请金额：</div>
              <div>{{ item.amt }}</div>
            </div>
          </div>
        </div>
      </scroller-view>
    </div>

    <!--新增客户-->
    <!--    <div class="d-add_user">-->
    <!--      <a @click="addUser">-->
    <!--        <div class="add_logo">-->
    <!--          <div class="add_inside">-->
    <!--            <span class="add">新增</span><br />-->
    <!--            <span class="add">客户</span>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </a>-->
    <!--    </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 DCalendar from "@/components/general/form/DCalendar.vue";
/**
 * @Description 流程列表
 * @Author Kangzhirui
 * @Date 2022-3-3 下午 21.48
 */
@Component({
  name: "ProcessQuery",
  components: {DCalendar},
})
export default class ProcessQuery extends Vue {
  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",
  };
  list: any = [];
  // 筛选条件
  cus_name = "";
  custType = "";
  custState = "";
  resetvalue = false;
  appl_type_cnName = '';
  appl_type = '';

  pageNo = 1;
  pullup = true;
  pulldown = true;
  nodata = true;
  IF: any;
  //流程查询
  pk_value = '';
  cus_id = '';

  mounted() {
    this.reset();
    this.selectProcess();
  }
  /**
   * @Description 重置
   * @Author Kangzhirui
   * @Date 2022-3-3 下午 21.48
   */
  reset() {
    this.cus_name = "";
    this.resetvalue = true;
    this.custType = "";
    this.custState = "";
    this.appl_type= "";
    this.pk_value = ""; //申请编号清空
    this.cus_id = "";   //客户号清空
    this.selectProcess().then(() => {
      this.resetvalue = false;
    });
  }
  //上拉加载
  onloaddata() {
    this.pageNo = Math.ceil(this.list.length / 10) + 1;
    return this.selectProcess(this.pageNo);
  }
  /**
   * @Description 对公流程列表查询
   * @Author Kangzhirui
   * @Date 2022-3-3 下午 21.48
   */
  selectProcess(pageNo = 1) {
    this.pullup = true;
    this.nodata = true;
    this.pulldown = true;
    const param = {
      cus_name: this.cus_name ,
      cus_type: this.custType ,
      cus_status: this.custState ,
      appl_type: this.appl_type,
      // user_code: sessionStorage.getItem('user_code'),
      //流程查询
      pk_value: this.pk_value, //业务申请号
      cus_id: this.cus_id,	//客户号
      maxLine: "10",//每页最大数据
      targetPage: pageNo,//目标页
      tc: nettyApi.TRADE_CODE.selectProcess
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.list = res.iCollWL__resultset;
        } else {
          this.list = this.list.concat(res.iCollWL__resultset);
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (res.iCollWL__resultset && res.iCollWL__resultset.length < 10) {
        this.pullup = false;
      }
      if (this.list.length == 0) {
        this.nodata = false;
        this.pulldown = false;
      }
    });
  }
  addUser() {
    this.$router.push({
      path: "/customer-mgt/AddUserView",
    });
  }

  onClientInfo(item: any) {
    this.$store.commit("setEmpty");
    this.$store.commit("setCusInfo", item);
    this.$router.push({
      path: "/ProcessView",
    });
  }
}
</script>

<style scoped lang="scss">
.d-page {
  padding: 10px 20px;
}
.d-form-container {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: 70px;
  border: 1px solid #e1e2e3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
::v-deep .d-form-field .van-field__label {
  display: flex;
  align-items: center;
  color: #212529;
  margin-left: 10px;
  margin-right: 0px;
  width: auto;
}
.d-form-field {
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
}
::v-deep .van-field__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 110px;
  margin-right: 7px;
}
.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-subscript.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: 28%;
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 {
display: flex;
padding-left: 4.5%;
justify-content: space-between;
align-items: flex-start;
}
.customer-bottom-list-bottom > div {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.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: 170%;
height: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.label div {
width: 35%;
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;
}
.search {
  position: relative;
  width: 100%;
  height: 70px;
  border: 1px solid #e1e2e3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.content {
  width: 100%;
}
.screenbutton {
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.point-box {
  width: 120px;
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}
.point-rew {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
::v-deep .van-popup--bottom.van-popup--round {
  z-index: 2102 !important;
}
::v-deep .van-overlay {
  z-index: 2101 !important;
}
</style>