<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="save">
      <van-field
        v-model="name"
        name="姓名"
        label="姓名"
        placeholder="请输入姓名（20个字以内）"
        input-align="right"
        required
         :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="phone"
        name="手机"
        label="手机"
        placeholder="请输入"
        input-align="right"
        type="tel"
        required
        :rules="[{ required: true, message: '请输入手机号' }]"
      ></van-field>
      <van-cell
        title="性别"
        :value="sexName"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showSex = true"
        required
      ></van-cell>
      <van-popup v-model="showSex" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="sexData"
          @cancel="showSex = false"
          @confirm="onConfirmSex"
          :default-index="0"
        />
      </van-popup>
      
      <van-cell
        title="认知途径"
        :value="cognizeWay"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showCognizeWay = true"
      ></van-cell>
      <van-popup v-model="showCognizeWay" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="cognizeWayData"
          @cancel="showCognizeWay = false"
          @confirm="onConfirmCognizeWay"
          :default-index="cognizeWayIndex"
        />
      </van-popup>
      <van-field
        v-model="remark"
        rows="1"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入"
        class="remarkBottom"
        input-align="right"
      />
      <van-divider style="border-bottom:#cfcfcf solid 3px;"/>
       <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="visitIntention"
        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="visitRemark"
        rows="1"
        autosize
        label="接待信息"
        type="textarea"
        placeholder="请输入接待信息"
        input-align="right"
      />

      <van-row class="bottom">
        <van-col span="12" class="bgGrey" @click="cancel">
          <van-icon name="close" />取消
        </van-col>
        <van-col span="12" class="bgRed">
          <van-button square icon="success" style="margin-bottom:5px;" type="danger" native-type="submit">保存</van-button>
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>
import {
 GetVisitTypeList,
  GetCognizeWayList,
  AddSaClient
} from "@/common/api/loginApi.js";
import "../assets/css/resetvant.css";
export default {
  name: "login",
  data() {
    return {
      id: "",
      name: "",
      phone: "",
      sex: 0,
      sexName: "",
      showSex: false,
      sexData: [
        { id: 0, text: "男" },
        { id: 1, text: "女" },
      ],
      sexIndex: 0,
      
      remark: "",
      cognizeWay: "",
      showCognizeWay: false,
      cognizeWayData: [],
      cognizeWayIndex: 0,
       visitType: "", //访问类型
       visitTypeData:[],
      showVisitType: false,
      visitIntention: "", //意向强度
      intentionData: [0,1,2,3,4,5],
      showintention: false,
      visitRemark:'',
     
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.GetVisitTypeList();
    this.GetCognizeWayList();
    
  },
  computed: {
    //计算属性
    completion: function () {},
  },
  methods: {
    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);
        });
      });
    },
    GetCognizeWayList: function () {
      //获取认知途径
      var that = this;
      var data = {
        projectId: that.$store.state.projectId,
        clientId: that.id,
      };
      console.info("GetCognizeWayList data", data);
      GetCognizeWayList(data).then((res) => {
        console.info("GetCognizeWayList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function (item, index, array) {
          that.cognizeWayData.push(item.name);
        });
        that.GetSaClientInfo();
      });
    },
   
    onConfirmSex: function (item, index) {
      console.info("onConfirmSex", item);
      this.sex = item.id;
      this.sexName = item.text;
      this.showSex = false;
    },
   
    onConfirmCognizeWay: function (value, index) {
      //认知途径
      console.info("onConfirmCognizeWay", value);
      this.cognizeWay = value;
      this.showCognizeWay = false;
    },
    onConfirm: function (item,index) {
       console.info('onConfirm',item);
       this.visitType=item.name;
       this.showVisitType=false;
    },
    onConfirmIntention:function (value,index) {  //意向强度
        console.info('onConfirmIntention',value);
        this.visitIntention=value;
        console.info('onConfirmIntention intention',this.visitIntention);
        this.showintention=false;
    },
    cancel: function () {
      this.$router.go(-1);
    },
    save: function () {
      let that = this;
      let namePattern=/^\S{1,20}$/;
      let phonePattern=/^1[3456789]\d{9}$/;
      if(!namePattern.test(this.name)){
        this.$toast("姓名不能超过20字");
        return;
      }
      if(!phonePattern.test(this.phone)){
        this.$toast("手机格式不正确");
        return;
      }
      console.info('sex',this.sex);
      if(this.sex!=0&&this.sex!=1){
        this.$toast("请选择性别");
        return;
      }
      let jsonData = {
        name: that.name,
        phone: that.phone,
        sex: that.sex,
        visitType:that.visitType,
        remark: that.remark,
        visitIntention:that.visitIntention,
        cognizeWay: that.cognizeWay,
        visitRemark: that.visitRemark,
      };
      //console.info("save jsonData", JSON.stringify(jsonData));
      let data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        jsonData: JSON.stringify(jsonData),
      };
      console.info("save", data);
      //return;
      AddSaClient(data).then((res) => {
        console.info("AddSaClient", res);
        if (res.result) {
          if (res.msg == null) {
            that.$router.go(-1);
          } else {
            that.$dialog
              .alert({
                message: res.msg,
              })
              .then(() => {
                // on close
                if (res.result) {
                  that.$router.go(-1);
                }
              });
          }
        } else {
          that.$dialog.alert({
            message: res.msg,
          });
        }
      });
    },
    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: fixed;
  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;
}
.remarkBottom {
  margin-bottom: 40px;
}
</style>

 