<template>
  <div class="editClass">
    <div class="sys-container-panel content">
      <div class="container-title">我要报名</div>
      <div class="head-line"></div>

      <div class="text-container space">
        <div class="label">选手姓名：</div>
        <div class="form-item">
          <input v-model="formData.name" placeholder="请填写参赛者姓名" />
        </div>
      </div>

      <div class="text-container space">
        <div class="label">所属地区：</div>
        <div class="inline-group inline-group-width">
          <div class="form-item inline-group inline-02" @click="selectCityHandler">
            <div class="label">{{formData.province ? formData.province : "请选择"}}</div>
            <div class="icon-draw-down"></div>
          </div>
          <div class="form-item inline-group inline-02" @click="selectCityHandler">
            <div class="label">{{formData.city ? formData.city : "请选择"}}</div>
            <div class="icon-draw-down"></div>
          </div>
        </div>
      </div>

      <div class="text-container space">
        <div class="label">个人简介：</div>
        <div class="form-item">
          <input v-model="formData.profile" placeholder="可填写参赛者获取过荣誉、特殊才艺技能等" />
        </div>
      </div>

      <div class="text-container space">
        <div class="label">竞赛宣言：</div>
        <div class="form-item">
          <input v-model="formData.slogan" placeholder="参赛口号，不超过8个字" />
        </div>
      </div>
      <div class="text-container space">
        <div class="label">家长姓名：</div>
        <div class="form-item">
          <input v-model="formData.parentName" placeholder="请填写父亲/母亲称呼" />
        </div>
      </div>
      <div class="text-container space">
        <div class="label">联系方式：</div>
        <div class="form-item">
          <input v-model="formData.parentMobile" placeholder="请填写正确手机号码" />
        </div>
      </div>
      <div class="text-container space">
        <div class="label">照片/视频：</div>
        <div class="item-group top">
          <div>
            <upload-item v-model="formData.worksList"></upload-item>
          </div>
          <div class="tips">可上传1-3张照片，首张默认为海报图</div>
        </div>
      </div>
    </div>
    <div class="sys-btn-02" :class="{disabled : !autoRegister}" @click="submitFormHandler">确认提交</div>

    <div class="center base-margin auto-register-tips" @click="acceptRegisterHandler">
      <div class="icon-register" :class="{activity : autoRegister}"></div>
      <div class="tips">自动注册为立白集团会员，立享会员权益，详见“更多福利”</div>
    </div>

    <van-popup position="bottom" :style="{ height: '40%' }" v-model="area.show">
      <van-area
        :area-list="areaList"
        :columns-num="2"
        title="选择城市"
        :value="formData.cityCode"
        @cancel="area.show = false"
        @confirm="confirmSelectCityHandler"
      />
    </van-popup>
  </div>
</template>

<script>
let urls = {
  area: "https://api.k.wxpai.cn/bizproxy/kdapi/area",
  submit: "/jiajiaCHApi/app/works/submit"
};

import UploadItem from "./UploadItem";
import { httpGet, httpPost } from "@/api/fetch-api";
import AreaList from "@/api/area";

import Vue from "vue";
import { Toast } from "vant";
import { Area } from "vant";
import { Popup } from "vant";

Vue.use(Popup);
Vue.use(Area);
Vue.use(Toast);

export default {
  props: ["value"],
  data() {
    return {
      autoRegister: true,
      successModelVisiable: true,
      area: {
        show: false
      },
      formData: this.value
    };
  },
  methods: {
    selectCityHandler() {
      if (!this.formData.cityCode) {
        this.formData.cityCode = "110100";
      }
      this.area.show = true;
    },
    confirmSelectCityHandler(res) {
      let province = res[0];
      let city = res[1];
      if (!city) {
        return;
      }
      this.formData.province = province.name;
      this.formData.provinceCode = province.code;
      this.formData.city = city.name;
      this.formData.cityCode = city.code;
      this.area.show = false;
    },
    acceptRegisterHandler() {
      this.autoRegister = !this.autoRegister;
      if (!this.autoRegister) {
      }
    },
    submitFormHandler() {
      if (!this.autoRegister) {
        return;
      }
      if (!this.formData.name) {
        Toast("请填写“参数者姓名”");
        return;
      }
      if (!this.formData.province) {
        Toast("请选择“所属地区”");
        return;
      }
      if (!this.formData.profile) {
        Toast("请填写“个人简介”");
        return;
      }
      if (!this.formData.slogan) {
        Toast("请填写“竞赛宣言”");
        return;
      }
      if (this.formData.slogan.length > 8) {
        Toast("“竞赛宣言”不要超过8个字");
        return;
      }
      if (!this.formData.parentName) {
        Toast("请填写“家长姓名”");
        return;
      }
      if (!this.formData.parentMobile) {
        Toast("请填写“联系方式”");
        return;
      }
      if (
        this.formData.parentMobile.indexOf("1") != 0 ||
        this.formData.parentMobile.length != 11
      ) {
        Toast("请填写正确的“联系方式”");
        return;
      }
      if (!this.formData.worksList || this.formData.worksList.length == 0) {
        Toast("请上传作品");
        return;
      }

      Toast.loading({
        mask: true,
        message: "数据提交中..."
      });
      httpPost({ url: urls.submit, data: this.formData }).then(res => {
        Toast.clear();
        this.formData.worksCode = res;
        console.log("submit === =", res);
        this.$emit("submit", res);
      });
    }
  },
  computed: {
    areaList() {
      return AreaList;
    }
  },
  components: {
    UploadItem
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.content {
  margin: 85px auto 60px auto;
  padding-bottom: 60px;

  .head-line {
    height: 60px;
  }

  .edit {
    width: 630px;
    text-align: right;
    u {
      font-size: 24px;
      color: #5db288;
      position: relative;
      z-index: 1000;
    }
  }

  .swipe {
    width: 630px;
    height: 320px;
    margin: auto;
    border: 2px solid #82acae;
    border-radius: 30px;
  }

  .space {
    margin-top: 20px !important;
  }
  .top {
    display: flex;
    align-items: flex-start !important;
  }

  .inline-group-width {
    width: 500px;
  }

  .inline-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text-container {
    display: flex;
    align-items: center;
    width: 620px;
    margin: auto;

    .inline {
      width: 315px !important;
    }

    .inline-02 {
      width: 180px !important;
      padding: 0 30px;
      .label {
        font-size: 20px;
      }
    }

    .right {
      justify-content: flex-end !important;
    }

    .label {
      min-width: 128px;
      font-size: 20px;
      text-align: left;
    }
    .msg {
      color: #303531;
      font-size: 24px;
      text-align: left;
    }
    .primay {
      font-size: 32px !important;
      font-weight: 600;
      color: #ff9e30;
    }

    .form-item {
      width: 500px;
      height: 52px;
      border: 1px solid #82acae;
      background-color: #addfe1;
      border-radius: 26px;
      line-height: 52px;
      display: flex;
      align-items: center;

      input {
        margin-left: 25px;
        line-height: 52px;
        height: 52px;
        border: none;
        width: 90%;
        height: 100%;
        background-color: transparent;
        position: relative;
        z-index: 1000;
        font-size: 22px;
      }
    }
  }

  input::-webkit-input-placeholder {
    color: #4f9984;
    font-size: 18px;
  }
}

.view-btn-group {
  display: flex;
  width: 730px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 200px;

  .sys-btn-02 {
    width: 300px;
    line-height: 90px;
  }
}

.auto-register-tips {
  width: 700px;
  margin: auto;
}

.icon-draw-down {
  width: 30px;
  height: 18px;
  background: url(../../../assets/imgs/draw-down.png) no-repeat;
  background-size: 100%;
}

.base-margin {
  margin-top: 40px;
}

.icon-register {
  width: 30px;
  height: 30px;
  background: url(../../../assets/imgs/checkbox-uncheck.png) no-repeat;
  background-size: 100%;
}

.icon-register.activity {
  width: 30px;
  height: 30px;
  background: url(../../../assets/imgs/checkbox-checked.png) no-repeat;
  background-size: 100%;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.disabled {
  filter: grayscale(100%);
}

.tips {
  font-size: 20px;
  color: #064e39;
  padding-left: 10px;
  text-align: left;
}
</style>