<template>
  <div class="home">
    <head-view></head-view>
    <bottom-tool v-model="activityIndex"></bottom-tool>

    <works-list-view
      v-model="formData"
      v-if="init"
      v-show="listVisiabled"
      v-on:showRule="showRuleHandler"
      v-on:worksDetail="showWorksDetail"
    ></works-list-view>

    <member-works-view
      v-model="memberWorks"
      v-if="init && !listVisiabled"
      v-on:back="showWorksList"
      v-on:praiseSuccess="praiseSuccessHandler"
      v-on:showShare="shareModelVisiable=true"
    ></member-works-view>

    <biz-model v-model="model"></biz-model>

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

    <!-- 分享蒙层 -->
    <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",
  getWorks: "/jiajiaCHApi/app/works/get"
};

import { httpGet } from "@/api/fetch-api";
import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import headView from "@/components/plugins/head";
import WorksListView from "./components/WorksListView";
import MemberWorksView from "./components/MemberWorksView";

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

Vue.use(Toast);

export default {
  name: "home",
  data() {
    return {
      activityIndex: 3,
      init: false,
      listVisiabled: true,
      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
      },
      memberWorks: {
        data: {}
      }
    };
  },
  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;
        }
      });
    },
    showRuleHandler() {
      this.model.show = true;
      this.model.title = "规则说明";
      this.model.content = "";
      this.model.btnShow = true;
      this.model.btnText = "我知道了";
      this.model.index = "rule";
      this.model.confirmHandler = null;
      this.model.labelBtnShow = false;
      this.model.labelBtnText = "";
      this.model.labelBtnHandler = null;
    },
    showWorksDetail(params) {
      Toast.loading({
        mask: true,
        message: "数据加载中..."
      });
      httpGet({ url: urls.getWorks, data: params }).then(res => {
        Toast.clear();
        this.memberWorks.data = res.data;
        this.memberWorks.isMy = res.isMy;
        console.log("this.memberWorks=== ", this.memberWorks);
        this.listVisiabled = false;
      });
    },
    showWorksList() {
      this.listVisiabled = true;
    },
    praiseSuccessHandler() {
      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 = false;
    }
  },
  created() {
    this.initActivity();
  },
  components: {
    BottomTool,
    BizModel,
    WorksListView,
    MemberWorksView,
    headView
  }
};
</script>

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

.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>