<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">筛选客户</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      
    </van-nav-bar>
    <van-form @submit="onSubmit">
        <van-field
            v-model="name"            
            label="姓名"
            placeholder="请输入"
            input-align="right"
            label-class="title1"
        />
        <van-field
            v-model="phone"            
            label="电话"
            placeholder="请输入"
            input-align="right"
            label-class="title1"
        />
        <van-cell
        title="业务员"
        :value="salseUserCode"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showSalseUserCode = true"
      ></van-cell>
      <van-popup v-model="showSalseUserCode" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="salseUserCodeData"
          @cancel="showSalseUserCode = false"
          @confirm="onConfirmSalseUserCode"
        />
      </van-popup>
        <van-cell
        title="意向强度"
        :value="intentionName"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showIntention = true"
      ></van-cell>
      <van-popup v-model="showIntention" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          
          :columns="intentionData"
          @cancel="showIntention = false"
          @confirm="onConfirmIntention"
        />
      </van-popup>
      <van-cell
        title="购买状态"
        :value="saleState"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showSaleState = true"
      ></van-cell>
      <van-popup v-model="showSaleState" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
         
          :columns="saleStateData"
          @cancel="showSaleState = false"
          @confirm="onConfirmSaleState"
        />
      </van-popup>
       <van-cell
        title="登记日期起"
        :value="registerDateRange0"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showRegisterDateRange0 = true"
      ></van-cell>
      <van-popup v-model="showRegisterDateRange0" round position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
           v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showRegisterDateRange0 = false"
          @confirm="onConfirmRegisterDateRange0"
        />
      </van-popup>
       <van-cell
        title="登记日期止"
        :value="registerDateRange1"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showRegisterDateRange1 = true"
      ></van-cell>
      <van-popup v-model="showRegisterDateRange1" round position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
           v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showRegisterDateRange1 = false"
          @confirm="onConfirmRegisterDateRange1"
        />
      </van-popup> 
      <van-cell
        title="跟进日期起"
        :value="visitDateRange0"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showVisitDateRange0 = true"
      ></van-cell>
      <van-popup v-model="showVisitDateRange0" round position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
           v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showVisitDateRange0 = false"
          @confirm="onConfirmVisitDateRange0"
        />
      </van-popup>
       <van-cell
        title="跟进日期止"
        :value="visitDateRange1"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showVisitDateRange1 = true"
      ></van-cell>
      <van-popup v-model="showVisitDateRange1" round position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
           v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showVisitDateRange1 = false"
          @confirm="onConfirmVisitDateRange1"
        />
      </van-popup> 
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">查询</van-button>
        </div>
    </van-form>
   
  </div>
</template>

<script>
import { GetProjectUserList ,GetSaClientSummary,GetSaRoomList} from "@/common/api/loginApi.js";
export default {
  name: "login",
  data() {
    return {
      name:'',
      phone:'',
      salseUserCode:'',
      salseUserCodeData:[],
      showSalseUserCode:false,
      intention:'',
      intentionName:'',
      intentionData:[{id:0,text:'无意向'},{id:1,text:'☆'},{id:2,text:'☆☆'},{id:3,text:'☆☆☆'},{id:4,text:'☆☆☆☆'},{id:5,text:'☆☆☆☆☆'}],
      showIntention:false,
      saleState:'',
      saleStateData:[],
      showSaleState:false,
      registerDateRange0:'',
      showRegisterDateRange0:false,
      registerDateRange1:'',
      showRegisterDateRange1:false,
      visitDateRange0:'',
      showVisitDateRange0:false,
      visitDateRange1:'' ,
      showVisitDateRange1:false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1), 
      currentDate:new Date()
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.GetProjectUserList();
    this.GetSaClientSummary();
  },
  computed:{   //计算属性
    
   
  },
  methods: {
    //获业务员列表
    GetProjectUserList: function () {
      var that = this;
      var data = {
          userCode:that.$store.state.data.userCode ,
        projectId: that.$store.state.projectId       
      };
      console.info("data", data);
      GetProjectUserList(data).then((res) => {
        console.info("GetProjectUserList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        // res.data.forEach(function (item, index, array) {
        //   that.$set(that.buildingData, index, item);
        // });
       
      });
    },
    //购买状态
    GetSaClientSummary: function () {
      var that = this;
      var data = {
        userCode:that.$store.state.data.userCode ,
        projectId: that.$store.state.projectId      
      };
      console.info("data", data);
      GetSaClientSummary(data).then((res) => {
        console.info("GetSaClientSummary", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function (item, index, array) {
            if(item.visible==0){
                //that.$set(that.saleStateData, index, item);
                that.saleStateData.push(item.saleState);
            }
          
        });
       
      });
    },
    onConfirmSaleState:function(value,index){   //购买状态
        console.info("onConfirmSaleState", value);
      this.saleState = value;
      this.showSaleState = false;
    },
    onConfirmIntention:function(value,index){   //意向强度
        console.info("onConfirmIntention", value);
      this.intention = value.id;
      this.intentionName=value.text;
      console.info("intention", this.intention);
      this.showIntention = false;
    },
    onConfirmSalseUserCode:function(value,index){   //业务员
        console.info("onConfirmSalseUserCode", value);
        this.showSalseUserCode=false;
    },
   onConfirmRegisterDateRange0: function (value, index) {
      //登记日期起
      console.info("onConfirmRegisterDateRange0", value);
      this.registerDateRange0 = this.$util.getDate(value);
      this.showRegisterDateRange0 = false;
    },
    onConfirmRegisterDateRange1: function (value, index) {
      //登记日期止
      console.info("onConfirmRegisterDateRange1", value);
      this.registerDateRange1 = this.$util.getDate(value);
      this.showRegisterDateRange1 = false;
    },
    onConfirmVisitDateRange0: function (value, index) {
      //跟进日期起
      console.info("onConfirmVisitDateRange0", value);
      this.visitDateRange0 = this.$util.getDate(value);
      this.showVisitDateRange0 = false;
    },
    onConfirmVisitDateRange1: function (value, index) {
      //跟进日期止
      console.info("onConfirmVisitDateRange1", value);
      this.visitDateRange1 = this.$util.getDate(value);
      this.showVisitDateRange1 = false;
    },
    onSubmit() {    //提交按钮  查询房源
     
      var that = this;
      let name=this.name;
      let phone=this.phone;
      
      let jsonQuery={name:name,phone:phone,salseUserCode:that.salseUserCode,intention:that.intention,saleState:that.saleState,registerDateRange0:this.registerDateRange0,registerDateRange1:this.registerDateRange1,visitDateRange0:this.visitDateRange0,visitDateRange1:this.visitDateRange1};
      console.info('onSubmit jsonQuery',jsonQuery);
      //return;
      this.$router.push({path:'/getsaclientlist1',query:jsonQuery});
     
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
  text-align: left;
}
.value1 {
  color: #1732cf;
  font-size: 18px;
  font-weight: 800;
}
.size{
    font-size:16px;
}
</style>
s