<template>
  <el-form label-width="100px" >
    <el-form-item label="栏目层级：" prop="level">
      <el-radio-group v-model="level" class="self-radio">
        <el-radio label="Self">本栏目</el-radio>
        <el-radio label="Child">本栏目的子栏目</el-radio>
        <el-radio label="CurrentAndChild">本栏目及子栏目</el-radio>
        <el-radio label="Current">本栏目的兄弟栏目</el-radio>
        <el-radio label="Root">根级栏目</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="栏目列表：" prop="catalog" v-show="level!=='Root'">
      <tree-select :value.sync="catalog" :clearable="true" :items="catalogTree" @click-change="onTreeClick" width="80%" placeholder="请选择栏目">
      </tree-select>
    </el-form-item>
    <el-form-item label="内容类型：" prop="contentType">
      <el-select v-model="contentType" placeholder="请选择" class="form-item">
        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="布局类型：" prop="layoutType">
      <el-radio-group  v-model="layoutType">
        <el-radio label="li">列表[li]</el-radio>
        <el-radio label="br">换行[br]</el-radio>
        <el-radio label="tr">表格[tr]</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="显示数目：" prop="lineCount" v-show="!(level==='Self'||level==='Root')">
      <el-input-number size="small" controls-position="right" :min='1' v-model="lineCount"></el-input-number>
    </el-form-item>
  </el-form>
</template>
<script>
/* eslint-disable no-template-curly-in-string */
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  data() {
    return {
      level: 'Self',
      lineCount: 5,
      catalogTree: [],
      catalog: 0,
      alias: '',
      types: [],
      contentType: '',
      layoutType: 'li'
    }
  },
  methods: {
    onTreeClick(data) {
      this.alias = data.alias
    },
    getCode() {
      let curLevel
      if (this.level === 'Self') {
        curLevel = `Alias="${this.alias}"`
      } else {
        if (this.level === 'Root') {
          curLevel = `level="${this.level}" count="${this.lineCount}"`
        } else {
          curLevel = `level="${this.level}" Alias="${this.alias}" count="${this.lineCount}"`
        }
      }
      // 布局是列表式
      let str
      if (this.layoutType === 'li') {
        str = '<ul>\n'
        str += `  <cms:catalog ${curLevel} type="${this.contentType}">\n'`
        str += `    <z:list>\n`
        str += '    <li><a href="${Catalog.Link}">${Catalog.Name}</a></li>\n'
        str += '    </z:list>\n'
        str += '  </cms:catalog>\n'
        str += `</ul>`
      } else if (this.layoutType === 'br') {
        str = `<cms:catalog ${curLevel} type="${this.contentType}">\n`
        str += '  <z:list>\n'
        str += '    <a href="${Catalog.Link}">${Catalog.Name}</a><br/>\n'
        str += '  </z:list>\n'
        str += '</cms:catalog>'
      } else if (this.layoutType === 'tr') {
        str = `<table cellspace="1" border="0">\n`
        str += `  <cms:catalog ${curLevel} type="${this.contentType}">\n`
        str += '    <z:list>\n'
        str += '      <tr><td><a href="${Catalog.Link}">${Catalog.Name}</a></td></tr>\n'
        str += '    </z:list>\n'
        str += '  </cms:catalog>\n</table>'
      }
      return str
    },
    async init() {
      let catalogTreeResp = await axios.get('/ui/catalog')
      this.catalogTree = catalogTreeResp.data.data
      let res = await axios.get('/ui/contentcore/contenttypes')
      this.types = res.data.data
    }
  },
  watch: {},
  async created() {
  },
  mounted() {},
  components: {
    'tree-select': TreeSelect
  }
}
</script>
<style scoped>
</style>
