
<template>
  <el-dialog :title="title" :visible.sync="tagsDialog" class="tags-dialog">
    <!-- <el-tabs tab-position="left" v-model="tab" style="height: 400px;">
      <el-tab-pane :label="tag.name" :name="tag.code" v-for="tag in tags" :key="tag.code">
        <span slot="label"><i :class="tag.icon"></i>{{tag.name}}</span> -->
        <div style="height: 240px;margin-left:15px">
          <component :is="tab" :ref="tab" ></component>
        </div>
      <!-- </el-tab-pane>
    </el-tabs> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="tagsDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
import configTag from './tags/configTag.vue'
import catalogTag from './tags/catalogTag.vue'
import adTag from '../../advertise/templateeditor/adTag.vue'
import articleTag from './tags/articleTag.vue'
import fileTag from './tags/fileTag.vue'
import imageGroupTag from './tags/imageGroupTag.vue'
import videoTag from './tags/videoTag.vue'
import audioTag from './tags/audioTag.vue'
import imageTag from './tags/imageTag.vue'
import commentTag from './tags/commentTag.vue'
import voteTag from './tags/voteTag.vue'
import imagePlayerTag from './tags/imagePlayerTag.vue'
import linkTag from './tags/linkTag.vue'
import messageBoardTag from './tags/messageBoardTag.vue'
import listTag from './tags/listTag.vue'
import searchTag from './tags/searchTag.vue'
import specialTag from './tags/specialTag.vue'
import includeTag from './tags/includeTag.vue'
import blockTag from './tags/blockTag.vue'
import positionTag from './tags/positionTag.vue'
import pageBarTag from './tags/pageBarTag.vue'
import varTag from './tags/varTag.vue'
import ifTag from './tags/ifTag.vue'

export default {
  data() {
    return {
      tab: 'configTag',
      code: '',
      title: '模板标签',
      tags: [
        {
          icon: 'fa fa-text-height',
          code: 'configTag',
          name: '模板类型'
        },
        {
          icon: 'fa fa-folder-open',
          code: 'catalogTag',
          name: '栏目列表'
        },
        {
          icon: 'fa fa-bullhorn',
          code: 'adTag',
          name: '广告版位'
        },
        {
          icon: 'fa fa-files-o',
          code: 'articleTag',
          name: '文章列表'
        },
        {
          icon: 'fa fa-file-archive-o',
          code: 'fileTag',
          name: '附件列表'
        },
        {
          icon: 'fa fa-image',
          code: 'imageGroupTag',
          name: '图片组列表'
        },
        {
          icon: 'fa fa-youtube-play',
          code: 'videoTag',
          name: '视频列表'
        },
        {
          icon: 'fa fa-volume-up',
          code: 'audioTag',
          name: '音频列表'
        },
        {
          icon: 'fa fa-image',
          code: 'imageTag',
          name: '图片列表'
        },
        {
          icon: 'fa fa-comment-o',
          code: 'commentTag',
          name: '评论'
        },
        {
          icon: 'fa fa-bar-chart',
          code: 'voteTag',
          name: '调查'
        },
        {
          icon: 'fa fa-window-restore',
          code: 'imagePlayerTag',
          name: '图片播放器'
        },
        {
          icon: 'fa fa-link',
          code: 'linkTag',
          name: '友情链接'
        },
        {
          icon: 'fa fa-file-text',
          code: 'messageBoardTag',
          name: '留言板'
        },
        {
          icon: 'fa fa-file-text-o',
          code: 'specialTag',
          name: '专题列表'
        },
        {
          icon: 'fa fa-retweet',
          code: 'listTag',
          name: '列表循环'
        },
        {
          icon: 'fa fa-search',
          code: 'searchTag',
          name: '站内搜索'
        },
        {
          icon: 'fa fa-file-archive-o',
          code: 'includeTag',
          name: '包含文件'
        },
        {
          icon: 'fa fa-cube',
          code: 'blockTag',
          name: '文件区块'
        },
        {
          icon: 'fa fa-share',
          code: 'positionTag',
          name: '当前位置'
        },
        {
          icon: 'fa fa-ellipsis-h',
          code: 'pageBarTag',
          name: '分页条'
        },
        {
          icon: 'fa fa-pencil-square-o',
          code: 'varTag',
          name: '模板字段'
        },
        {
          icon: 'fa fa-sitemap',
          code: 'ifTag',
          name: '条件输出'
        }
      ]
    }
  },
  methods: {
    confirmClick() {
      this.$emit('insertCode', this.$refs[this.tab].getCode())
    },
    selectTab(tab) {
      this.tab = tab
      this.tags.forEach(tag => {
        if (tag.code === tab) {
          this.title = `${tag.name}`
        }
      })
    }
  },
  watch: {
    tab(val) {
      this.$nextTick(() => {
        this.$refs[this.tab].init()
      })
    }
  },
  computed: {
    tagsDialog: {
      get() {
        return this.tagsDialgShow
      },
      set(val) {
        this.$emit('update:tagsDialgShow', val)
      }
    }
  },
  props: ['tagsDialgShow'],
  components: {
    configTag,
    adTag,
    articleTag,
    audioTag,
    blockTag,
    catalogTag,
    commentTag,
    fileTag,
    ifTag,
    imageGroupTag,
    imagePlayerTag,
    imageTag,
    includeTag,
    linkTag,
    listTag,
    messageBoardTag,
    pageBarTag,
    positionTag,
    searchTag,
    specialTag,
    varTag,
    videoTag,
    voteTag
  }
}
</script>

<style>
/* 在一般情况下dialog宽为800像素，在逻辑分辨率480像素以下dialog宽为96% */

.tags-dialog .el-dialog {
  width: 800px;
}

@media (max-width: 480px) {
  .tags-dialog .el-dialog {
    width: 96%;
    max-height: 400px;
  }
}
.tags-dialog .form-item{
  width:80%;
  min-width:160px;
}
</style>
