<template>
  <div class="applet-container">
    <div class="toolbar">
      <el-button
        type="primary"
        size="mini"
        @click="saveDiyComponent"
      >保存</el-button>
    </div>
    <CreationCampComponent class="right-content" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import CreationCampComponent from './CreationCamp/index.vue'
import Applet from '@/api/Applet'
import Custom from '@/api/Custom.js'
export default {
  components: {
    CreationCampComponent
  },
  data () {
    return {
      customParams: {
        current: 1,
        map: {},
        model: {
          config: '',
          isCustom: true,
          isDelete: 0,
          name: ''
        },
        order: 'descending',
        size: 100,
        sort: 'id'
      },
      componentTemplateId: null
    }
  },
  computed: {
    ...mapState('creationCamp', ['diyComponents', 'footerComponent'])
  },
  beforeDestroy() {
    this.initComponents([])
  },
  created () {
    this.init()
    this.getTemplatePage()
  },
  methods: {
    ...mapMutations('creationCamp', ['initComponents', 'initTemplatePage', 'setFooterComponents', 'initFooterComponents']),
    async init () {
      const res = await Applet.getPlatformTemplate()
      const resData = res.data.data
      const componentTemplate = resData.config
      let templateParse = []
      try {
        const templateConfig = JSON.parse(componentTemplate)
        templateParse = templateConfig instanceof Array ? templateConfig : []
      } catch (e) {
        templateParse = []
      }
      const footerComponent = templateParse.find(template => {
        return template.keyCode === 'Footer'
      })
      if (footerComponent) {
        const { content } = footerComponent
        this.setFooterComponents(content)
      } else {
        this.initFooterComponents()
      }
      templateParse = templateParse.filter(template => {
        return template.keyCode !== 'Footer'
      })
      this.initComponents(templateParse)
      this.componentTemplateId = resData.id
    },
    // 获取跳转路径列表
    async getTemplatePage () {
      const res = await Custom.cmsTemplatePage(this.customParams)
      const templatePage = res.data.data.records || []
      const templates = templatePage.map(item => {
        const { name, id } = item
        return {
          value: id,
          label: name,
          isCustom: true
        }
      })
      this.initTemplatePage(templates)
    },
    // 保存装修
    async saveDiyComponent () {
      const footerComponent = {
        keyCode: 'Footer',
        name: '底部导航',
        content: this.footerComponent
      }
      const diyComponents = this.diyComponents.concat(footerComponent)
      let temp = false
      const diyComponentsString = JSON.stringify(diyComponents)
      if (diyComponents.length) {
        diyComponents.forEach((item) => {
          const t = item.content
          if ((t.list && !t.list.length) || (t.goodsList && !t.goodsList.length) || (t.categoryList && !t.categoryList.length)) {
            temp = true
            return this.$message({
              message: `${item.name}组件内容不能为空`,
              type: 'error'
            })
          }
        })
      }
      if (temp) return
      const res = await Applet.updateTemplate({
        config: diyComponentsString,
        sCustom: false,
        id: this.componentTemplateId
      })
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.$message({
          message: this.$t('tips.saveSuccess'),
          type: 'success'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.applet-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 50px);
  .toolbar {
    padding: 12px;
    text-align: right;
    border-bottom: 1px solid #eee;
  }
  .right-content {
    flex: 1;
  }
}
</style>
