<template>
  <div
    class="weixinConfig"
    ref="container"
  >
    <!-- <div class="tabs">
      <span
        v-for="(item,index) in tabs"
        class="tab-item"
        :key="index"
        :class="{active:currentTab===item}"
        @click="currentTab=item"
      >
        {{ item.name }}
      </span>
    </div> -->

    <component
      :is="currentTab.tag"
      class="tab_content"
    ></component>

    <div class="btns-wrap">
    </div>
  </div>
</template>

<script>
import { getWeixinStyle } from '@/api/saleChannel/weixin'

import Config from './weixin/Config'
import PageStyle from './weixin/PageStyle'

export default {
  components: {
    Config,
    PageStyle
  },
  created () {
    this.init()
  },
  computed: {
    currentData () {
      return this[this.currentTab.data]
    }
  },
  data () {
    return {
      tabs: [
        {
          name: '信息配置',
          tag: 'Config',
          data: 'configData'
        },
        {
          name: '风格选择',
          tag: 'PageStyle'
        }
      ],
      currentTab: {},
      configData: null,
      scrollWrap: document.getElementById('mainScrollWrap')
    }
  },
  methods: {
    init () {
      this.currentTab = this.tabs[0]

      // 获取微信样式信息
      getWeixinStyle().then(res => {
        console.log(res)
      })
    },
    prev () {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    next () {
      if (this.currentStep < 1) {
        this.currentStep++
      }
    },
    complete () {

    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex; height: 36px;font-size: 16px; line-height: 36px; background: #fff; position: absolute; left: 20px;right: 20px;  z-index: 99; cursor: pointer; border: 1px solid #ddd;
  .tab-item {
    position: relative; text-align: center;  flex: 1;
    // &:after {
    //   position: absolute; top: 0; right: 0;width: 0;height: 0; content: '';border: 18px solid #0099a0; border-left: 18px solid #f3f2f2;
    // }
    &.active {
      color: #fff;  background: #0099a0;
      // &:after {
      //   position: absolute; top: 0; right: 0;width: 0;height: 0; content: '';border: 18px solid #f3f2f2; border-left: 18px solid #0099a0;
      // }
    }
  }
  .tab-item:last-child {
    &:after {
      display: none;
    }
  }
}

.btns-wrap {
  display: flex; justify-content: flex-end; text-align: right;position: absolute; left: 20px;right: 20px; bottom: 20px;
  .ant-btn{
    margin-left: 8px;
  }
}

.content{
  animation-duration: 0.3s;
}
</style>
