<template>
  <div>
    <form action="/">
      <van-col span="24" class="bgBlue">
            <van-search
            v-model="searchstr"
            show-action
            placeholder="请输入姓名/电话"
            @search="onSearch"
            @cancel="onCancel"
            class="bgBlue"
            />
            <div v-if="totalCount>0" class="textLeft">查询结果：共查询到{{totalCount}}条数据</div>
      </van-col>
    </form>

   
        <van-list
        v-model="loading"
        :finished="finished"
        loading-text="加载中..."
        finished-text="我是有底线的~"
        @load="onLoad"
        >
        <van-cell
            v-for="item in listdata"
            :key="item.clientId"
            :to="'/clientdetail?id='+item.clientId+'&name='+item.name"
        >
            <template #title>
            <van-col span="24" class="title1">{{item.name}}</van-col>
            <van-col span="24">
                <van-row>
                    <van-col span="9" class="title2">业务员：</van-col>
                    <van-col span="15" class="title2">{{item.cUserName}}</van-col>
                </van-row>
                </van-col>
            </template>
            <template #default>
                <van-col span="24" class="star" > 
                    <span v-for="i in item.intention" :key="i+'x'" class="size">★</span>
                    <span v-for="i in 5-item.intention" :key="i" class="size">☆</span>
                </van-col>           
            </template>
        </van-cell>
        </van-list>
   
  </div>
</template>

<script>
import { GetSaClientList } from "@/common/api/loginApi.js";
import Decimal from "decimal.js";
export default {
  name: "login",
  data() {
    return {
      listdata: [], 
      loading: false,
      finished: false,
      isLoading: false,
      page:1,
      searchstr:'' ,  //搜索串
      totalCount:0
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.searchstr=this.$route.query.search;
    console.info('created search',this.searchstr);
  },
  methods: {
    GetSaClientList: function () {
      var that = this;
      let name='';
      let phone='';
      if(this.$util.isInt(this.searchstr)){
          phone=this.searchstr;
      }
      else{
          name=this.searchstr;
      }
      let jsonQuery={name:name,phone:phone};
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        page: that.page,
        pageCount: "10",
        jsonQuery: JSON.stringify(jsonQuery),
        sortby: "",
      };
      console.info("data", data);
      GetSaClientList(data).then((res) => {
        console.info("GetSaClientList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        if(res.data!=null&&res.data.listdata.length>0){
          that.loading=false;
          that.totalCount=res.data.page.totalCount;
          res.data.listdata.forEach(function (item, index, array) {
            that.listdata.push(item);
            
            if(res.data.listdata.length-1==index){
              that.page++;
              console.info('that.page:',that.page);
              if(res.data.page.totalPages==that.page-1){
                  
                  that.finished=true;
                  console.info('that.finished1:',that.finished);
              }
            }
          });
          console.info('listdata',that.listdata);
          if(res.data==null||res.data.listdata==null||res.data.listdata.length==0){
              
              that.finished = true;
              console.info('that.finished2:',that.finished);
          }
          
        }
         else{
          that.finished=true;
          console.info('that.finished3:',that.finished);
          that.page=1;
          that.totalCount=0;
        }
      });
    },
    // 列表加载
    onLoad () {
      setTimeout(() => {
        this.GetSaClientList()
        this.loading = true
      }, 500)
    },
     onSearch(val) {     //搜索事件
      console.info('onSearch',val);
      this.listdata=[];
      this.page=1;
      this.finished=false;
      this.GetSaClientList();
    },
    onCancel() {      //搜索的取消事件
      console.info('onCancel');
      this.$router.push('/getsaclientsummary');
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
   color:#0f0fa7;
    font-size:16px;
    font-weight:900;
    text-align: left;
    margin-left:15px;
    height:35px;
}
.star{
    height:35px;
}
.size{
    font-size:16px;
    color:orange;
}
.title2{
    color:#999;
    
}
.bgBlue{
    padding-top:15px;
    padding-bottom: 15px;
}
.textLeft{
    padding-left:15px;
    font-size:15px;
    font-weight: 100;
}
</style>
