<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(4)">
        <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(3)">
        <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(2)">
        <div class="flexone">
          <div class="formitemleft">学历</div>
          <div class="formitemright">{{ recordname }}</div>
        </div>
        <img src="../../../assets/grayrow.png" alt class="yourow downrow" />
      </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(5)">
        <div class="flexone">
          <div class="formitemleft">年收入</div>
          <div class="formitemright">{{ salaryname }}</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="text"
          ></textarea>
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <van-picker
      title
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcolom"
    />

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

<script>
import Vue from "vue";
import { Picker, Toast } from "vant";
import wx from "jweixin-1.6.0";
Vue.use(Picker);
export default {
  data() {
    return {
      columns: [],
      showcolom: false,
      agearr: [],
      agreecolumns: [],
      agename: "请选择意向经销商年龄",
      age: "",
      zhiyearr: [],
      zhiyecolumns: [],
      zhiyename: "请选择意向经销商职业",
      profession_id: "",
      salaryarr: [],
      salarycolumns: [],
      salaryname: "请选择意向经销商年收入",
      salary_id: "",
      sexarr: [
        {
          id: 1,
          naem: "男"
        },
        {
          id: 2,
          naem: "女"
        }
      ],
      sexcolumns: ["男", "女"],
      sexname: "请选择意向经销商性别",
      sex_id: "",
      recordarr: [],
      recordcolumns: [],
      recordname: "请选择意向经销商学历",
      record: "",
      selkind: "",
      text: "",
      agent_name: "",
      mobile: "",
      name: ""
    };
  },
  created() {
    document.title = "唐元集";
    this.getappid()
    let obj = localStorage.getItem("obj");
    console.log(obj)
    if (obj != null) {
      obj = JSON.parse(obj)
      this.agent_name = obj.agent_name
      this.mobile = obj.mobile;
      this.name = obj.name;
      this.zhiyename = obj.zhiyename;
      this.agename = obj.agename;
      this.sexname = obj.sexname;
      this.recordname = obj.recordname;
      this.salaryname = obj.salaryname;
      this.text = obj.text;
      this.sex_id = obj.sex_id;
      this.record = obj.record;
      this.age = obj.age,
        this.profession_id = obj.profession_id;
      this.salary_id = obj.salary_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 obj = {};
      obj.agent_name = this.agent_name;
      obj.mobile = this.mobile;
      obj.name = this.name;
      obj.zhiyename = this.zhiyename;
      obj.agename = this.agename;
      obj.sexname = this.sexname;
      obj.recordname = this.recordname;
      obj.salaryname = this.salaryname;
      obj.text = this.text;
      obj.sex_id = this.sex_id;
      obj.record = this.record;
      obj.age = this.age,
        obj.profession_id = this.profession_id;
      obj.salary_id = this.salary_id;
      obj = JSON.stringify(obj);
      localStorage.setItem("obj", obj)
    },
    // 选择弹出层
    selectshow(id) {
      console.log(id);
      this.showcolom = true;
      this.selkind = id;
      this.columns = [];
      if (id == 1) {
        this.columns = this.sexcolumns;
      } else if (id == 2) {
        this.getxueli();
      } else if (id == 3) {
        this.getagelist();
      } else if (id == 4) {
        console.log(999);
        // 获取职业
        this.getzhiye();
      } else if (id == 5) {
        this.getsalary();
      }
    },
    //获取年龄列表
    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.agreecolumns = agreecolumns;
          that.columns = agreecolumns;
          console.log(that.agreecolumns);
          console.log(that.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.zhiyecolumns = zhiyecolumns;
          that.columns = that.zhiyecolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取年收入
    getsalary() {
      let that = this;
      var url = "/api/common/salary";
      let param = {};

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

          that.columns = salarycolumns;
          that.salarycolumns = salarycolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取学历列表
    getxueli() {
      let that = this;
      var url = "/api/common/record";
      let param = {};

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

          that.columns = recordcolumns;
          that.recordcolumns = recordcolumns;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    onConfirm(value, index) {
      console.log(value, index);
      this.showcolom = false;
      if (this.selkind == 1) {
        this.sexname = value;
        this.sex_id = this.sexarr[index].id;
      } else if (this.selkind == 2) {
        this.recordname = value;
        this.record = this.recordarr[index].id;
      } else if (this.selkind == 3) {
        this.agename = value;
        this.age = this.agearr[index].id;
      } else if (this.selkind == 4) {
        this.zhiyename = value;
        this.profession_id = this.zhiyearr[index].id;
      } else if (this.selkind == 5) {
        this.salaryname = value;
        this.salary_id = this.salaryarr[index].id;
      }
    },
    onCancel() {
      this.showcolom = false;
    },
    // 提交结果
    subresult() {
      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.record == "") {
        Toast("请选择学历");
        return false;
      }
      if (that.age == "") {
        Toast("请选择年龄");
        return false;
      }
      if (that.profession_id == "") {
        Toast("请选择职业");
        return false;
      }
      if (that.salary_id == "") {
        Toast("请选择年收入");
        return false;
      }
      var url = "/api/user/purpose";
      let param = {
        agent_name: that.agent_name,
        mobile: that.mobile,
        name: that.name,
        gender: that.sex_id,
        record: that.record,
        age: that.age,
        profession_id: that.profession_id,
        salary_id: that.salary_id,
        experience: that.text
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          Toast("提交成功");
          let obj = {};
          obj.agent_name = that.agent_name;
          obj.mobile = that.mobile;
          obj.name = that.name;
          obj.zhiyename = that.zhiyename;
          obj.agename = that.agename;
          obj.sexname = that.sexname;
          obj.recordname = that.recordname;

          obj.salaryname = that.salaryname;
          obj.text = that.text;
          obj.sex_id = that.sex_id;
          obj.record = that.record;
          obj.age = that.age,
            obj.profession_id = that.profession_id;
          obj.salary_id = that.salary_id;

          obj = JSON.stringify(obj);
          localStorage.setItem("obj", null)
          localStorage.setItem("type", "1")
          Toast('邀请正在生成中')
          setTimeout(() => {
            that.$router.push({
              path: "/companyintro",
              query: { subid: res.data.id }
            });
          }, 1500);

        })
        .catch(function (err) {
          console.log(err);
          Toast(err.msg);
        });
    }
  }
};
</script>

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