<template>
    <div class="page_activeForm">
        <van-sticky>
            <div class="activeFormTitle">
                <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
                <span class="titleName">活动报名表</span>
            </div>
        </van-sticky>

        <div class="formBox">
            <div class="attentionBox">
                <p>*本次活动免费赠送且包邮，请正确填写您的个人资料，工作人员将在1-3天内通过电话或微信方式联系您并核对信息，尽快为您安排发货</p>
                <p>*<span>提交信息成功即可扫码加入活动微信交流群</span></p>
                <p>*标有<span>*</span>的栏目必须填写;</p>
                <p>有问题请联系客服微信：<span>kuyicloud</span></p>
                <p>以上解释权归酷医云所有，敬请留意</p>
            </div>
            <van-field v-model="form.name" label="收件姓名" required placeholder="请填写"/>
            <van-field v-model="form.mobile" label="收件手机" required placeholder="请填写"/>
            <van-field v-model="form.address" label="收件地址" required placeholder="必须为血透中心地址"/>
            <van-field v-model="position"  label="您的职务" @click="show = true" readonly required placeholder="请填写"/>
            <van-field v-model="form.hospital_name" label="医院名称" required placeholder="请填写"/>
            <div class="formOne">
                <div class="formTitle"><span style="color:#ee0a24">*</span>目前医院/机构是否正在使用透析管理系统？</div>
                <van-radio-group v-model="radio">
                    <van-radio name="1">有</van-radio>
                    <van-radio name="2">无</van-radio>
                </van-radio-group>
            </div>
            <van-field v-model="form.system_name" placeholder="请填写系统名称"/>
            <div class="formOne">
                <div class="formTitle"><span style="color:#ee0a24">*</span>是否考虑使用酷医云免费透析管理系统？</div>
                <van-radio-group v-model="radioOne">
                    <van-radio name="1">是</van-radio>
                    <van-radio name="2">否</van-radio>
                </van-radio-group>
            </div>
            <div class="formOne">
                <div class="formTitle"><span style="color:#ee0a24">*</span>除酷医云免费使用的透析管理系统外，您还想了解酷医其他哪些服务板块？（多选） </div>
                <van-checkbox-group v-model="result">
                    <van-checkbox name="1">慢病管理</van-checkbox>
                    <van-checkbox name="2">营销管理</van-checkbox>
                    <van-checkbox name="3">分销商城</van-checkbox>
                    <van-checkbox name="4">医护培训</van-checkbox>
                    <van-checkbox name="5">供应链</van-checkbox>
                    <van-checkbox name="6">其他</van-checkbox>
                </van-checkbox-group>
                <p style="color:#ccc">请填写其他（30个字以内）</p>
                <div class="textareaBox">
                    <van-field v-model="form.other_remark" rows="3" type="textarea" maxlength="30" />
                </div>
            </div>
            <div class="formTwo">
                <div class="formTitle"><span style="color:#ee0a24">*</span>请选择以下礼品（任选其一）</div>
                <van-radio-group v-model="resultTwo">
                    <van-radio name="1">保湿纳米喷雾补水仪</van-radio>
                    <van-radio name="2">车载加湿器</van-radio>
                    <van-radio name="3">商务保温杯套装</van-radio>
                </van-radio-group>
                <p>其他留言（200个字以内）</p>
                <div class="textareaBox2">
                    <van-field v-model="form.other_message" rows="5" type="textarea" maxlength="200" />
                </div>
            </div>
        </div>
        <div class="submit" @click="submitForm">提 交</div>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
    </div>
</template>

<script>
import { submitForm, getMobile } from "@/api/patient/patient";
export default {
  data() {
    return {
      radio: "0",
      radioOne: "0",
      resultTwo: [],
      result: [],
      position: "",
      form: {
        name: "",
        mobile: "",
        address: "",
        position: "",
        hospital_name: "",
        is_user: 0,
        is_think: 0,
        other_mode: 0,
        gift: 0,
        other_remark: "",
        other_message: "",
        system_name: ""
      },
      show: false,
      columns: [
        "医生",
        "护士",
        "主任",
        "技师",
        "运营",
        "护士长",
        "库存",
        "其他"
      ]
    };
  },

  methods: {
    getMobile() {
      getMobile().then(response => {
        if (response.data.state === 1) {
          var mobile = response.data.data.mobile;
          this.form.mobile = mobile.mobile;
          console.log("mobile", mobile);
        }
      });
    },
    onConfirm(val) {
      if (val === "医生") {
        this.position = val;
        this.show = false;
        this.form.position = 1;
      }
      if (val === "护士") {
        this.position = val;
        this.show = false;
        this.form.position = 2;
      }
      if (val === "主任") {
        this.position = val;
        this.show = false;
        this.form.position = 3;
      }
      if (val === "技师") {
        this.position = val;
        this.show = false;
        this.form.position = 4;
      }
      if (val === "运营") {
        this.position = val;
        this.show = false;
        this.form.position = 5;
      }
      if (val === "护士长") {
        this.position = val;
        this.show = false;
        this.form.position = 6;
      }
      if (val === "库存") {
        this.position = val;
        this.show = false;
        this.form.position = 7;
      }
      if (val === "其他") {
        this.position = val;
        this.show = false;
        this.form.position = 8;
      }
      console.log("val是", val);
    },
    onCancel() {
      this.show = false;
    },
    submitForm() {
      if (this.form.name == "") {
        this.$toast("收件姓名不能为空");
        return false;
      }
      if (this.form.mobile == "") {
        this.$toast("收件手机不能为空");
        return false;
      }
      if (this.form.address == "") {
        this.$toast("收件地址不能为空");
        return false;
      }
      if (this.form.position == "") {
        this.$toast("您的职务不能为空");
        return false;
      }
      if (this.form.hospital_name == "") {
        this.$toast("医院名称不能为空");
        return false;
      }
      if (this.radio == "0") {
        this.$toast("目前医院/机构是否正在使用透析管理系统不能为空");
        return false;
      }
      if (this.radioOne == "0") {
        this.$toast("是否考虑使用酷医云免费透析管理系统不能为空");
        return false;
      }
      if (this.result.length == 0) {
        this.$toast("是否考虑使用酷医云免费透析管理系统不能为空");
        return false;
      }
      if (this.resultTwo.length == 0) {
        this.$toast("请选择以下礼品不能为空");
        return false;
      }
      if (this.radio == "1") {
        this.form.is_user = 1;
      }
      if (this.radio == "2") {
        this.form.is_user = 2;
      }
      if (this.radioOne == "1") {
        this.form.is_think = 1;
      }
      if (this.radioOne == "2") {
        this.form.is_think = 2;
      }
      if (this.resultTwo == "1") {
        this.form.gift = 1;
      }
      if (this.resultTwo == "2") {
        this.form.gift = 2;
      }
      if (this.resultTwo == "3") {
        this.form.gift = 3;
      }
      var result = this.result.join(",");
      console.log("result", result);
      const params = {
        name: this.form.name,
        mobile: this.form.mobile,
        address: this.form.address,
        position: this.form.position,
        hospitalName: this.form.hospital_name,
        systemName: this.form.system_name,
        isUser: this.form.is_user,
        isThink: this.form.is_think,
        result: result,
        otherRemark: this.form.other_remark,
        otherMessage: this.form.other_message,
        gift: this.form.gift
      };
      console.log("params", params);
      submitForm(params).then(response => {
        if (response.data.state === 1) {
          var table = response.data.data.table;
          this.$router.push({ path: "/activeSuccess" });
          console.log("aaa");
        } else {
          this.$toast("您已提交过信息,请勿重复提交");
        }
      });
    }
  },
  created() {
    this.getMobile();
  }
};
</script>

<style lang="scss" scoped>
.page_activeForm {
  height: 100%;
  overflow-y: auto;
  background: #eaf4fe;
  .activeFormTitle {
    background: #fff;
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
  }

  .jiantou {
    margin-left: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 6.2rem;
  }

  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .formBox {
    width: 21rem;
    height: 99rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 15px;
    margin: 0.875rem auto;
  }
  .attentionBox {
    font-size: 0.875rem;
    color: #242d39;
    padding: 0 0.625rem;
    line-height: 1.5rem;
    span {
      color: #fd543a;
      font-weight: bold;
    }
    .attention {
      font-size: 0.9375rem;
      font-weight: bold;
      color: #fd543a;
    }
  }
  .formOne {
    font-size: 1.0625rem;
    margin-left: 0.5rem;
    padding: 1.5rem 0;
    border-bottom: 0.0625rem solid #e5e5e5;
    .formTitle {
      margin: 0 0 1.5rem;
    }
  }
  .formTwo {
    font-size: 1.0625rem;
    margin-left: 0.5rem;
    padding: 1.5rem 0;
    .formTitle {
      margin: 0 0 1.5rem;
    }
  }
  .submit {
    height: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    color: #fff;
    width: 18.75rem;
    margin: 1.625rem auto 0.625rem;
    background: #1b97ff;
    border-radius: 1.875rem;
    font-weight: 600;
    font-size: 1.25rem;
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>

<style lang="scss">
.page_activeForm {
  .van-cell {
    height: 4rem;
    font-size: 1.0625rem;
    color: #000;
    margin-bottom: 1px;
  }
  .van-field__label {
    display: flex;
    align-items: center;
  }
  .van-field__value {
    display: flex;
    align-items: center;
  }
  .van-cell:not(:last-child)::after {
    border-bottom: 1px solid #e5e5e5;
  }
  .van-cell--required::before {
    top: 1.2rem;
    font-size: 1rem;
  }
  .formOne {
    .van-radio-group {
      display: flex;
    }
    .van-radio {
      margin-right: 1.875rem;
    }
  }

  .van-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .van-checkbox {
      width: 50%;
      margin-bottom: 1.125rem;
    }
  }

  .textareaBox {
    padding-left: 0;
    margin-right: 0.875rem;
    margin-top: 0.625rem;
    height: 6.25rem;
    background: #f6f6f6;
    border-radius: 5px;
    .van-cell {
      padding: 0;
    }
    .van-cell__value {
      background: #f6f6f6;
    }
    .van-field__body {
      width: 100%;
      textarea {
        width: 100%;
      }
    }
  }
  .formTwo {
    .van-radio {
      margin-bottom: 1.125rem;
    }
  }
  .textareaBox2 {
    margin-top: 0.625rem;
    margin-right: 0.875rem;
    border-radius: 5px;
    .van-cell {
      height: 7.5rem;
      padding: 0;
    }
    .van-cell__value {
      background: #f6f6f6;
    }
    .van-field__body {
      width: 100%;
      textarea {
        width: 100%;
      }
    }
  }
}
</style>
