<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>
      <van-field
        v-model="name"
        name="客户姓名"
        label="客户姓名"
        placeholder="客户姓名"
        readonly
        input-align="right"
      />
      <van-cell
        title="访问类型"
        :value="visitType"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showVisitType = true"
      ></van-cell>
      <van-popup v-model="showVisitType" round position="bottom">
        <van-picker
          show-toolbar
          title="选择访问类型"
          value-key="name"
          :columns="visitTypeData"
          @cancel="showVisitType = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <van-cell
        title="接待日期"
        :value="visitDate"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showVisitDate = true"
      ></van-cell>
      <van-popup v-model="showVisitDate" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showVisitDate = false"
          @confirm="onConfirmVisitDate"
        />
      </van-popup>
      <van-cell
        title="接待时间"
        :value="visitTime"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showTime = true"
      ></van-cell>
      <van-popup v-model="showTime" round position="bottom">
        <van-datetime-picker
          v-model="currentTime"
          type="time"
          title="选择时间"
          :min-hour="10"
          :max-hour="20"
          @cancel="showTime = false"
          @confirm="onConfirmVisitTime"
        />
      </van-popup>
      <van-cell
        title="意向强度"
        :value="intention"
        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-field
        v-model="remark"
        rows="1"
        autosize
        label="接待信息"
        type="textarea"
        placeholder="请输入接待信息"
      />
      <van-cell
        title="来访计划日期"
        :value="planVisitDate"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showPlanVisitDate = true"
      ></van-cell>
      <van-popup v-model="showPlanVisitDate" round position="bottom">
        <van-datetime-picker
          v-model="planVisitDateSel"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPlanVisitDate = false"
          @confirm="onConfirmPlanVisitDate"
        />
      </van-popup>
      <van-cell
        title="下次接待日期"
        :value="nextReceiveDate"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showNextReceiveDate = true"
      ></van-cell>
      <van-popup v-model="showNextReceiveDate" round position="bottom">
        <van-datetime-picker
          v-model="nextReceiveDateSel"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showNextReceiveDate = false"
          @confirm="onConfirmNextReceiveDate"
        />
      </van-popup>
      

      <van-row class="bottom">
        <van-col span="12" class="bgGrey"  @click="cancel">
          <van-icon name="close" />取消
        </van-col>
        <van-col span="12" class="bgRed"  @click="save"
          ><van-icon name="passed" />保存
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>
import {
  GetVisitTypeList,
  AddSaClientContact 
} from "@/common/api/loginApi.js";
import Decimal from "decimal.js";
import '../assets/css/resetvant.css';
export default {
  name: "login",
  data() {
    return {
      id: "",
      name: "",
      visitType: "", //访问类型
      showVisitType: false,
      remark: "", //接待信息
      intention: "", //意向强度
      planVisitDate: "", //来访计划日期
      nextReceiveDate: "", //下次接待日期
      visitDate: "", //接待日期
      visitTime: "", //接待时间
      actionType: "",

      visitTypeData: [], //访问类型数组
      minDate: new Date(2005, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      currentTime: '',
      showTime: false,
      intentionData: [0,1,2,3,4,5],
      showPlanVisitDate: false,
      planVisitDateSel: new Date(),
      showNextReceiveDate: false,
      nextReceiveDateSel: new Date(),
      showVisitDate: false,
      showintention: false,
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    let date=new Date();
    this.visitDate=this.$util.getCurrentDate();
    this.currentTime="10:11";
    console.info('created currentTime',this.currentTime);
    this.GetVisitTypeList();
  },
  computed: {
    //计算属性
    completion: function () {},
  },
  methods: {
    onConfirm: function (item,index) {
       console.info('onConfirm',item);
       this.visitType=item.name;
       this.showVisitType=false;
    },
    onConfirmVisitTime:function (time,index) {   //接待时间
       console.info('onConfirmVisitTime',time);
       this.visitTime=time;
       console.info('onConfirmVisitTime visitTime',this.visitTime);
       this.showTime=false;
    },
    onConfirmVisitDate: function (date,index) {  //接待日期
        console.info('onConfirmVisitDate',date);
        this.visitDate=this.$util.getDate(date);
        console.info('onConfirmVisitDate visitDate',this.visitDate);
        this.showTime=false;
    },
    onConfirmIntention:function (value,index) {  //意向强度
        console.info('onConfirmIntention',value);
        this.intention=value;
        console.info('onConfirmIntention intention',this.intention);
        this.showintention=false;
    },
    onConfirmPlanVisitDate:function (date,index) {  //来访计划日期
        console.info('onConfirmPlanVisitDate',date);
        this.planVisitDate=this.$util.getDate(date);
        console.info('onConfirmPlanVisitDate visitDate',this.planVisitDate);
        this.showPlanVisitDate=false;
    },
    onConfirmNextReceiveDate:function (date,index) {  //下次接待日期
        console.info('onConfirmNextReceiveDate',date);
        this.nextReceiveDate=this.$util.getDate(date);
        console.info('onConfirmNextReceiveDate nextReceiveDate',this.nextReceiveDate);
        this.showNextReceiveDate=false;
    },
    onSubmit(values) {
      //提交表单
      console.log("submit", values);
      
    },
    GetVisitTypeList:function(){   //取访问类型
     var that = this;
      var data = {
        projectId: that.$store.state.projectId
      };
      console.info("data", data);
      GetVisitTypeList(data).then((res)=>{
         console.info("GetVisitTypeList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function(item,index,array) {
          that.visitTypeData.push(item);
        });
      });
    },
    cancel:function(){
      this.$router.go(-1);
    },
    save:function(){
      let that=this;
      let jsonData={
        visitType:that.visitType,
        intention:that.intention,
        remark:that.remark,
        planVisitDate:that.planVisitDate,
        nextReceiveDate:that.nextReceiveDate,
        visitDate:that.visitDate,
        visitTime:that.visitTime,
        actionType:''
      };
      let data={
         userCode:that.$store.state.data.userCode,
         projectId: that.$store.state.projectId,
         clientId:that.id,
         jsonData:JSON.stringify(jsonData)
      };
      console.info('save',data);
      //return;
      AddSaClientContact(data).then((res)=>{
         console.info('AddSaClientContact',res);
         that.$dialog.alert({
            message: res.msg,
          }).then(() => {
            // on close
            that.$router.go(-1);
          });

      }); 
    },
    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: #aaa;
  font-size:15px;

  text-align:left;
  height:30px;
}
.title2{
  color: #ff0000;
  text-align:left;
  font-size: 13px;
}
.infoTitle{
  color: #aaa;
  text-align: left;
}
.value1{
  color: #000;
  font-size: 13px;
}
.infoValue{
  color: #0606af;
}
.size{
  font-size: 16px;
}
.header{
  margin-top: 10px;
  height: 70px;
  border-bottom: #cfcfcf solid 3px;
}
.titleClass{
  border-bottom: #000 solid 1px;
}
.van-tab{
  color: #ff0000;
}
.redColor{
  color: #ff0000;
}
.bgBlue{
  background: #a0a0f7;
  height: 30px;
  margin-top: 5px;
  padding-top: 5px;
}
.bgBill{
  height: 30px;
  border-bottom: #aaa solid 1px;
  padding-top: 5px;
}
.bottom{
  /* left:0; */
  bottom: 0px;
  position: absolute;
  width: 100%;
}
.bgGrey{
  background: #999999;
  height: 35px;
  justify-content: center;
  padding-top: 5px;
}
.bgRed{
  background: #ff0000;
  height: 35px;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  padding-top: 5px;
}
 
</style>

 