<template>
  <div class="mobile-content">
    <!-- 顶部 -->
    <div class="top">
      <span style="color:#FF691F;float:left">在PC端IE9及以下浏览器部分效果可能无法正常展现</span>
    <!-- 调色板 -->
      <el-popover ref="popover" placement="bottom-start" width="400" trigger="click">
        <color-palette @change="onColorChange" @restore="restoreTheme"></color-palette>
      </el-popover>
      <el-button v-popover:popover class="theme-btn" plain type="text">
        <img src="@static/assets/images/theme.gif" />&nbsp;主题色
        <span class="colorCircleBtn" :style="{borderColor:themeColor[currentTabIndex]}">
          <i :style="{backgroundColor:themeColor[currentTabIndex]}" :data-color="themeColor[currentTabIndex]"></i>
        </span>
      </el-button>
    </div>
    <!-- 主体 -->
    <div class="main" id="tmpl">
      <el-tabs @tab-click="onTabClick" tab-position="left" class="tmpl-box">
        <el-tab-pane :key="tmpLabel[index]" :label="tmpLabel[index]" style="width: 100%;" :style="{height: tabsHeight}" v-for="(item,index) in themeColor">
          <components :is="'filter-'+index" @selected="onSelected" :theme-color="item" v-if="restoreThemeFlag[index]"></components>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import filter0 from './mobileContents/filter-0.vue'
import filter1 from './mobileContents/filter-1.vue'
import filter2 from './mobileContents/filter-2.vue'
import filter3 from './mobileContents/filter-3.vue'
import filter4 from './mobileContents/filter-4.vue'
import filter5 from './mobileContents/filter-5.vue'
import filter6 from './mobileContents/filter-6.vue'
import filter7 from './mobileContents/filter-7.vue'
import filter8 from './mobileContents/filter-8.vue'
import filter9 from './mobileContents/filter-9.vue'
import colorPalette from './mobileContentTheme.vue'
export default {
  data() {
    return {
      tabsHeight: '',
      currentTabIndex: '0',
      themeColor: ['', '', '', '', '', '', '', '', '', ''],
      restoreThemeFlag: [true, true, true, true, true, true, true, true, true, true],
      tmpLabel: ['标题', '正文', '图片', '模板', '视频', '上关注', '下阅读', '分割线', '表情', '点赞分享']
    }
  },
  components: {
    'filter-0': filter0,
    'filter-1': filter1,
    'filter-2': filter2,
    'filter-3': filter3,
    'filter-4': filter4,
    'filter-5': filter5,
    'filter-6': filter6,
    'filter-7': filter7,
    'filter-8': filter8,
    'filter-9': filter9,
    'color-palette': colorPalette
  },
  methods: {
    // 选中模板
    onSelected(html) {
      this.$emit('selected', html)
    },
    // 调色板选择的颜色改变
    onColorChange(color) {
      this.themeColor.splice(this.currentTabIndex, 1, color)
    },
    // Tab页改变
    onTabClick(tab) {
      this.currentTabIndex = parseInt(tab.index)
    },
    // 重置模板主题色
    restoreTheme() {
      this.restoreThemeFlag.splice(this.currentTabIndex, 1, false)
      this.$nextTick(function () {
        this.restoreThemeFlag.splice(this.currentTabIndex, 1, true)
        this.themeColor = ['', '', '', '', '', '', '', '', '', '']
        this.$nextTick(function () {
          this.bindClick()
        })
      })
    },
    bindClick() {
      // 为每个li节点绑定点击事件，用于向父组件传递当前选中的HTML片段
      let $el = $(this.$el)
      $el.delegate('.tmpl-list', 'click', (e) => {
        let $tmplEl = $(e.currentTarget)
        this.$emit('selected', $tmplEl.find('.pEditor').prop('outerHTML'))
        let $autonum = $tmplEl.find('.autonum')
        $autonum.html(parseInt($autonum.html()) + 1)
      })
    }
  },
  created() {
    // 让Tabs高度充满屏幕
    this.tabsHeight = (document.documentElement.clientHeight - 150) + 'px'
  },
  mounted() {
    this.$emit('rendered')
    this.bindClick()
  }
}
</script>

<style>
  .mobile-content .top {
    background: #F0F0F0;
    border-bottom: 1px solid #E8E8E8;
    padding-left: 10px;
    height: 41px;
  }

  .mobile-content .top span {
    /* margin-top: 12px; */
  }

  .mobile-content .theme-btn {
    float: right;
    margin: 6px 5px 0 0;
    height: 30px;
    line-height: 26px;
    padding:0 3px 0 3px;
  }
  .mobile-content .theme-btn:hover {
    border:none;
  }

  .mobile-content .main .el-tabs__nav-wrap {
    padding-left: 0;
  }

  .mobile-content .main .el-tabs__item {
    height: 38px;
    line-height: 38px;
  }

  .mobile-content .el-tabs--left .el-tabs__header {
    margin-right: 0;
  }

  .mobile-content li {
    list-style-type: none;
    font-family: "Microsoft YaHei", SimSun, Tahoma, sans-serif;
  }

  .mobile-content .tmpl-list {
    cursor: pointer;
    list-style: none;
    width: 100%;
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: transparent;
    border-bottom: 1px dashed #ddd;
    margin-bottom:10px;
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  .mobile-content .tmpl-list:last-child {
    border-bottom: none;
  }

  .mobile-content .tmpl-list:hover {
    border-top-color: #17AB57;
    border-color: #17AB57;
  }
  .mobile-content .tmpl-list:last-child:hover {
    border-bottom: dashed 1px #17AB57;
  }

  .mobile-content .tmpl-list [class*=copyright] {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    color: #f4f4f4;
    font-size: 16px;
    font-weight: 900;
    padding: 5px;
    display: none;
  }

  .mobile-content .tmpl-list:hover .copyright-bg {
    display: block;
  }

  .mobile-content .tmpl-list:hover [class*=copyright] {
    display: block;
  }

  .mobile-content .tmpl-list .hode-txt {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: #36A8FF;
    padding: 3px 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: none;
  }

  .mobile-content .tmpl-list.copyIsHold .hode-txt {
    display: block;
  }

  .mobile-content .tmpl-list .pEditor {
    padding: 10px;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    word-wrap: break-word !important;
  }

  .mobile-content .tmpl-list .pEditor * {
    max-width: 100% !important;
  }

  .mobile-content .el-tabs__content {
    width: 335px;
    padding: 0px 0 10px 10px;
    float: left;
  }
  .mobile-content .el-tab-pane {
    /* height:auto!important; */
    overflow: auto;
    padding-right: 10px;
  }
  .mobile-content .el-tabs__nav{
    height: auto;
  }
  .theme-btn .colorCircleBtn i{
    width: 14px;
    height: 14px;
    margin: -3px 3px 0;
  }
  .colorCircleBtn i{
    border-radius: 50%;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 2px;
    vertical-align: middle;
  }
</style>
