<template>
  <div class="apply">
    <van-popup v-model="show" class="form-popup">
      <div class="popup-body">
        <div class="popup-header">
          <div class="title">请填写报名信息</div>
          <div class="close" @click="close">
            <i class="iconfont icon-guanbi"></i>
          </div>
        </div>
        <div class="popup-center">
          <van-form>
            <div
              v-for="(item, index) in formList"
              style="
                border: 1px solid #ebedf0;
                padding: 5px;
                margin-bottom: 5px;
              "
            >
              <van-icon
                v-if="index != 0"
                name="cross"
                @click="deleteRow(index)"
                style="position: absolute; z-index: 100; right: 30px"
              />
              <van-field
                style="margin-top: 2vw; padding-bottom: 2vw"
                label="*参与人姓名"
                v-model="item.participants"
              />
              <van-field
                style="margin-top: 2vw; padding-bottom: 2vw"
                label="*参与人职位"
                v-model="item.participantsPosition"
              />
              <van-field
                style="margin-top: 2vw; padding-bottom: 2vw"
                label="*联系手机"
                v-model="item.participantsPhone"
              />
            </div>
            <van-button
              style="padding-left: 10px; padding-right: 10px; float: right"
              type="primary"
              @click="addRow()"
              size="small"
              >添加参与人</van-button
            >
            <!-- 
            <van-field
              class="totalnum"
              style="margin-top: 0; padding-bottom: 4vw"
              label="总参与人数"
              readonly
              v-model="formList.length"
            /> -->
            <van-field
              class="remark"
              style="margin-top: 0; padding-bottom: 4vw"
              label="说明"
              v-model="remark"
            />
          </van-form>
        </div>
        <div class="popup-foot-but">
          <div class="gb" @click="confirm">确认</div>
        </div>
      </div></van-popup
    >
  </div>
</template>

<script>
import { insertRegisSignInfo } from "../../service/api_activity.js";
import auth from "@/service/auth";
import { forIn } from "lodash";
import { Toast } from "vant";
export default {
  props: {
    referenceId: {
      // 关联id
      type: String,
      default: "",
    },
    referenceType: {
      // 关联类型
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formList: [{}],
      show: false,
      companyName: "",
      participants: "",
      participantsPosition: "",
      participantsPhone: "",
      remark: "",
      participantsNumber: "",
    };
  },
  methods: {
    addRow() {
      this.formList.push({});
    },
    deleteRow(i) {
      this.formList.splice(i, 1);
    },
    init() {
      this.show = true;
    },
    close() {
      this.show = false;
      this.initData();
    },
    initData() {
      this.companyName = "";
      this.participants = "";
      this.participantsPosition = "";
      this.participantsPhone = "";
      this.participantsNumber = "";
      this.remark = "";
    },
    confirm() {
      const _this = this;

      let checkStatus = _this.formList.some((e) => {
        return (
          !e.participants ||
          e.participants.length == 0 ||
          !e.participantsPhone ||
          e.participantsPhone.length == 0 ||
          !e.participantsPosition ||
          e.participantsPosition.length == 0
        );
      });
      console.log(checkStatus);
      if (checkStatus) {
        return Toast("请检查参与人信息是否有误");
      }
      let participants = _this.formList
        .map((e) => {
          return e.participants;
        })
        .join();
      let participantsPhone = _this.formList
        .map((e) => {
          return e.participantsPhone;
        })
        .join();

      let participantsPosition = _this.formList
        .map((e) => {
          return e.participantsPosition;
        })
        .join();

      //   return;
      //   if (!this.companyName) {
      //     Toast("请填写公司名称");
      //     return false;
      //   }
      //   if (!this.participants) {
      //     Toast("请填写参与人姓名");
      //     return false;
      //   }
      //   if (!this.participantsPosition) {
      //     Toast("请填写参与人职位");
      //     return false;
      //   }
      //   if (!this.participantsPhone) {
      //     Toast("请填写联系手机");
      //     return false;
      //   }
      //   if (!this.participantsNumber) {
      //     Toast("请填写总参与人数");
      //     return false;
      //   }
      insertRegisSignInfo({
        companyName: auth.currUser().qymc,
        participants: participants,
        participantsPosition: participantsPosition,
        participantsPhone: participantsPhone,
        remark: this.remark,
        userId: auth.currUser().id,
        participantsNumber: this.formList.length,
        referenceId: this.referenceId,
        referenceType: this.referenceType,
      }).then((res) => {
        if (res.errno === 0) {
          //   return;
          Toast("报名成功");
          if (_this.referenceType === "1") {
            this.$router.push({
              path: "/parkActivities",
              query: {
                // 这里面是写需要传送的值
                active: "1",
              },
            });
          } else {
            this.$router.push({
              path: "/parkTraining",
              query: {
                // 这里面是写需要传送的值
                active: "1",
              },
            });
          }
          _this.show = false;
          _this.initData();
        } else {
          Toast(res.errmsg);
        }
      });
    },
  },
};
</script>

<style lang="scss" type="text/scss">
.apply {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .remark {
    .van-field__label {
      width: 3em;
    }
  }
  .totalnum {
    .van-field__label {
      width: 5em;
    }
  }
}
</style>
