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

    <ViewModel v-model="formData" v-if="init && !formEdit" v-on:edit="formEdit=true"></ViewModel>
    <EditModel v-model="formData" v-if="init && formEdit" v-on:submit="initActivity"></EditModel>

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

    <bottom-tool v-model="activityIndex"></bottom-tool>

    <!-- <van-popup class="messagePopue" v-model="successModelVisiable" :close-on-click-overlay="false">
      <div></div>
    </van-popup>-->
  </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 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";
import { Area } from "vant";
import { Popup } from "vant";
import { Swipe, SwipeItem } from "vant";

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

export default {
  name: "home",
  data() {
    return {
      activityIndex: 2,
      formEdit: false,
      init: false,
      isMy: 1,
      successModelVisiable: true,
      formData: {
        name: "",
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        profile: "",
        slogan: "",
        parentName: "",
        parentMobile: "",
        worksList: []
      }
    };
  },
  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;
        }
      });
    }
  },
  components: {
    BottomTool,
    EditModel,
    ViewModel
  },
  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;
}
</style>