<template>
  <div>
    <div class="navtop">
      <div class="gameName">
        <img src="../../../assets/img/recharge_phone.png" alt="" />
        <span>幸运盲盒</span>
      </div>
      <div class="rightBtn">
        <el-button @click="returnNext">退出</el-button>
        <el-button type="primary">发布并预览</el-button>
      </div>
    </div>
    <div class="content">
      <div class="left-content">
        <el-menu class="dm-aside-menu" ref="asideMenu" :default-active="menuActive" @select="handleMenuSelect">
          <el-menu-item class="dm-sub-menu" v-for="(el, index) in menuList" :key="index" :index="index">
            {{ el }}
          </el-menu-item>
        </el-menu>
        <div class="iphone" v-if="menuActive == 0">
          <span class="gameTitle">{{ gameName }}</span>
          <img src="../../../assets/img/Navbar.png" alt="" />
          <gameTemplate :bgImg="bgImg" :tipsImg="tipsImg" :boxImg="boxImg" :adImg="adImg" />
        </div>
        <div class="iphone" v-else>
          <img :src="bcImg[menuActive]" />
        </div>
      </div>
      <div class="rightForm">
        <dm-steps :active="active" simple>
          <dm-step title="步骤一" @click.native="active = 0"></dm-step>
          <dm-step title="步骤二" @click.native="active = 1"></dm-step>
          <dm-step title="步骤三" @click.native="active = 2"></dm-step>
        </dm-steps>
        <div class="formContent">
          <baseConfig :templateArr="templateData" v-show="active == 0" @change="handleBaseConfigChange" />
          <prizeConfig v-show="active == 1" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import steps from '@/views/game/dm-steps/steps';
import step from '@/views/game/dm-step/step';
import baseConfig from './base-config.vue';
import prizeConfig from './prize-config.vue';
import { getGameTemplateByType } from '@/service/api/gameApi.js';
import gameTemplate from './gameTemplate';
export default {
  data() {
    return {
      active: 0,
      menuActive: 0,
      templateData: [],
      prizeMax: 10,
      prizeMin: 1,
      gameName: '游戏名称',
      bcImg: {
        1: require('@/assets/img/mould_01_rule_page.png'),
        2: require('@/assets/img/mould_01_prize_page.png'),
        3: require('@/assets/img/mould_01_success_page.png'),
        4: require('@/assets/img/mould_01_fail_page.png'),
        5: require('@/assets/img/mould_01_share_page.png')
      },
      menuList: ['首页', '活动规则', '我的奖品', '中奖', '未中奖', '分享效果'],
      bgImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png',
      tipsImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/tips_btn.png',
      boxImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png',
      adImg: ''
    };
  },
  components: {
    'dm-steps': steps,
    'dm-step': step,
    baseConfig,
    gameTemplate,
    prizeConfig
  },
  mounted() {
    this.getGameTemplateByType();
  },
  destroyed() {
    this.$store.dispatch('setShowLayout', true);
  },
  methods: {
    handleBaseConfigChange(data) {
      console.log('handleBaseConfigChange----->');
      console.log(data);
      const { backImageUrl, noticeImageUrl, adsImageUrl, gameName } = data;
      this.bgImg = backImageUrl;
      this.tipsImg = noticeImageUrl;
      this.boxImg = data.prizeStyleJson[0].imageNoSelectUrl;
      this.adImg = adsImageUrl;
      this.gameName = gameName;
    },
    returnNext() {
      this.$store.dispatch('setShowLayout', true);
      this.$router.go(-1);
    },
    handleMenuSelect(index) {
      this.menuActive = index;
    },
    getGameTemplateByType() {
      getGameTemplateByType({ templateType: 1 }).then(res => {
        if (res.code == 0) {
          if (res.result && res.result.length) {
            res.result.forEach(item => {
              const { gameTemplateMaterialList } = item;
              let materialMap = {};
              gameTemplateMaterialList.forEach(val => {
                if (materialMap.hasOwnProperty(val.materialKey)) {
                  materialMap[val.materialKey].push(val);
                } else {
                  materialMap[val.materialKey] = [val];
                }
              });
              item.materialMap = materialMap;
            });
            this.templateData = res.result;
            const { prizeMax, prizeMin } = res.result[0];
            this.prizeMax = prizeMax;
            this.prizeMin = prizeMin;
          }
          console.log(this.templateData);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navtop {
  width: 100%;
  height: 52px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(220, 223, 230, 0.4);
  border-radius: 4px 0px 0px 0px;
  display: flex;
  padding: 10px 20px;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  .gameName {
    align-items: center;
    display: flex;
    img {
      width: 30px;
    }
    span {
      color: #303133;
      font-weight: 600;
      font-size: 17px;
      margin-left: 12px;
    }
  }
}
.content {
  display: flex;
  overflow: hidden;
}
.left-content {
  width: 520px;
  height: calc(100vh - 52px);
  background: #f7f8fa;
  box-sizing: border-box;
  padding: 30px 0 20px 20px;
  display: flex;
}
.dm-aside-menu {
  width: 90px;
  height: 100%;
  border-right: none;
  background-color: #f7f8fa;
  box-sizing: border-box;
  overflow-y: auto;
  /deep/ .el-menu {
    background-color: transparent;
  }
  /deep/ .el-menu-item {
    padding-left: 10px !important;
    height: 32px;
    width: auto;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 34px;
    border-radius: 4px;
    &:hover {
      background: #ebeffe;
    }
    &.is-active {
      font-weight: 500;
      color: #2f54eb;
      background: #ebeffe;
    }
    + .el-menu-item {
      margin-top: 8px;
    }
  }
}
.iphone {
  width: 375px;
  background: #ffffff;
  border-radius: 8px 8px 0px 0px;
  margin: 0 20px 0 13px;
  position: relative;
  img {
    width: 375px;
  }
}
.gameTitle {
  font-size: 17px;
  position: absolute;
  color: #000000;
  font-weight: 600;
  z-index: 100;
  top: 56px;
  left: 154px;
}
.rightForm {
  padding: 30px 20px 0 30px;
  box-sizing: border-box;
  width: calc(100vw - 520px);
  height: calc(100vh - 108px);
  background: #ffffff;
  .formContent {
    margin-top: 20px;
    overflow-y: auto;
    height: 90%;
  }
}
</style>
