<template>
  <div class="container">
    <div class="flextwo sharetopk">
      <div class="leftrow leftrowkimg" @click="back">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">表单信息</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="formbox">
      <div class="formitem flexone">
        <div class="formitemleft">推荐经销商</div>
        <div class="formitemright">
          <input type="text" placeholder="请输入推荐经销商" v-model="agent_name" />
        </div>
      </div>
      <div class="formitem flexone">
        <div class="formitemleft">经销商手机号</div>
        <div class="formitemright formjingxiao">
          <input type="number" placeholder="请输入推荐经销商手机号" v-model="mobile" />
        </div>
      </div>
      <div class="formitem flexone">
        <div class="formitemleft">顾客姓名</div>
        <div class="formitemright">
          <input type="text" placeholder="请输入姓名" v-model="name" />
        </div>
      </div>
      <div class="formitem flextwo" @click="selectshow(1)">
        <div class="flexone">
          <div class="formitemleft">性别</div>
          <div class="formitemright">{{ sexname }}</div>
        </div>
        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="formitem flextwo" @click="selectshow(2)">
        <div class="flexone">
          <div class="formitemleft">年龄</div>
          <div class="formitemright">{{ agename }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="formitem flextwo" @click="selectshow(5)">
        <div class="flexone">
          <div class="formitemleft">体重</div>
          <div class="formitemright">{{ weightname }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="formitem flextwo" @click="selectshow(7)">
        <div class="flexone">
          <div class="formitemleft">减脂需求</div>
          <div class="formitemright">{{ needname }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="formitem flextwo" @click="selectshow(3)">
        <div class="flexone">
          <div class="formitemleft">职业</div>
          <div class="formitemright">{{ zhiyename }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>
      <div class="formitem flextwo" @click="selectshow(4)">
        <div class="flexone">
          <div class="formitemleft">身高</div>
          <div class="formitemright">{{ hightname }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="formitem flextwo" @click="selectshow(6)">
        <div class="flexone">
          <div class="formitemleft">肥胖因素</div>
          <div class="formitemright">{{ fatname }}</div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </div>

      <div class="chuangye">
        <div class="chaungyetitle">顾客是否尝试过其他瘦身方法</div>
        <div class="chuangyetext">
          <textarea name id cols="30" rows="10" placeholder="预设内容" v-model="experience"></textarea>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <van-picker
      title
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcolom"
    />

    <!-- 下一步 -->
    <div class="nextstep" @click="sub">生成邀请</div>
  </div>
</template>

<script>
import wx from "jweixin-1.6.0";
import Vue from "vue";
import { Picker, Toast } from "vant";

Vue.use(Picker);
export default {
  data() {
    return {
      name: "",
      mobile: "",
      agent_name: "",
      sexarr: [
        {
          id: 1,
          naem: "男"
        },
        {
          id: 2,
          naem: "女"
        }
      ],
      columns: [],
      sexname: "请输入顾客性别",
      sex_id: "",
      agearr: [],
      sexcolumns: ["男", "女"],
      agename: "请输入顾客年龄",
      age: "",
      zhiyearr: [],
      zhiyecolumns: [],
      zhiyename: "请输入顾客职业",
      profession_id: "",
      weightarr: [],
      weightcolumns: [],
      weightname: "请输入顾客体重",
      weight_id: "",
      heightarr: [],
      hightcolumns: [],
      hightname: "请输入顾客身高",
      height: "",

      fatarr: [],
      fatcolumns: [],
      fatname: "请输入顾客肥胖因素",
      fat_id: "",

      needarr: [],
      needcolumns: [],
      needname: "请输入顾客减脂需求",
      need_id: "",
      showcolom: false,
      kindtype: "",
      experience: ""
    };
  },
  created() {
    let that = this;
    document.title = "唐元集公众号";
    this.getappid()
    let zhiyeobj = localStorage.getItem("zhiyeobj");
    console.log(zhiyeobj)
    if (zhiyeobj != null) {
      zhiyeobj = JSON.parse(zhiyeobj)
      that.agent_name = zhiyeobj.agent_name;
      that.mobile = zhiyeobj.mobile;
      that.name = zhiyeobj.name;
      that.sexname = zhiyeobj.sexname;
      that.agename = zhiyeobj.agename;
      that.weightname = zhiyeobj.weightname;
      that.needname = zhiyeobj.needname;
      that.zhiyename = zhiyeobj.zhiyename;
      that.experience = zhiyeobj.experience;
      that.fatname = zhiyeobj.fatname;
      that.hightname = zhiyeobj.hightname;

      that.sex_id = zhiyeobj.sex_id;
      that.age = zhiyeobj.age;
      that.profession_id = zhiyeobj.profession_id;
      that.need_id = zhiyeobj.need_id;
      that.fat_id = zhiyeobj.fat_id;
      that.height = zhiyeobj.height;
      that.weight_id = zhiyeobj.weight_id

    }

  },

  methods: {
    // 获取appid
    getappid() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/user/wechat_jssdk";
      let param = {
        url: urlk
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          wx.config({
            debug: false,
            appId: res.data.jssdk.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.jssdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.jssdk.nonceStr, // 必填，生成签名的随机串
            signature: res.data.jssdk.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: [
              "hideOptionMenu"
            ]
          });
          wx.ready(function () {
            wx.hideOptionMenu();
          })



        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 返回上一页
    back() {
      window.history.go(-1);
      let zhiyeobj = {};
      zhiyeobj.agent_name = this.agent_name;
      zhiyeobj.mobile = this.mobile;
      zhiyeobj.name = this.name;
      zhiyeobj.sexname = this.sexname;
      zhiyeobj.agename = this.agename;
      zhiyeobj.weightname = this.weightname;
      zhiyeobj.needname = this.needname;
      zhiyeobj.zhiyename = this.zhiyename;
      zhiyeobj.experience = this.experience;
      zhiyeobj.fatname = this.fatname;
      zhiyeobj.hightname = this.hightname;
      zhiyeobj.sex_id = this.sex_id;
      zhiyeobj.age = this.age;
      zhiyeobj.profession_id = this.profession_id;
      zhiyeobj.need_id = this.need_id;
      zhiyeobj.fat_id = this.fat_id;
      zhiyeobj.height = this.height;
      zhiyeobj.weight_id = this.weight_id
      zhiyeobj = JSON.stringify(zhiyeobj);
      localStorage.setItem("zhiyeobj", zhiyeobj)
    },
    selectshow(id) {
      this.showcolom = true;
      this.columns = [];
      this.kindtype = id;
      console.log(this.kindtype);
      if (id == 1) {
        this.columns = this.sexcolumns;
      } else if (id == 2) {
        this.getagelist();
      } else if (id == 3) {
        this.getzhiye();
      } else if (id == 4) {
        this.getheight();
      } else if (id == 5) {
        this.getweight();
      } else if (id == 6) {
        this.getfatlsit();
      } else if (id == 7) {
        this.getneedlist();
      }
    },
    //获取年龄列表
    getagelist() {
      let that = this;
      var url = "/api/common/age";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          that.agearr = res.data.age;
          let agreecolumns = [];
          res.data.age.forEach(function (value, index, array) {
            agreecolumns.push(value.name);
          });

          that.columns = agreecolumns;
          that.agreecolumns = agreecolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取职业
    getzhiye() {
      console.log(8888);
      let that = this;
      var url = "/api/common/profession";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          let zhiyecolumns = [];
          that.zhiyearr = res.data.record;
          res.data.record.forEach(function (value, index, array) {
            zhiyecolumns.push(value.name);
          });

          that.columns = zhiyecolumns;
          that.zhiyecolumns = zhiyecolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取体重列表
    getweight() {
      console.log(8888);
      let that = this;
      var url = "/api/common/weight";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          let weightcolumns = [];
          that.weightarr = res.data.weight;
          res.data.weight.forEach(function (value, index, array) {
            weightcolumns.push(value.name);
          });

          that.columns = weightcolumns;
          that.weightcolumns = weightcolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取身高列表
    getheight() {
      console.log(8888);
      let that = this;
      var url = "/api/common/weight";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          let heightcolumns = [];
          that.heightarr = res.data.height;
          res.data.height.forEach(function (value, index, array) {
            heightcolumns.push(value.name);
          });

          that.columns = heightcolumns;
          that.heightcolumns = heightcolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取肥胖列表
    getfatlsit() {
      console.log(8888);
      let that = this;
      var url = "/api/common/fat";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          let fatcolumns = [];
          that.fatarr = res.data.fat;
          res.data.fat.forEach(function (value, index, array) {
            fatcolumns.push(value.name);
          });

          that.columns = fatcolumns;
          that.fatcolumns = fatcolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取减脂需求列表
    getneedlist() {
      console.log(8888);
      let that = this;
      var url = "/api/common/need";
      let param = {};

      that.$axios
        .get(url, param)
        .then(function (res) {
          console.log(res);
          let needcolumns = [];
          that.needarr = res.data.need;
          res.data.need.forEach(function (value, index, array) {
            needcolumns.push(value.name);
          });

          that.columns = needcolumns;
          that.needcolumns = needcolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    selectsex() {
      this.showcolom = true;
    },
    onConfirm(value, index) {
      let that = this;
      this.showcolom = false;
      if (this.kindtype == 1) {
        that.sex_id = that.sexarr[index].id;
        this.sexname = value;
      } else if (this.kindtype == 2) {
        this.agename = value;
        that.age = that.agearr[index].id;
      } else if (this.kindtype == 3) {
        this.zhiyename = value;
        that.profession_id = that.zhiyearr[index].id;
      } else if (this.kindtype == 4) {
        this.hightname = value;
        that.height = that.heightarr[index].id;
      } else if (this.kindtype == 5) {
        this.weightname = value;
        that.weight_id = that.weightarr[index].id;
        console.log(that.weight_id);
      } else if (this.kindtype == 6) {
        this.fatname = value;
        that.fat_id = that.fatarr[index].id;
      } else if (this.kindtype == 7) {
        this.needname = value;
        that.need_id = that.needarr[index].id;
      }
    },
    sub() {
      // let token = sessionStorage.getItem("token");
      // alert(token)
      let that = this;
      if (that.agent_name == "") {
        Toast("请填写推荐经销商");
        return false;
      }
      if (that.mobile == "") {
        Toast("请填写经销商电话");
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(that.mobile)) {
        Toast("请输入正确的手机号");
        return false;
      }
      if (that.name == "") {
        Toast("请填写姓名");
        return false;
      }
      if (that.sex_id == "") {
        Toast("请选择性别");
        return false;
      }
      if (that.age == "") {
        Toast("请选择年龄");
        return false;
      }
      if (that.profession_id == "") {
        Toast("请选择职业");
        return false;
      }
      if (that.height == "") {
        Toast("请选择身高");
        return false;
      }
      if (that.weight_id == "") {
        Toast("请选择体重");
        return false;
      }
      if (that.fat_id == "") {
        Toast("请选择肥胖因素");
        return false;
      }

      if (that.need_id == "") {
        Toast("请选择减脂需求");
        return false;
      }

      var url = "/api/user/assistance";
      let param = {
        agent_name: that.agent_name,
        mobile: that.mobile,
        name: that.name,
        gender: that.sex_id,
        age: that.age,
        profession_id: that.profession_id,
        need_id: that.need_id,
        fat_id: that.fat_id,
        height: that.height,
        weight_id: that.weight_id,
        experience: that.experience
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          Toast("提交成功");
          localStorage.setItem("type", "1")
          Toast('邀请正在生成中')
          setTimeout(() => {
            that.$router.push({
              path: "/productintro",
              query: { subid: res.data.id }
            });
          }, 1500);


          let zhiyeobj = {};
          zhiyeobj.agent_name = that.agent_name;
          zhiyeobj.mobile = that.mobile;
          zhiyeobj.name = that.name;
          zhiyeobj.sexname = that.sexname;
          zhiyeobj.agename = that.agename;
          zhiyeobj.weightname = that.weightname;
          zhiyeobj.needname = that.needname;
          zhiyeobj.zhiyename = that.zhiyename;
          zhiyeobj.experience = that.experience;
          zhiyeobj.fatname = that.fatname;
          zhiyeobj.hightname = that.hightname;
          zhiyeobj.sex_id = that.sex_id;
          zhiyeobj.age = that.age;
          zhiyeobj.profession_id = that.profession_id;
          zhiyeobj.need_id = that.need_id;
          zhiyeobj.fat_id = that.fat_id;
          zhiyeobj.height = that.height;
          zhiyeobj.weight_id = that.weight_id
          zhiyeobj = JSON.stringify(zhiyeobj);
          localStorage.setItem("zhiyeobj", null)
        })
        .catch(function (err) {
          console.log(err);
          Toast(err.msg);
        });
    },
    onCancel() {
      this.showcolom = false;
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.formjingxiao {
  width: 4rem;
}
</style>