<template>
  <div class="home">
    <div class="head-leap"></div>

    <ViewModel
      v-model="formData"
      v-if="init && !formEdit"
      v-on:edit="formEdit=true"
      v-on:praiseSuccess="showPraiseSuccessModel"
      v-on:showShare="shareModelVisiable=true"
    ></ViewModel>
    <EditModel v-model="formData" v-if="init && formEdit" v-on:submit="showSuccessModel"></EditModel>

    <div class="bottom-line"></div>

    <bottom-tool v-model="activityIndex"></bottom-tool>
    <biz-model v-model="model"></biz-model>
    <!-- 分享蒙层 -->
    <div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
      <div class="shareModelContainer">
        <div class="shareModelMask"></div>
        <div class="shareIcon"></div>
      </div>
    </div>
  </div>
</template>

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

import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import EditModel from "./components/EditModel";
import ViewModel from "./components/ViewModel";

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

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

Vue.use(Toast);

export default {
  name: "home",
  data() {
    return {
      activityIndex: 2,
      formEdit: false,
      init: false,
      isMy: 1,
      shareModelVisiable: false,
      formData: {
        worksCode: "",
        name: "",
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        profile: "",
        slogan: "",
        parentName: "",
        parentMobile: "",
        worksList: []
      },
      model: {
        show: false,
        title: "",
        content: "",
        index: "default",
        btnShow: false,
        btnText: "",
        confirmHandler: null,
        labelBtnShow: false,
        labelBtnText: "",
        labelBtnHandler: null
      }
    };
  },
  methods: {
    initActivity() {
      Toast.loading({
        mask: true,
        message: "加载中..."
      });

      httpGet({ url: urls.myWork }).then(res => {
        this.init = true;
        Toast.clear();
        this.formData = res.data || {};
        if (!res.data) {
          this.formEdit = true;
        } else {
          this.formEdit = false;
        }
        this.initShare();
      });
    },
    showSuccessModel() {
      this.model.title = "温馨提示";
      this.model.content = "报名已成功！";
      this.model.index = "default";
      this.model.btnShow = true;
      this.model.btnText = "查看我的主页";
      this.model.show = true;

      let that = this;
      this.model.confirmHandler = function() {
        that.initActivity();
      };
    },
    showPraiseSuccessModel() {
      this.model.show = true;
      this.model.title = "点赞成功";
      this.model.content = "您已获得一次抽奖机会";
      this.model.btnShow = true;
      this.model.btnText = "前往抽奖";

      let that = this;
      this.model.confirmHandler = function() {
        that.$router.push("/draw");
      };
      this.model.labelBtnShow = true;
      this.model.labelBtnText = "查看个人主页";
      this.model.labelBtnHandler = function() {
        that.initActivity();
      };
    },
    initShare() {
      let link = location.origin + location.pathname;
      if (this.formData.worksCode) {
        link += "?worksCode=" + this.formData.worksCode;
      }
      let desc = this.formData.profile || null;
      let imgurl =
        this.formData.worksList.length > 0
          ? this.formData.worksList[0].worksUrl
          : null;
      as.setShare(link, null, desc, imgurl);
    }
  },
  components: {
    BottomTool,
    EditModel,
    ViewModel,
    BizModel
  },
  created() {
    this.initActivity();
  }
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  text-align: center;
}

.head-leap {
  width: 750px;
  height: 231px;
  background: url(../../assets/imgs/head-leap.png);
  background-size: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.bottom-line {
  height: 250px;
  background-color: transparent;
}

.shareModel {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 9999;
}

.shareModelContainer {
  position: relative;
  height: 100%;
  width: 100%;
}

.shareModelMask {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.shareIcon {
  position: absolute;
  top: 0px;
  right: 30px;
  width: 425px;
  height: 220px;
  background: url(../../assets/imgs/model-share-tip.png) no-repeat;
  background-size: 100%;
}
</style>